/* stardust-frontline/css/main.css */
/* ================================================================
   星尘战线 · 全局样式
   §4 全局 UI 规范：色板 / 字体 / 面板 / 按钮 / 界面切换
   ================================================================ */

@font-face {
  font-family: 'MiSans';
  src: url('../assets/MiSans.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* 色板（宪法 §4，唯一事实来源） */
  --bg-deep: #05070f;
  --bg-panel: rgba(13, 20, 38, .82);
  --line: rgba(120, 180, 255, .25);
  --accent: #4ca7ff;
  --accent2: #8fd6ff;
  --white: #eef4ff;
  --hp: #6fe3a5;
  --danger: #ff6b6b;
  --gold: #ffd54f;
  --rare: #4fc3f7;
  --epic: #b388ff;
  --legend: #ffd54f;

  /* 字号（v1.6.0 响应式：clamp 上界 = 原值 —— 桌面渲染逐像素不变，窄屏自动收缩） */
  --fs-title: clamp(20px, 1.4vw + 12px, 28px);
  --fs-body: 14px;
  --fs-btn: clamp(15px, 0.6vw + 13px, 16px);
  --ls-title: clamp(2px, 0.2vw + 1.5px, 4px);

  /* v1.6.0 响应式：安全区域（iOS 刘海/灵动岛 + Android 手势条；
     viewport-fit=cover 已启用，桌面/无安全区环境 env 回退 0px 零影响） */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
}

/* ================================================================
   战斗 HUD 参考图 v1：PC 指挥界面重置
   仅作用于 .battle-root；暂停层及其 .pause-* 样式不在本批范围内。
   视觉基准：1920×1080，四角锚定、透明线框、蓝青信息层 + 紫色 Boss/能力强调。
   ================================================================ */
@media (min-width: 821px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .battle-root .hud-section-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: rgba(185, 202, 236, .72);
    font: 11px/1.2 ui-monospace, Consolas, "MiSans", monospace;
    letter-spacing: .11em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .battle-root .hud-section-heading span {
    color: rgba(142, 166, 211, .7);
    font-size: 10px;
    letter-spacing: .08em;
  }

  .battle-root .hud-section-heading::after {
    content: '';
    display: block;
    height: 1px;
    flex: 1;
    margin-left: 6px;
    background: linear-gradient(90deg, rgba(104, 177, 255, .58), rgba(104, 177, 255, 0));
  }

  .battle-root .hud-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* v2.3.3 批次E1：常驻 HUD 文字统一暗衬底 —— PC 参考层剥掉了全部面板底，
     11px 淡蓝小字在弹幕/白色爆点上会融进背景（生存可读性）；text-shadow 可继承，
     写在容器上即可覆盖内部 span（hptext 的既有阴影为同一先例） */
  .battle-root .hud-section-heading,
  .battle-root .tactical-meta,
  .battle-root .weapon-system-title,
  .battle-root .hud-stardust,
  .battle-root .hud-objective-text,
  .battle-root .hud-stat-label,
  .battle-root .hptext,
  .battle-root .shieldtext,
  .battle-root .mate-hptext,
  .battle-root .mate-shieldtext,
  .battle-root .mcard-name,
  .battle-root .mcard-status,
  .battle-root .skill-key {
    text-shadow: 0 1px 4px rgba(2, 10, 22, .88), 0 0 2px rgba(2, 10, 22, .65);
  }

  .battle-root .hud-pcard {
    top: auto;
    right: auto;
    bottom: calc(32px + var(--sa-b));
    left: calc(58px + var(--sa-l));
    display: block;
    width: min(360px, 28vw);
    z-index: 2;
  }

  .battle-root .hud-pcard .pcard-icon,
  .battle-root .hud-pcard .pcard-name-row {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .battle-root .hud-pcard .pcard-main { width: 100%; }

  .battle-root .hud-pcard .hud-section-heading {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(104, 177, 255, .28);
  }

  .battle-root .hud-stat-line {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
  }

  .battle-root .hud-stat-label {
    width: 66px;
    flex: 0 0 66px;
    color: rgba(191, 210, 242, .82);
    font: 13px/1.35 ui-monospace, Consolas, "MiSans", monospace;
    letter-spacing: .08em;
  }

  .battle-root .hud-stat-label b {
    color: rgba(191, 210, 242, .72);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .18em;
  }

  .battle-root .hud-pcard .hpbar {
    position: relative;
    width: min(248px, calc(28vw - 82px));
    height: 20px;
    border: 0;
    border-radius: 0;
    background: rgba(19, 43, 64, .58);
    clip-path: polygon(8% 0, 100% 0, 94% 100%, 0 100%);
    overflow: hidden;
  }

  .battle-root .hud-pcard .hpfill {
    border-radius: 0;
    background: linear-gradient(100deg, #20b8d4 0%, #4ce5a8 62%, #a1f1ba 100%);
    box-shadow: 0 0 13px rgba(65, 230, 182, .45);
    clip-path: polygon(8% 0, 100% 0, 94% 100%, 0 100%);
  }

  .battle-root .hud-pcard .hpfill.low {
    background: linear-gradient(100deg, #dd8356, #fa5372);
    box-shadow: 0 0 13px rgba(250, 83, 114, .48);
  }

  .battle-root .hud-pcard .hptext {
    position: absolute;
    inset: 0 24px 0 24px;
    display: flex;
    align-items: center;
    color: #eefcff;
    font: 12px/1 ui-monospace, Consolas, "MiSans", monospace;
    letter-spacing: .11em;
    text-shadow: 0 1px 4px rgba(2, 10, 22, .85);
    z-index: 1;
  }

  .battle-root .hp-line { align-items: flex-start; }

  .battle-root .stat-bars {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
  }

  .battle-root .dash-line { margin-top: 10px; }

  .battle-root .dash-meter {
    display: flex;
    gap: 4px;
    width: min(248px, calc(28vw - 82px));
    height: 18px;
  }

  .battle-root .dash-seg {
    display: block;
    flex: 1;
    height: 100%;
    background: linear-gradient(110deg, #13aee8, #6de6ee) left center / calc(var(--dash-level, 0) * 100%) 100% no-repeat,
      rgba(15, 56, 82, .56);
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    transition: background .16s ease, box-shadow .16s ease;
  }

  .battle-root .dash-seg.on {
    background: linear-gradient(110deg, #13aee8, #6de6ee);
    box-shadow: 0 0 10px rgba(26, 197, 244, .42);
  }

  .battle-root .dash-meter[data-boosting="1"] .dash-seg {
    box-shadow: 0 0 12px rgba(26, 197, 244, .52);
  }

  .battle-root .hud-pcard .heatbar,
  .battle-root .hud-pcard .buff-row { display: none !important; }

  .battle-root .hud-pcard .shield-line { margin-top: 12px; }

  .battle-root .hud-pcard .shieldbar {
    position: relative;
    display: block;
    width: min(248px, calc(28vw - 82px));
    height: 7px;
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: rgba(18, 47, 71, .62);
    clip-path: polygon(8% 0, 100% 0, 94% 100%, 0 100%);
    overflow: hidden;
  }

  .battle-root .hud-pcard .shieldfill {
    background: linear-gradient(100deg, #3b9ee7, #8be9ff);
    box-shadow: 0 0 12px rgba(79, 195, 247, .55);
    clip-path: polygon(8% 0, 100% 0, 94% 100%, 0 100%);
  }

  .battle-root .hud-pcard .shieldtext {
    inset: 0 18px 0 18px;
    font-size: 10px;   /* v2.3.3 批次E4：8→10（移动 uniform scale 后数字层可读下限） */
    color: #e1f8ff;
  }

  .battle-root .hud-mcard {
    top: calc(326px + var(--sa-t));
    right: auto;
    bottom: auto;
    left: calc(58px + var(--sa-l));
    display: block;
    width: min(280px, 27vw);
    z-index: 2;
  }

  .battle-root .hud-mcard[hidden] { display: none !important; }

  .battle-root .hud-mcard > .hud-section-heading {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(104, 177, 255, .22);
  }

  .battle-root .mcard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
  }

  .battle-root .mcard-name {
    color: #a4e7ff;
    font: 14px/1.2 ui-monospace, Consolas, "MiSans", monospace;
    letter-spacing: .08em;
  }

  .battle-root .mcard-status {
    color: rgba(211, 236, 255, .68);
    font: 10px/1.2 ui-monospace, Consolas, "MiSans", monospace;
    letter-spacing: .08em;
  }

  .battle-root .mate-stat-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 9px;
  }

  .battle-root .mate-stat-label {
    width: 54px;
    flex: 0 0 54px;
    color: rgba(191, 210, 242, .72);
    font: 11px/1.25 ui-monospace, Consolas, "MiSans", monospace;
    letter-spacing: .07em;
  }

  .battle-root .mate-stat-label b {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .12em;
  }

  .battle-root .hud-mcard .hpbar,
  .battle-root .hud-mcard .shieldbar.mate {
    position: relative;
    width: min(196px, calc(27vw - 84px));
    border: 0;
    border-radius: 0;
    clip-path: polygon(6% 0, 100% 0, 95% 100%, 0 100%);
  }

  .battle-root .hud-mcard .hpbar {
    height: 14px;
    background: rgba(19, 43, 64, .55);
  }

  .battle-root .hud-mcard .hpfill {
    border-radius: 0;
    clip-path: polygon(6% 0, 100% 0, 95% 100%, 0 100%);
  }

  .battle-root .hud-mcard .hpfill.low {
    background: linear-gradient(90deg, #dd8356, #fa5372);
  }

  .battle-root .hud-mcard .shieldbar.mate {
    display: block;
    height: 7px;
    margin-top: 0;
    background: rgba(18, 47, 71, .55);
  }

  .battle-root .hud-mcard .shieldfill {
    background: linear-gradient(90deg, #3b9ee7, #8be9ff);
    clip-path: polygon(6% 0, 100% 0, 95% 100%, 0 100%);
  }

  .battle-root .hud-mcard .mate-hptext,
  .battle-root .hud-mcard .mate-shieldtext {
    position: absolute;
    inset: 0 10px 0 14px;
    display: flex;
    align-items: center;
    color: #e1f8ff;
    font: 10px/1 ui-monospace, Consolas, "MiSans", monospace;   /* v2.3.3 批次E4：9→10 */
    letter-spacing: .05em;
    text-shadow: 0 1px 3px rgba(2, 10, 22, .9);
    z-index: 1;
  }

  .battle-root .hud-mcard .mate-shieldtext { font-size: 10px; }   /* v2.3.3 批次E4：8→10 */

  .battle-root .hud-objective {
    /* 保持顶部指挥台的现有锚点；目标恢复为原来的扁平任务条样式。 */
    top: calc(30px + var(--sa-t));
    left: calc(444px + var(--sa-l));
    right: auto;
    width: min(340px, 30vw);
    padding: 0 0 12px;
    transform: none;
    border: 0;
    border-bottom: 1px solid rgba(104, 177, 255, .25);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
  }

  .battle-root .objective-line {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 18px 0 0 7px;
    color: rgba(225, 237, 255, .88);
    font: 13px/1.4 ui-monospace, Consolas, "MiSans", monospace;
    letter-spacing: .07em;
  }

  .battle-root .objective-line i {
    color: #53c7ff;
    font-style: normal;
    font-size: 14px;
    text-shadow: 0 0 10px rgba(83, 199, 255, .75);
  }

  .battle-root .hud-objective-text {
    max-width: 250px;
    color: inherit;
    white-space: nowrap;
  }

  .battle-root .hud-objective-meter {
    width: 100%;
    height: 2px;
    margin: 12px 0 0;
    border-radius: 0;
    background: rgba(97, 157, 225, .14);
  }

  .battle-root .hud-objective-meter > span {
    border-radius: 0;
    background: linear-gradient(90deg, #3bbdff, #8f6cff);
  }

  .battle-root .hud-mmwrap {
    /* 目标移走后，战术态势占据左上角，保留与玩家状态的上下分区。 */
    top: calc(58px + var(--sa-t));
    right: auto;
    bottom: auto;
    left: calc(58px + var(--sa-l));
    display: block;
    width: min(280px, 27vw);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .battle-root .radar-frame {
    width: min(246px, 25vw);
    height: 188px;
    margin: 17px 0 0;
    border: 1px solid rgba(84, 164, 240, .17);
    border-top-color: rgba(84, 164, 240, .3);
    background: rgba(2, 8, 23, .22);
    overflow: hidden;
  }

  .battle-root #hud-minimap {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: transparent;
  }

  .battle-root .tactical-meta {
    display: grid;
    gap: 8px;
    margin: 12px 0 0 8px;
    color: rgba(155, 182, 227, .78);
    font: 11px/1.2 ui-monospace, Consolas, "MiSans", monospace;
    letter-spacing: .1em;
  }

  .battle-root .mm-star-row,
  .battle-root .mm-level { display: none; }

  .battle-root .hud-deck {
    top: auto;
    right: calc(58px + var(--sa-r));
    bottom: calc(48px + var(--sa-b));
    left: auto;
    display: block;
    width: min(414px, 31vw);
    transform: none;
  }

  .battle-root .weapon-system-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 0 11px;
    border-bottom: 1px solid rgba(105, 180, 255, .34);
    color: rgba(185, 202, 236, .72);
    font: 11px/1.2 ui-monospace, Consolas, "MiSans", monospace;
    letter-spacing: .1em;
  }

  .battle-root .weapon-system-title span {
    color: rgba(142, 166, 211, .7);
    font-size: 10px;
  }

  .battle-root .weapon-system-body {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 13px;
  }

  .battle-root .weapon-list {
    display: grid;
    gap: 9px;
    flex: 1;
  }

  .battle-root .weapon-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .battle-root .weapon-index {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(126, 177, 241, .26);
    color: rgba(210, 225, 250, .85);
    font: 12px/1 ui-monospace, Consolas, "MiSans", monospace;
  }

  .battle-root .weapon-card,
  .battle-root .weapon-row > .skill-slot {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    width: auto;
    min-width: 0;
    height: 54px;
    min-height: 54px;
    padding: 7px 13px;
    border: 1px solid rgba(134, 153, 204, .34);
    border-radius: 0;
    background: rgba(7, 13, 34, .58);
    box-shadow: none;
  }

  .battle-root .weapon-card[data-quality="rare"],
  .battle-root .weapon-card[data-quality="epic"],
  .battle-root .weapon-card[data-quality="legend"] { border-color: rgba(177, 116, 255, .75); box-shadow: 0 0 15px rgba(127, 82, 255, .15); }

  .battle-root .weapon-card::after,
  .battle-root .weapon-row > .skill-slot::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(102, 174, 255, .08);
    pointer-events: none;
  }

  .battle-root .weapon-card .weapon-icon { width: 94px; justify-content: center; color: #eef4ff; }
  /* v2.3.3 批次E6：位图图标原生渲染 56px（挂载 size 56，backing 112），
     去掉 scale(2.35) 插值放大 —— 24px 位图放大 2.35× 与旁边 SVG 矢量技能图重量不齐 */
  .battle-root .weapon-card .weapon-icon .raster-icon-canvas { width: 56px; height: 56px; }
  .battle-root .weapon-name { margin-left: auto; color: rgba(234, 240, 255, .9); font-size: 12px; letter-spacing: .12em; }
  .battle-root .weapon-card .skill-key,
  .battle-root .weapon-row > .skill-slot .skill-key { display: none; }
  .battle-root .weapon-row > .skill-slot .skill-icon { margin-left: 36px; }
  /* v2.3.3 批次E6：删除 scale(1.55) 死规则 —— 模板中 .weapon-row 内无 .skill-slot，
     Q/E 技能图为 SVG 矢量（本就清晰） */
  .battle-root .weapon-row > .skill-slot .skill-lock { right: 12px; top: 10px; }
  .battle-root .weapon-row > .skill-slot .skill-cd { border-radius: 0; }

  .battle-root .q-ability {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 76px;
    flex: 0 0 76px;
  }

  .battle-root .q-ability > .skill-slot {
    position: relative;
    width: 70px;
    height: 70px;
    border: 0;
    border-radius: 0;
    background: rgba(10, 17, 43, .68);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }

  .battle-root .q-ability > .skill-slot::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: rgba(111, 179, 255, .78);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%, 50% 4%, 96% 50%, 50% 96%, 4% 50%);
    opacity: .8;
  }

  .battle-root .q-ability > .skill-slot > * { z-index: 1; }
  .battle-root .q-ability > .skill-slot .skill-icon { transform: scale(1.25); }
  .battle-root .q-ability > .skill-slot .skill-key { display: none; }
  .battle-root .q-ability-key { color: rgba(221, 232, 255, .86); font: 12px/1 ui-monospace, Consolas, "MiSans", monospace; }

  .battle-root .ability-pair { display: flex; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
  .battle-root .e-ability { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; flex: 0 0 76px; }
  .battle-root .e-ability > .skill-slot { position: relative; width: 70px; height: 70px; border: 0; border-radius: 0; background: rgba(10, 17, 43, .68); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  .battle-root .e-ability > .skill-slot::before { content: ''; position: absolute; inset: 2px; background: rgba(174, 95, 255, .72); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%, 50% 4%, 96% 50%, 50% 96%, 4% 50%); opacity: .78; }
  .battle-root .e-ability > .skill-slot.locked::before { background: rgba(220, 57, 94, .78); }
  .battle-root .e-ability > .skill-slot.locked .skill-icon.gray { color: #ff6b83; }
  .battle-root .e-ability > .skill-slot.locked .skill-icon.gray svg { stroke: #ff6b83; }
  .battle-root .e-ability > .skill-slot.locked .skill-lock svg { stroke: #ff9aaa; }
  .battle-root .e-ability > .skill-slot > * { z-index: 1; }
  .battle-root .e-ability > .skill-slot .skill-icon { transform: scale(1.25); }
  .battle-root .e-ability > .skill-slot .skill-key { display: none; }
  .battle-root .e-ability-key { color: rgba(221, 232, 255, .86); font: 12px/1 ui-monospace, Consolas, "MiSans", monospace; }
  .battle-root .e-ability > .skill-slot.locked { opacity: .9; }
  .battle-root .weapon-card[data-quality="empty"] { border-color: rgba(140, 157, 190, .2); opacity: .66; }
  .battle-root .weapon-card.secondary .weapon-name { color: rgba(171, 190, 222, .72); }

  .battle-root .bosswrap {
    top: calc(58px + var(--sa-t));
    right: calc(58px + var(--sa-r));
    left: auto;
    width: min(364px, 29vw);
    transform: none;
    gap: 8px;
  }

  .battle-root .bossbar {
    padding: 0 0 10px;
    border: 0;
    border-bottom: 1px solid rgba(178, 119, 255, .25);
    border-radius: 0;
    background: transparent;
    text-align: left;
  }

  .battle-root .boss-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 9px; }
  .battle-root .bossbar .boss-name { margin: 0; color: rgba(233, 219, 255, .88); font: 12px/1.2 "MiSans", ui-monospace, Consolas, monospace; letter-spacing: .12em; text-shadow: none; }
  .battle-root .bossbar .boss-value { color: #d7a6ff; font: 12px/1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .08em; }
  .battle-root .bossbar .boss-fill { height: 4px; border-radius: 0; background: rgba(112, 72, 158, .24); }
  .battle-root .bossbar .bossfill { border-radius: 0; background: linear-gradient(90deg, #773dca, #d788ff); box-shadow: 0 0 12px rgba(181, 109, 255, .65); }

  .battle-root .hud-fps { top: calc(22px + var(--sa-t)); right: calc(58px + var(--sa-r)); color: rgba(213, 221, 244, .72); font-size: 12px; }

  /* 暂停图标位于目标信息右侧，沿 1920×1080 参考 HUD 锚定；保留菜单选择器
     只为兼容旧 UI 编辑器记录和触控输入忽略规则。 */
  .battle-root .hud-pausebtn { opacity: 1; pointer-events: auto; }
}

@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* 本轮优先 PC；窄屏保留旧四角流式布局，并为新增结构提供最低限度的可读性。 */
  .battle-root .hud-section-heading,
  .battle-root .hud-section-heading span,
  .battle-root .weapon-system-title,
  .battle-root .weapon-system-title span { font-size: 12px; }
  .battle-root .hud-stat-line { gap: 8px; }
  .battle-root .hud-stat-label { width: 50px; flex-basis: 50px; font-size: 12px; }
  .battle-root .dash-meter { flex: 1; min-width: 110px; }
  .battle-root .tactical-meta { font-size: 12px; }
  .battle-root .weapon-system-body { gap: 6px; }
  .battle-root .weapon-index { width: 24px; height: 30px; }
  .battle-root .q-ability, .battle-root .e-ability { width: 52px; flex-basis: 52px; }
  .battle-root .ability-pair { gap: 4px; }
  .battle-root .q-ability > .skill-slot { width: 48px; height: 48px; }
  .battle-root .e-ability > .skill-slot { width: 48px; height: 48px; }
  .battle-root .hud-menubtn { opacity: 1; }
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
}

body {
  font-family: "Segoe UI", "MiSans", system-ui, sans-serif;
  font-size: var(--fs-body);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- 三层固定布局 ---------- */
#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background: #000;
}

#app {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
}

/* 战斗固定视口锁：不允许宿主 WebView/浏览器把整页当成可拖动文档。滚动只
   在图鉴/设置等明确的内容容器内发生，战斗背景由输入层接管。 */
html.sf-battle-active,
html.sf-battle-active body,
html.sf-battle-active #app,
html.sf-battle-active .battle-root {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* 战斗态 body 级暂停/强化弹窗必须脱离文档流；移动端缩放遮罩的绝对定位
   会把变换后的边界计入 document.scrollWidth，造成约 7px 的假横向溢出。 */
html.sf-battle-active body > .modal-backdrop {
  position: fixed;
}

/* ba-click-fx 覆盖层自带 pointer-events:none + 最高 z-index，无需额外处理 */

/* ---------- 按钮（宪法 §4） ---------- */
.btn {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: var(--fs-btn);
  letter-spacing: .18em;
  color: var(--accent2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 28px;
  cursor: pointer;
  transition:
    background .15s,
    border-color .15s,
    color .15s,
    box-shadow .15s,
    transform .15s;
}

.btn:hover {
  background: rgba(76, 167, 255, .15);
  border-color: rgba(120, 180, 255, .5);
  color: var(--white);
  box-shadow: 0 0 24px rgba(76, 167, 255, .28), inset 0 0 12px rgba(76, 167, 255, .08);
}

.btn:active {
  transform: scale(.97);
}

.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* 第19轮：出击按钮加载失败警示（网页版首次加载被拦截时的重试入口） */
.btn-warn {
  color: #ff7a6b !important;
  border-color: rgba(255, 122, 107, .55) !important;
}

.btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- 面板（宪法 §4） ---------- */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(76, 167, 255, .12);
}

/* ---------- 界面切换：淡入淡出 250ms + 8px 位移（宪法 §4） ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                 /* 第15轮：原生滚动 → Canvas 自绘（根治滚动条闪现） */
}

.screen-in  { animation: screenIn .25s ease-out; }    /* 不 fill：动画结束回落基础 transform（移动端 UI 缩放 scale 不被覆盖） */
.screen-out { animation: screenOut .25s ease-in both; }

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

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

/* ---------- 主菜单（menuUI.js 构建的 DOM） ---------- */
.menu-root {
  flex-direction: column;
  text-align: center;
}

.menu-title {
  font-size: var(--fs-title);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 64px;
  text-shadow: 0 0 22px rgba(76, 167, 255, .35);
}

.menu-title .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(7px);
  filter: blur(6px);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease, text-shadow .5s ease;
}

.menu-title .ch.lit {
  opacity: 1;
  transform: none;
  filter: blur(0);
  text-shadow: 0 0 16px rgba(143, 214, 255, .8);
}

.menu-title .ch.space { width: 1.05em; }

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;                      /* 宪法：按钮间距 20px */
  align-items: center;
}

.menu-nav .btn {
  width: 250px;
  text-align: center;
  /* 模糊背景（毛玻璃）：贴合主菜单粒子背景的层次感 */
  background: rgba(10, 18, 36, .38);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  /* 浮现过渡（第8轮：粒子汇聚同期，柔和显现） */
  transition:
    background .15s,
    border-color .15s,
    color .15s,
    box-shadow .15s;
}

.menu-btn-hide {
  opacity: 0;
  transform: none;
  filter: none;
  pointer-events: none;
}

.menu-btn-show {
  opacity: 1;
  transform: none;
  filter: none;
}

/* 主菜单版本页脚：右下角低调淡蓝小字 */
.menu-ver {
  position: absolute;
  right: calc(18px + var(--sa-r));
  bottom: calc(14px + var(--sa-b));
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(115, 158, 228, .8);
  pointer-events: none;
}

/* ---------- 占位屏幕（screens.js 路由骨架） ---------- */
.screen-panel {
  padding: 48px 60px;
  text-align: center;
  min-width: min(360px, 92vw);
}

.screen-title {
  font-size: var(--fs-title);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent2);
  margin-bottom: 40px;
  text-shadow: 0 0 18px rgba(76, 167, 255, .3);
}

/* ================================================================
   战斗屏幕与 HUD（hud.js，宪法 §4 HUD 红线 12 项）
   ================================================================ */
.battle-root {
  background: #05070f;
}

#battle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 第1阶段 WebGPU FX：仅承载透明加色粒子，Canvas 仍是完整场景与回退源。
   它位于战斗画布之上、屏幕滤镜与 HUD 之下，不接收输入，也不改变动态
   VisualViewport surface 的尺寸/缩放。 */
.battle-root > .battle-gpu-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 第21轮：电子屏幕滤镜（扫描线 + 暗角）—— 参考「引力回响」屏幕质感；
   只随战斗屏幕存在（hud.js 构建），canvas 之上、HUD(z2) 之下 → 菜单/HUD 不受影响。
   开关 save.settings.screenFx（默认关）→ .off 隐藏 */
.screenfx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(2,3,12,.65) 100%);
}
.screenfx.off {
  display: none;
}

.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* ---------- 战役剧情通讯（非模态，不暂停战斗） ----------
   卡片使用与战斗 HUD 相同的设计单位和安全区锚点；没有按钮、焦点或命中盒，
   因而会从输入链路穿透到 Canvas/摇杆。关键横幅 z-index 仍高于本层。 */
.battle-story-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.battle-story-layer[hidden] { display: none; }

.battle-story-card {
  position: absolute;
  top: calc(158px + var(--sa-t));
  right: calc(58px + var(--sa-r));
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  width: 424px;
  min-height: 126px;
  padding: 12px 15px 12px 11px;
  box-sizing: border-box;
  color: #eef5ff;
  background:
    linear-gradient(105deg, rgba(9, 23, 49, .97), rgba(4, 11, 27, .92)),
    radial-gradient(circle at 0 0, rgba(111, 184, 255, .18), transparent 62%);
  border: 1px solid var(--story-accent, #9be8ff);
  border-left: 3px solid var(--story-accent, #9be8ff);
  box-shadow: 0 0 24px rgba(76, 167, 255, .18), inset 0 0 24px rgba(67, 129, 214, .08);
  clip-path: polygon(0 9px, 9px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 12px 100%, 0 calc(100% - 12px));
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}

.battle-story-layer.is-visible .battle-story-card {
  opacity: 1;
  transform: translateY(0);
}

.battle-story-card::after {
  position: absolute;
  right: 13px;
  bottom: 7px;
  width: 74px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--story-accent, #9be8ff));
  opacity: .62;
  content: '';
}

.battle-story-portrait-frame {
  position: relative;
  align-self: stretch;
  min-height: 102px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(117, 164, 232, .11), rgba(3, 10, 27, .5));
  border: 1px solid var(--story-accent, #9be8ff);
  clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}

.battle-story-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: .94;
  filter: saturate(.92) contrast(1.03) drop-shadow(0 0 9px var(--story-accent, #9be8ff));
}

.battle-story-portrait:not(.is-ready) { opacity: 0; }

.battle-story-signal {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--story-accent, #9be8ff);
  box-shadow: 0 0 9px var(--story-accent, #9be8ff);
}

.battle-story-copy {
  min-width: 0;
  align-self: center;
}

.battle-story-kicker {
  color: var(--story-accent, #9be8ff);
  font: 9px/1.2 ui-monospace, Consolas, "MiSans", monospace;
  letter-spacing: .14em;
  white-space: nowrap;
}

.battle-story-speaker {
  margin-top: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .12em;
  text-shadow: 0 0 10px rgba(111, 184, 255, .32);
}

.battle-story-text {
  margin-top: 8px;
  color: rgba(226, 237, 255, .9);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .battle-story-card { transition: none; transform: none; }
}

/* HUD 根层只负责铺满视口，交互必须显式恢复命中。
   之前只有“自定义 HUD”模式才恢复 pointer-events:auto，实机上按钮视觉可见但
   elementFromPoint 永远落到 battle-canvas，技能/冲刺/互动/菜单全部无法点按。 */
.hud .skill-slot,
.hud .weapon-card,
.hud .hud-menubtn,
.hud .denial-buildbtn,
.hud .ui-editor-hotspot { pointer-events: auto; }

/* ---------- 1 玩家卡（左上） ---------- */
.hud-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(76, 167, 255, .12);
}

.hud-pcard { top: calc(16px + var(--sa-t)); left: calc(16px + var(--sa-l)); }

/* 当前机体驾驶员立绘：只显示透明 PNG，不创建卡片、边框、角标或文字容器。
   锚在左下 STATUS 上方并略向下收，STATUS 继续保持前景可读。 */
.battle-root .hud-pilot-portrait {
  position: absolute;
  left: calc(58px + var(--sa-l));
  bottom: calc(162px + var(--sa-b));
  width: calc(205px * 1.1);
  height: calc(260px * 1.1);
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.battle-root .hud-pilot-portrait canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
  border: 0;
  filter: drop-shadow(0 0 16px rgba(93, 160, 255, .28));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.pcard-icon { display: flex; }

.pcard-name {
  font-size: 17px;
  letter-spacing: .14em;
  color: var(--accent2);
  text-shadow: 0 0 10px rgba(76, 167, 255, .5);
}

/* 第20轮：机体名 + 血条数字同一行 */
.pcard-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.hpbar {
  position: relative;
  width: 220px;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(6, 10, 20, .72);
  overflow: hidden;
}

.hpbar.thin { width: 150px; height: 10px; }

.hpfill {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #7deab1, var(--hp));
  border-radius: 6px;
  transition: width .25s ease;
  box-shadow: 0 0 8px rgba(111, 227, 165, .45);
}

.hpfill.low {
  background: linear-gradient(180deg, #ffb3b3, var(--danger));
  box-shadow: 0 0 8px rgba(255, 107, 107, .5);
  /* v2.3.3 批次E8：低血纹理双编码 —— 红色之外叠加白色斜纹，
     红绿色弱玩家也能凭纹理区分满血/低血（红色主编码不变） */
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .28) 0 4px, transparent 4px 9px),
    linear-gradient(180deg, #ffb3b3, var(--danger));
}

.hpfill.mate { background: linear-gradient(180deg, #9fd8ff, var(--rare)); }

/* 第20轮：血条数字（机体名后，不再覆盖在血条内） */
.hptext {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(143, 214, 255, .92);
  text-shadow: 0 0 8px rgba(76, 167, 255, .5);
}

.shieldbar {
  position: relative;
  display: block;
  margin-top: 4px;
  width: 220px;
  height: 6px;
  border-radius: 3px;
  background: rgba(6, 10, 20, .6);
  overflow: hidden;
}

.shieldbar.mate {
  width: 160px;
  height: 4px;
  margin-top: 3px;
}

/* ---------- 热量条（第10轮：光束武器过热） ---------- */
.heatbar {
  display: none;
  position: relative;
  margin-top: 4px;
  width: 220px;
  height: 6px;
  border-radius: 3px;
  background: rgba(6, 10, 20, .6);
  overflow: hidden;
}

.heatfill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff9e40, #ff5252);
  transition: width .12s linear;
}

.heatbar.over .heatfill { background: linear-gradient(90deg, #ff5252, #ff1744); }

.heatlabel {
  position: absolute;
  right: -34px;
  top: -3px;
  font-size: 10px;
  color: #ff5252;
  letter-spacing: .05em;
}

.shieldfill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4fc3f7, #8fd6ff);
  transition: width .25s ease;
  box-shadow: 0 0 6px rgba(79, 195, 247, .6);
}

/* 双相星使 v2 HUD：文字徽章让 A/B 不依赖颜色辨识；阵列护盾独立于普通护盾。 */
.binary-state { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 2px 0 5px; }
.binary-form-badge, .binary-crystal-count {
  display: inline-flex; align-items: center; min-height: 18px; padding: 1px 6px;
  border: 1px solid rgba(146,115,255,.72); background: rgba(26,12,56,.62);
  color: #cfc1ff; font-size: 10px; letter-spacing: .08em; text-shadow: 0 0 8px rgba(146,115,255,.8);
}
.binary-form-badge[data-form="light"] { border-color: rgba(231,199,122,.86); background: rgba(67,48,13,.52); color: #fff3c0; text-shadow: 0 0 8px rgba(255,231,155,.8); }
.binary-array-shield { position: relative; flex: 1 1 100%; height: 14px; border: 1px solid rgba(231,199,122,.55); background: rgba(26,20,9,.72); overflow: hidden; }
.binary-array-shield-fill { height: 100%; width: 0; background: linear-gradient(90deg, #c49a42, #fff6c4); box-shadow: 0 0 9px rgba(255,226,139,.7); transition: width .18s linear; }
.binary-array-shield span { position: absolute; inset: 0; text-align: center; font-size: 9px; line-height: 12px; color: #fffbe8; text-shadow: 0 1px 3px #09070a; }
.binary-e-state { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); white-space: nowrap; color: #eee1b2; font-size: 9px; letter-spacing: .04em; pointer-events: none; }
.binary-state[hidden], .binary-array-shield[hidden] { display: none !important; }

.shieldtext {
  position: absolute;
  inset: 0 12px 0 16px;
  display: flex;
  align-items: center;
  color: rgba(225, 248, 255, .9);
  font: 11px/1 ui-monospace, Consolas, "MiSans", monospace;   /* v2.3.3 批次E4：9→11（HP 数字 12px 为先例） */
  letter-spacing: .06em;
  text-shadow: 0 1px 3px rgba(2, 10, 22, .9);
  z-index: 1;
}

/* 激活增益图标行：3 个 buff 槽 + 右侧复活徽章（第28轮填充） */
.buff-row {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.buff-slot {
  width: 26px;
  height: 26px;
  position: relative;
  border: 1px dashed rgba(120, 180, 255, .3);
  border-radius: 6px;
  background: rgba(13, 20, 38, .45);
  transition: border-color .2s ease, background .2s ease;
}

/* 有增益激活：虚线转实线亮框 */
.buff-slot.on {
  border-style: solid;
  border-color: rgba(143, 214, 255, .45);
  background: rgba(23, 38, 66, .5);
}

.buff-ico {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  color: var(--accent2);
}

.buff-t {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;   /* v2.3.3 批次E4：8→10（剩余秒数是生存关键数字） */
  font-weight: 700;
  line-height: 1;
  color: rgba(143, 214, 255, .92);
  text-shadow: 0 0 3px rgba(76, 167, 255, .55);
}

/* 剩余复活机会（第28轮）：canvas 自绘徽章阵列 */
.revive-row {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.revive-badge {
  width: 16px;
  height: 16px;
  display: block;
  transition: filter .25s ease, opacity .25s ease;
}

.revive-t {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent2);
  text-shadow: 0 0 4px rgba(76, 167, 255, .6);
}

/* 3s 原地复活倒计时：徽章蓝光呼吸脉动 */
.revive-row.countdown .revive-badge {
  animation: revivePulse 1s ease-in-out infinite;
}

@keyframes revivePulse {
  50% {
    filter: brightness(1.75) drop-shadow(0 0 5px rgba(143, 214, 255, .95));
  }
}

/* ---------- 2 队友卡（左下） ---------- */
.hud-mcard { bottom: calc(16px + var(--sa-b)); left: calc(16px + var(--sa-l)); flex-direction: column; align-items: flex-start; gap: 5px; }

.mcard-name {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--accent2);
  opacity: .85;
}

.mcard-status {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--white);
  opacity: .6;
}

/* ---------- 3 小地图（右上，180×120） ---------- */
/* v2.3.2：星辉计数拾取弹跳（setStardust 值变化时触发一次；inline 需 inline-block 才能 transform） */
.hud-stardust { display: inline-block; }
.hud-stardust.bump { animation: stardustBump .32s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes stardustBump {
  from { transform: scale(1.35); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hud-stardust.bump { animation: none; }
}
.hud-mmwrap {
  position: absolute;
  top: calc(16px + var(--sa-t));
  right: calc(16px + var(--sa-r));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(76, 167, 255, .12);
}

#hud-minimap {
  width: 180px;
  height: 120px;
  background: rgba(3, 6, 14, .9);
  border-radius: 5px;
}

.mm-star-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 213, 79, .4);
}

.mm-level {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--accent2);
  opacity: .85;
}

/* ---------- 5 目标追踪器（顶部中央） ---------- */
.hud-objective {
  position: absolute;
  top: calc(16px + var(--sa-t));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--accent2);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(13, 20, 38, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 0 10px rgba(76, 167, 255, .5);
}

.hud-objective-text {
  display: block;
  max-width: min(56vw, 520px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-objective-meter {
  display: block;
  width: min(100%, 170px);
  height: 2px;
  margin: 4px auto 0;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(120, 180, 255, .16);
}

.hud-objective-meter > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 8px rgba(76, 167, 255, .65);
  transition: width .18s ease-out;
}

/* ---------- 6 战斗卡组（底部中央） ---------- */
.hud-deck {
  position: absolute;
  bottom: calc(16px + var(--sa-b));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.skill-slot {
  position: relative;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 20, 38, .85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-slot.locked { opacity: .55; }

.skill-icon { display: flex; color: var(--accent2); }
.skill-icon.gray { color: #5a6b85; }
.skill-icon.gray svg { stroke: #5a6b85; }
.raster-icon-canvas { display: block; object-fit: contain; }
.weapon-icon .raster-icon-canvas { filter: drop-shadow(0 0 5px rgba(79, 195, 247, .24)); }

/* 技能图标统一使用 inline SVG 自绘；动态层只在战斗 HUD / 增益槽启用，
   图鉴和指挥页保持静态矢量，避免资料页产生无意义的动画噪声。 */
.skill-icon svg[data-skill-icon],
.buff-ico svg[data-skill-icon] {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 34%, transparent));
}

.skill-icon svg[data-skill-icon] .skill-motion,
.buff-ico svg[data-skill-icon] .skill-motion {
  transform-box: fill-box;
  transform-origin: center;
  opacity: .78;
  pointer-events: none;
}

.skill-icon svg[data-skill-icon] .skill-motion-orbit,
.buff-ico svg[data-skill-icon] .skill-motion-orbit {
  animation: skillOrbit 2.8s linear infinite;
}
.skill-icon svg[data-skill-icon] .skill-motion-orbit-node,
.buff-ico svg[data-skill-icon] .skill-motion-orbit-node {
  animation: skillOrbitNode 2.8s ease-in-out infinite;
}
.skill-icon svg[data-skill-icon] .skill-motion-lock,
.buff-ico svg[data-skill-icon] .skill-motion-lock,
.skill-icon svg[data-skill-icon] .skill-motion-shield,
.buff-ico svg[data-skill-icon] .skill-motion-shield {
  animation: skillGlyphSpin 4.4s linear infinite;
}
.skill-icon svg[data-skill-icon] .skill-motion-pulse,
.buff-ico svg[data-skill-icon] .skill-motion-pulse,
.skill-icon svg[data-skill-icon] .skill-motion-heal-ring,
.buff-ico svg[data-skill-icon] .skill-motion-heal-ring {
  animation: skillGlyphPulse 1.55s ease-in-out infinite;
}
.skill-icon svg[data-skill-icon] .skill-motion-pulse-core,
.buff-ico svg[data-skill-icon] .skill-motion-pulse-core {
  animation: skillCorePulse 1.1s ease-in-out infinite;
}
.skill-icon svg[data-skill-icon] .skill-motion-dash,
.buff-ico svg[data-skill-icon] .skill-motion-dash,
.skill-icon svg[data-skill-icon] .skill-motion-fold,
.buff-ico svg[data-skill-icon] .skill-motion-fold {
  animation: skillVectorFlow 1.2s ease-in-out infinite;
}
.skill-icon svg[data-skill-icon] .skill-motion-scan,
.buff-ico svg[data-skill-icon] .skill-motion-scan,
.skill-icon svg[data-skill-icon] .skill-motion-prism,
.buff-ico svg[data-skill-icon] .skill-motion-prism {
  animation: skillScanSweep 1.9s ease-in-out infinite;
}
.skill-icon svg[data-skill-icon] .skill-motion-impact,
.buff-ico svg[data-skill-icon] .skill-motion-impact,
.skill-icon svg[data-skill-icon] .skill-motion-glitch,
.buff-ico svg[data-skill-icon] .skill-motion-glitch {
  animation: skillImpactFlicker 1.25s steps(2, end) infinite;
}
.skill-icon svg[data-skill-icon] .skill-motion-heal,
.buff-ico svg[data-skill-icon] .skill-motion-heal,
.skill-icon svg[data-skill-icon] .skill-motion-prism-ring,
.buff-ico svg[data-skill-icon] .skill-motion-prism-ring {
  animation: skillHealOrbit 2.1s linear infinite;
}

.skill-slot .skill-icon { transition: opacity .18s ease, filter .18s ease; }
.skill-slot.on-cd .skill-icon { opacity: .68; filter: saturate(.64); }
.skill-slot.is-ready .skill-icon { filter: drop-shadow(0 0 8px currentColor); }
.skill-slot.is-casting { animation: skillSlotCast .46s cubic-bezier(.2, .9, .3, 1); }
.skill-slot.is-casting::after {
  position: absolute;
  inset: -5px;
  border: 1px solid currentColor;
  border-radius: inherit;
  content: '';
  pointer-events: none;
  animation: skillCastRing .46s ease-out both;
}
.skill-slot.is-casting .skill-motion-layer { animation: skillCastGlyph .46s cubic-bezier(.2, .9, .3, 1); }

.skill-key {
  position: absolute;
  left: 4px;
  bottom: 2px;
  font-size: 11px;   /* v2.3.3 批次E4：9→11（移动缩放后键位角标不可读） */
  letter-spacing: .05em;
  color: var(--accent2);
  opacity: .8;
}

.skill-cd {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: conic-gradient(from 0deg, rgba(6, 10, 20, .85) var(--deg), rgba(6, 10, 20, 0) var(--deg));
  opacity: 0;
  transition: opacity .2s;
}

.skill-slot.on-cd .skill-cd { opacity: 1; }

.skill-cdtext {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  text-shadow: 0 0 6px rgba(0, 0, 0, .9);
}

.skill-lock {
  position: absolute;
  right: 3px;
  top: 3px;
  display: flex;
}

.weapon-card {
  position: relative;                 /* 第20轮：B 键角标定位基准 */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 20, 38, .85);
  min-height: 52px;
}

.weapon-card[data-quality="rare"]   { border-color: var(--rare);   box-shadow: 0 0 14px rgba(79, 195, 247, .25); }
.weapon-card[data-quality="epic"]   { border-color: var(--epic);   box-shadow: 0 0 14px rgba(179, 136, 255, .3); }
.weapon-card[data-quality="legend"] { border-color: var(--legend); box-shadow: 0 0 14px rgba(255, 213, 79, .3); }

.weapon-icon { display: flex; }

.weapon-name {
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--white);
}

/* ---------- 7 浮动伤害数字 ---------- */
.dmg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 5;
}

.dmg-num {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 0 6px rgba(0, 0, 0, .9), 0 0 2px #000;
  animation: dmgFloat 1s ease-out both;
  pointer-events: none;
}

.dmg-num.crit { color: var(--gold); font-size: 17px; }
.dmg-num.heal { color: #a5d6a7; font-size: 13px; }

@keyframes dmgFloat {
  0%   { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - var(--drift, 14px))); }
}

/* ---------- 8 事件 toast（右下角竖排堆叠） ---------- */
.toast-stack {
  position: absolute;
  right: calc(16px + var(--sa-r));
  bottom: calc(90px + var(--sa-b));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  z-index: 6;
}

.toast {
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(13, 20, 38, .85);
  animation: toastIn .25s ease-out both;
}

.toast.out { animation: toastOut .4s ease-in both; }

@keyframes toastIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

/* ---------- 9 低血量警告（边缘红色呼吸脉冲） ---------- */
.lowhp {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 90px 30px rgba(255, 60, 60, .35);
  z-index: 4;
}

.lowhp.on {
  opacity: 1;
  animation: lowhpPulse 1.1s ease-in-out infinite;
}

@keyframes lowhpPulse {
  0%, 100% { box-shadow: inset 0 0 70px 20px rgba(255, 60, 60, .25); }
  50%      { box-shadow: inset 0 0 110px 40px rgba(255, 60, 60, .5); }
}

/* ---------- 10 中央横幅（逐字显现） ---------- */
.hud-banner {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(24px, 4vw + 12px, 32px);
  letter-spacing: .3em;
  color: var(--accent2);
  text-shadow: 0 0 26px rgba(76, 167, 255, .85);
  opacity: 0;
  transition: opacity .45s ease;     /* 淡入淡出双向过渡（第8轮） */
  pointer-events: none;
  z-index: 7;
}

.hud-banner.show { opacity: 1; }

.hud-banner .ch {
  display: inline-block;
  opacity: 0;
  transition: opacity .4s;
}

.hud-banner .ch.lit { opacity: 1; }

/* ---------- 10.5 随机特殊事件 · 居中静态横幅（左右蓝色三角 + 事件名 + 小字说明） ---------- */
.hud-marquee {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  transform: translateY(-80px);            /* 初始态：上移 + 透明 */
  transition: opacity .5s ease, transform .5s ease;
}

.hud-marquee.on {
  opacity: 1;
  transform: translateY(0);                /* 滑入到位 */
}

.hud-marquee-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.hud-marquee-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(26px, 5vw + 14px, 42px);
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--accent2);                   /* 与"时间停滞"横幅同款蓝色 */
  text-shadow: 0 0 26px rgba(76, 167, 255, .85);
}

.hud-marquee-sub {
  font-size: 17px;                         /* 说明小字（比横幅小一号） */
  letter-spacing: .22em;
  color: var(--accent2);
  opacity: .85;
  text-shadow: 0 0 14px rgba(76, 167, 255, .6);
}

.hud-marquee .hud-warn {
  display: inline-block;
  width: 26px;
  height: 23px;
}

/* ---------- 12 Boss 血条（第9轮：多 Boss 叠条，每 Boss 一条不重叠） ---------- */
.bosswrap {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}

/* 第20轮：防卫作战核心 HUD（top 74px）遮挡 Boss 血条 → 该模式下 Boss 条下移 */
.denial-wrap:not([hidden]) ~ .bosswrap { top: 128px; }

.bossbar {
  width: 100%;
  padding: 6px 12px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(6, 10, 20, .82);
  text-align: center;
}

.bossbar .boss-name {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--danger);
  margin-bottom: 4px;
  text-shadow: 0 0 10px rgba(255, 107, 107, .5);
}

.bossbar .boss-fill {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.bossbar .bossfill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff8a8a, var(--danger));
  transition: width .15s;
}

/* ---------- 结算弹窗 ---------- */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: auto;
}

.modal-backdrop[hidden] { display: none; }

/* ================================================================
   浏览器启动全屏提示
   仅提示卡接收输入，外围提示层不阻断主菜单其它控件；全屏请求必须
   发生在玩家点击“开启全屏”的真实手势中。固定在 html 级视口，适配
   移动参考表面的左右扩展区，不参与 #app 的二次缩放。
   ================================================================ */
.sf-fullscreen-prompt {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 24px;
  pointer-events: none;
  color: #eaf3ff;
}

.sf-fullscreen-prompt[hidden] { display: none; }

.sf-fullscreen-prompt-card {
  position: relative;
  width: min(590px, calc(100vw - 36px));
  box-sizing: border-box;
  padding: 26px 30px 22px;
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgba(7, 20, 48, .98), rgba(2, 9, 26, .98)),
    linear-gradient(90deg, rgba(76, 167, 255, .1), transparent 55%);
  border: 1px solid rgba(105, 190, 255, .72);
  border-radius: 0 18px 0 18px;
  box-shadow: 0 0 0 1px rgba(1, 12, 32, .9), 0 16px 48px rgba(0, 0, 0, .42), 0 0 34px rgba(45, 128, 255, .2), inset 0 0 28px rgba(75, 146, 255, .08);
  clip-path: polygon(0 14px, 14px 0, calc(100% - 32px) 0, 100% 32px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 32px 100%, 0 calc(100% - 32px));
  opacity: 0;
  transform: translateY(12px) scale(.97);
  transition: opacity .2s ease, transform .2s ease;
}

.sf-fullscreen-prompt.is-visible .sf-fullscreen-prompt-card { opacity: 1; transform: none; }
.sf-fullscreen-prompt-card::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(143, 214, 255, .14); pointer-events: none; }
.sf-fullscreen-prompt-card::after { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 1px; background: #8fd6ff; box-shadow: 0 0 16px #8fd6ff; pointer-events: none; }
.sf-fullscreen-prompt-head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; color: #7f9ac7; font: 10px/1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .15em; }
.sf-fullscreen-prompt-kicker { color: #70c9ff; }
.sf-fullscreen-prompt-index { color: #b995ff; }
.sf-fullscreen-prompt-card h2 { position: relative; z-index: 1; margin: 25px 0 12px; color: #f0f6ff; font: 500 clamp(26px, 2.4vw, 38px)/1.1 "MiSans", "Segoe UI", sans-serif; letter-spacing: .12em; text-shadow: 0 0 16px rgba(143, 214, 255, .32); }
.sf-fullscreen-prompt-card p { position: relative; z-index: 1; max-width: 500px; margin: 0; color: #a9bad7; font: 14px/1.7 "MiSans", "Segoe UI", sans-serif; }
.sf-fullscreen-prompt-status { position: relative; z-index: 1; margin-top: 18px; padding: 9px 11px; color: #74d7d0; background: rgba(43, 206, 196, .06); border: 1px solid rgba(68, 215, 207, .23); font: 10px/1.35 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .08em; }
.sf-fullscreen-prompt-status.is-error { color: #ff9ca8; background: rgba(255, 70, 101, .07); border-color: rgba(255, 91, 116, .35); }
.sf-fullscreen-prompt-actions { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.sf-fullscreen-prompt-actions button { min-height: 58px; padding: 9px 12px; color: #eaf4ff; background: rgba(13, 34, 72, .74); border: 1px solid rgba(113, 162, 233, .55); border-radius: 0 10px 0 10px; cursor: pointer; font: 500 15px/1.2 "MiSans", "Segoe UI", sans-serif; letter-spacing: .08em; }
.sf-fullscreen-prompt-actions button small { display: block; margin-top: 6px; color: #8ea7cc; font: 9px/1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .1em; }
.sf-fullscreen-prompt-actions button:hover, .sf-fullscreen-prompt-actions button:focus-visible { color: #fff; border-color: #b4e6ff; outline: 1px solid rgba(180, 230, 255, .35); outline-offset: 2px; box-shadow: 0 0 18px rgba(76, 167, 255, .2), inset 0 0 16px rgba(76, 167, 255, .08); }
.sf-fullscreen-prompt-actions button:disabled { opacity: .56; cursor: not-allowed; }
.sf-fullscreen-prompt-accept { background: linear-gradient(135deg, rgba(40, 112, 207, .8), rgba(37, 47, 139, .82)) !important; border-color: rgba(147, 218, 255, .82) !important; }
.sf-fullscreen-prompt-hint { position: relative; z-index: 1; margin-top: 14px; color: #7287aa; font: 10px/1.3 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .06em; }

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .sf-fullscreen-prompt { padding: 12px; place-items: end center; }
  .sf-fullscreen-prompt-card { width: min(590px, calc(100vw - 24px)); padding: 18px 18px 16px; }
  .sf-fullscreen-prompt-card h2 { margin-top: 17px; font-size: 23px; }
  .sf-fullscreen-prompt-card p { font-size: 12px; line-height: 1.55; }
  .sf-fullscreen-prompt-status { margin-top: 12px; font-size: 9px; }
  .sf-fullscreen-prompt-actions { margin-top: 12px; }
  .sf-fullscreen-prompt-actions button { min-height: 52px; font-size: 13px; }
  .sf-fullscreen-prompt-hint { margin-top: 9px; font-size: 8px; }
}

.modal {
  min-width: min(320px, 90vw);
  padding: 34px 44px;
  text-align: center;
  animation: modalIn .3s cubic-bezier(.2, .9, .3, 1.15) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: none; }
}

.modal-title {
  font-size: clamp(19px, 1vw + 14px, 24px);
  letter-spacing: .3em;
  font-weight: 600;
  color: var(--accent2);
  margin-bottom: 24px;
  text-shadow: 0 0 16px rgba(76, 167, 255, .4);
}

.modal-title.fail {
  color: var(--danger);
  text-shadow: 0 0 16px rgba(255, 107, 107, .4);
}

.modal-stats {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--white);
}

.modal-stats .row {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.modal-stats .k { color: var(--accent2); opacity: .75; }
.modal-stats .v-gold { color: var(--gold); }

/* ================================================================
   职业选择（classSelect.js）
   ================================================================ */
.cs-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 30px;
}

.cs-head {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cs-stardust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 213, 79, .4);
}

.modal-body {
  font-size: 14px;
  color: var(--white);
  margin-bottom: 24px;
  line-height: 1.7;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.cs-body {
  display: flex;
  gap: 18px;
  align-items: stretch;
}

.cs-list {
  width: min(380px, 94vw);
  overflow: hidden;              /* 第15轮：原生滚动 → Canvas 自绘（滚动状态 JS 维护） */
  max-height: 440px;
}
.cs-list-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  will-change: transform;        /* 内容位移由 canvasScroll transform 驱动 */
}

.cs-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--white);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.cs-row:hover { background: rgba(76, 167, 255, .1); }
.cs-row.sel { border-color: var(--accent); background: rgba(76, 167, 255, .14); }

.cs-row-name { font-weight: 600; letter-spacing: .08em; }
.cs-row-tag { font-size: 11px; opacity: .65; }
.cs-row-state { font-size: 11px; white-space: nowrap; }
.cs-row-state .ok { color: var(--hp); }
.cs-row-state .locked { color: var(--danger); }

.cs-detail {
  width: min(420px, 94vw);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
}

.cs-detail-head {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.cs-detail-name { font-size: clamp(18px, 1vw + 14px, 22px); font-weight: 600; letter-spacing: .2em; }
.cs-detail-tag { font-size: 12px; opacity: .7; }

.cs-detail-preview {
  height: 108px;
  border: 1px solid rgba(109, 190, 255, .22);
  background: linear-gradient(135deg, rgba(5, 17, 36, .84), rgba(22, 10, 48, .56));
  overflow: hidden;
  position: relative;
}
.cs-ship-preview { width: 100%; height: 100%; display: block; }

.cs-stat, .cs-wpn, .cs-sk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.cs-stat .k, .cs-wpn .k, .cs-sk .k {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent2);
  min-width: 76px;
}

.cs-stat .bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(6, 10, 20, .7);
  overflow: hidden;
}

.cs-stat .bar .fill { height: 100%; border-radius: 4px; }
.cs-stat .bar .fill.hp { background: var(--hp); }
.cs-stat .bar .fill.spd { background: var(--accent); }

.cs-wpn, .cs-sk { line-height: 1.5; }
.cs-sk.dim { opacity: .7; }

.cs-bottom {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cs-mate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--accent2);
}

.cs-mate select {
  font: inherit;
  font-size: 13px;
  color: var(--white);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
}

/* ================================================================
   战前准备（prepUI.js）
   ================================================================ */
.prep-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 30px 30px 40px;
  margin: auto;                     /* 超高时由 prepUI 滚动模块顶部对齐 + transform 位移 */
  will-change: transform;
}

/* 第15轮：战前准备 Canvas 自绘滚动条覆盖层（pointer-events:none 不挡交互） */
#prep-scroll-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.prep-body {
  display: flex;
  gap: 18px;
}

.prep-class {
  width: min(300px, 88vw);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prep-cname { font-size: clamp(19px, 1vw + 14px, 24px); font-weight: 600; letter-spacing: .18em; }
.prep-ctag { font-size: 12px; opacity: .7; margin-bottom: 8px; }
.prep-cstat, .prep-cskill { font-size: 13px; color: var(--white); line-height: 1.6; }

.prep-weapons {
  width: min(460px, 94vw);
  padding: 16px;
}

.prep-wtitle { font-size: 14px; letter-spacing: .2em; color: var(--accent2); margin-bottom: 10px; }

.prep-wlist {
  overflow: hidden;              /* 第15轮：武器列表随战前准备整体滚动，不设 max-height */
}
.prep-wlist-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prep-wrow {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--white);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.prep-wrow:hover { background: rgba(76, 167, 255, .1); }
.prep-wrow.sel { border-color: var(--accent); background: rgba(76, 167, 255, .14); }
.prep-wrow.locked { opacity: .5; cursor: not-allowed; }

/* ---------- 章节选择（章节卡含代码绘制章节图；为后续新章节预留） ---------- */
.prep-chapters { padding: 14px 16px; margin-top: 12px; width: 100%; box-sizing: border-box; }

.prep-chgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.prep-ch {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: min(396px, 88vw);
  padding: 10px;
  text-align: left;
  font: inherit;
  color: var(--white);
  background: rgba(8, 14, 28, .6);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.prep-ch:hover { background: rgba(76, 167, 255, .1); border-color: rgba(120, 180, 255, .5); }
.prep-ch.sel {
  border-color: var(--accent);
  background: rgba(76, 167, 255, .14);
  box-shadow: 0 0 14px rgba(76, 167, 255, .22);
}
.prep-ch.locked { opacity: .45; cursor: not-allowed; }

.prep-chart {
  display: block;
  flex: 0 0 auto;
  width: 150px;
  height: 84px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(120, 180, 255, .28);
}

.prep-chart img.chapter-art-raster { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.prep-chart-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  letter-spacing: .2em;
  color: rgba(238, 244, 255, .5);
  background: #05070f;
}

.prep-chinfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.prep-chname { font-size: 16px; font-weight: 600; letter-spacing: .12em; color: var(--accent2); }
.prep-chdesc { font-size: 12px; opacity: .72; line-height: 1.5; }
.prep-chprog { font-size: 11px; color: #ffd54f; letter-spacing: .08em; }

/* ---------- 战役选关（第8轮） ---------- */
.prep-levels { padding: 14px 16px; margin-top: 12px; width: 100%; box-sizing: border-box; }
.prep-lvch { color: var(--accent); letter-spacing: .06em; }

.prep-lvgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.prep-lv {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--white);
  background: rgba(8, 14, 28, .6);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.prep-lv:hover { background: rgba(76, 167, 255, .1); border-color: rgba(120, 180, 255, .5); }
.prep-lv.sel { border-color: var(--accent); background: rgba(76, 167, 255, .16); color: var(--accent2); }
.prep-lv.locked { opacity: .4; cursor: not-allowed; }
.prep-lv-num { color: var(--accent2); font-weight: 600; }
.prep-lv.locked .prep-lv-num { color: var(--white); }
.prep-lv-name { letter-spacing: .04em; opacity: .92; }

/* ---------- 难度选择（第9轮） ---------- */
.prep-diff { padding: 14px 16px; margin-top: 12px; }

.prep-diffgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.prep-diffbtn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 10px;
  font: inherit;
  text-align: left;
  color: var(--white);
  background: rgba(8, 14, 28, .6);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.prep-diffbtn:hover { background: rgba(76, 167, 255, .1); border-color: rgba(120, 180, 255, .5); }
.prep-diffbtn.sel { border-color: var(--accent); background: rgba(76, 167, 255, .16); }
.prep-diffname { font-weight: 600; color: var(--accent2); letter-spacing: .06em; }
.prep-diffbtn.sel .prep-diffname { color: var(--white); }
.prep-diffdesc { font-size: 11px; line-height: 1.5; opacity: .72; }

.prep-wicon {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--white);
}
.prep-wicon .raster-icon-canvas,
.inv-icon .raster-icon-canvas {
  filter: drop-shadow(0 0 5px rgba(79, 195, 247, .24));
}

.prep-winfo { display: flex; flex-direction: column; gap: 2px; }
.prep-wname { font-size: 14px; letter-spacing: .06em; }
.prep-wname em { font-style: normal; font-size: 10px; margin-left: 6px; }
.prep-wdesc { font-size: 11px; opacity: .65; }
.prep-wstate { font-size: 11px; color: var(--danger); }

.q-common { color: var(--accent2); }
.q-rare { color: var(--rare); }
.q-epic { color: var(--epic); }
.q-legend { color: var(--legend); }

.prep-bottom { display: flex; gap: 14px; }

/* ================================================================
   局内弹窗（panels.js）：3选1 强化 + 背包
   ================================================================ */
.choice-panel {
  width: min(720px, 94vw);
  max-width: 92vw;
  padding: 26px 30px;
  text-align: center;
}

.choice-title {
  font-size: clamp(18px, 1vw + 14px, 22px);
  letter-spacing: .3em;
  color: var(--accent2);
  margin-bottom: 22px;
  text-shadow: 0 0 16px rgba(76, 167, 255, .4);
}

.choice-row {
  display: flex;
  flex-wrap: wrap;              /* v1.6.0 响应式：窄屏三卡自动换行不裁剪 */
  gap: 14px;
  justify-content: center;
}

.choice-card {
  width: min(200px, 30vw);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font: inherit;
  color: var(--white);
  background: rgba(8, 14, 28, .8);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
  /* v2.3.2：入场 stagger（delay 由 panels.js 按序内联写入） */
  animation: choiceCardIn .3s cubic-bezier(.18, .84, .25, 1.08) backwards;
}

@keyframes choiceCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .choice-card { animation: none; }
}

.choice-card:hover {
  border-color: var(--accent);
  background: rgba(76, 167, 255, .14);
  transform: translateY(-2px);
}

.choice-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.choice-icon svg { width: 40px; height: 40px; }

.choice-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--accent2);
}

.choice-desc {
  font-size: 12px;
  line-height: 1.6;
  opacity: .75;
}

.choice-fit {
  min-height: 16px;
  padding: 2px 7px;
  border: 1px solid rgba(126, 226, 255, .24);
  border-radius: 999px;
  color: var(--accent2);
  font-size: 10px;
  letter-spacing: .08em;
  opacity: .9;
}

/* 第25轮：强化层数圆点条（当前/上限，参考商店永久强化 sh-dot） */
.choice-levels {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.choice-dot {
  width: 8px;
  height: 5px;
  border-radius: 3px;
  background: rgba(120, 180, 255, .18);
}

.choice-dot.on {
  background: var(--accent);
  box-shadow: 0 0 5px rgba(76, 167, 255, .55);
}

.choice-levels-txt {
  font-size: 11px;
  opacity: .6;
  letter-spacing: .08em;
}

.choice-hint {
  margin-top: 16px;
  font-size: 11px;
  opacity: .5;
  letter-spacing: .2em;
}

.inv-panel {
  width: min(680px, 94vw);
  max-width: 92vw;
  max-height: 84vh;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

.inv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.inv-title {
  font-size: clamp(17px, 1vw + 14px, 20px);
  letter-spacing: .3em;
  color: var(--accent2);
}

.btn-sm {
  font-size: 13px;
  padding: 6px 16px;
}

.inv-groups {
  overflow: hidden;                /* 第17轮：原生滚动 → Canvas 自绘 */
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.inv-groups-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
  flex: 0 0 auto;
  width: 100%;
}

.inv-group-title {
  font-size: 13px;
  letter-spacing: .2em;
  margin-bottom: 8px;
  opacity: .9;
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.inv-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: var(--white);
  background: rgba(8, 14, 28, .7);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.inv-slot:hover { border-color: var(--accent); background: rgba(76, 167, 255, .12); }
.inv-slot.locked { opacity: .45; cursor: not-allowed; }
.inv-slot.locked:hover { border-color: var(--line); background: rgba(8, 14, 28, .7); }
.inv-slot.equipped { border-color: var(--accent); background: rgba(76, 167, 255, .12); }

.inv-icon {
  width: 28px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid currentColor;
  border-radius: 6px;
}

.inv-name { flex: 1; letter-spacing: .04em; }
.inv-q { font-size: 10px; opacity: .7; }
.inv-tag {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 9px;
  opacity: .8;
  letter-spacing: .1em;
}

.inv-empty { font-size: 13px; opacity: .6; padding: 20px 0; text-align: center; }

/* toast 品质着色（drops 武器拾取） */
.toast.q-common { color: var(--accent2); }
.toast.q-rare { color: var(--rare); }
.toast.q-epic { color: var(--epic); }
.toast.q-legend { color: var(--legend); }

/* ================================================================
   模式选择（modeSelect.js）
   ================================================================ */
.ms-wrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  padding: 28px 48px 34px;
  color: #b9c8e5;
  background:
    linear-gradient(90deg, rgba(45, 83, 151, .08) 1px, transparent 1px) 0 0 / 80px 100%,
    linear-gradient(rgba(45, 83, 151, .08) 1px, transparent 1px) 0 0 / 100% 80px,
    radial-gradient(circle at 50% 48%, rgba(18, 70, 126, .16), transparent 54%),
    linear-gradient(135deg, rgba(3, 11, 28, .96), rgba(3, 8, 21, .98));
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, "MiSans", monospace;
}

.ms-wrap::before,
.ms-wrap::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.ms-wrap::before {
  inset: 0;
  opacity: .25;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(105, 158, 219, .04) 3px 4px);
  mix-blend-mode: screen;
}

.ms-wrap::after {
  left: 22px;
  top: 170px;
  bottom: 176px;
  width: 2px;
  background: linear-gradient(#4ca7ff, transparent 12%, transparent 88%, #4ca7ff);
  opacity: .5;
  box-shadow: 0 0 12px rgba(76, 167, 255, .45);
}

.ms-header,
.ms-main,
.ms-footer { position: relative; z-index: 1; min-width: 0; }

.ms-header {
  display: grid;
  grid-template-columns: 118px minmax(260px, 1fr) auto;
  align-items: start;
  gap: 18px;
  min-height: 128px;
}

.ms-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 104px;
  height: 41px;
  margin-top: 4px;
  color: #f1f6ff;
  background: linear-gradient(135deg, rgba(17, 33, 63, .9), rgba(8, 15, 34, .7));
  border: 1px solid rgba(152, 184, 239, .64);
  clip-path: polygon(0 0, 88% 0, 100% 22%, 100% 100%, 12% 100%, 0 78%);
  font: 600 14px/1 ui-monospace, "MiSans", monospace;
  letter-spacing: .17em;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, transform .18s;
}

.ms-back:hover,
.ms-back:focus-visible { color: #fff; border-color: #8fd6ff; background: rgba(45, 103, 176, .36); }
.ms-back:active { transform: translateY(1px); }
.ms-back:focus-visible { outline: 1px solid #8fd6ff; outline-offset: 3px; }
.ms-back-arrow { color: #dcecff; font-size: 12px; }

.ms-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ms-kicker,
.ms-instruction { color: #8b9bbb; font-size: 10px; letter-spacing: .18em; }
.ms-heading h2 { color: #f0f5ff; font-size: clamp(23px, 2vw, 34px); font-weight: 500; letter-spacing: .2em; line-height: 1.05; text-shadow: 0 0 14px rgba(179, 213, 255, .4); }
.ms-command-meta { display: grid; gap: 16px; padding-top: 5px; color: #8f9db7; font-size: 10px; letter-spacing: .08em; text-align: right; white-space: nowrap; }
.ms-command-meta b { color: #c3cce0; font-weight: 500; }
.ms-command-meta i { color: #60789f; font-style: normal; }

.ms-main { min-height: 0; display: flex; align-items: stretch; justify-content: center; }
.ms-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 34px); width: min(100%, 78vw); height: 100%; min-height: 0; }

.ms-card {
  --ms-accent: #9b55ff;
  --ms-accent-soft: rgba(155, 85, 255, .23);
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 14px 26px 25px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  color: #a8b9d6;
  background: linear-gradient(180deg, rgba(9, 18, 39, .76), rgba(3, 10, 24, .9));
  border: 1px solid rgba(130, 160, 211, .36);
  border-radius: 0;
  clip-path: polygon(0 0, 96% 0, 100% 4%, 100% 96%, 96% 100%, 4% 100%, 0 96%);
  box-shadow: inset 0 0 34px rgba(33, 80, 142, .08), 0 0 14px rgba(18, 50, 104, .1);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}

.ms-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(109, 161, 224, .045) 3px 4px);
}

.ms-card--violet { --ms-accent: #a55bff; --ms-accent-soft: rgba(165, 91, 255, .22); }
.ms-card--cyan { --ms-accent: #21d9ff; --ms-accent-soft: rgba(33, 217, 255, .21); }
.ms-card--red { --ms-accent: #ff4153; --ms-accent-soft: rgba(255, 65, 83, .21); }
.ms-card:hover { transform: translateY(-3px); border-color: var(--ms-accent); box-shadow: 0 0 18px var(--ms-accent-soft), inset 0 0 40px var(--ms-accent-soft); }
.ms-card:focus-visible { outline: 1px solid var(--ms-accent); outline-offset: 4px; }
.ms-card.is-selected { border-color: var(--ms-accent); box-shadow: 0 0 25px var(--ms-accent-soft), inset 0 0 48px var(--ms-accent-soft); }
.ms-card.is-selected::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--ms-accent); clip-path: polygon(0 0, 96% 0, 100% 4%, 100% 96%, 96% 100%, 4% 100%, 0 96%); opacity: .88; }

.ms-card-corner { position: absolute; width: 14px; height: 14px; border-color: var(--ms-accent); border-style: solid; z-index: 2; }
.ms-card-corner--tl { left: 13px; top: 13px; border-width: 2px 0 0 2px; }
.ms-card-corner--br { right: 13px; bottom: 13px; border-width: 0 2px 2px 0; }
.ms-card-topline { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; min-height: 18px; color: var(--ms-accent); font-size: 10px; letter-spacing: .18em; }
.ms-card-marker { margin-left: 10px; }
.ms-card-signal { width: 3px; height: 3px; margin-right: 8px; background: var(--ms-accent); box-shadow: 11px 0 var(--ms-accent), 22px 0 var(--ms-accent); }
.ms-orbit-icon { position: relative; z-index: 1; display: grid; place-items: center; height: 145px; color: var(--ms-accent); }
.ms-orbit-icon::before { content: ''; position: absolute; width: 100px; height: 100px; border: 1px solid var(--ms-accent); border-radius: 50%; background: radial-gradient(circle at 35% 25%, rgba(148, 224, 255, .32), var(--ms-accent-soft) 48%, rgba(0, 0, 0, .22) 70%); box-shadow: 0 0 28px var(--ms-accent-soft), inset -14px -8px 28px rgba(0, 0, 0, .42); }
.ms-orbit-icon::after { content: ''; position: absolute; width: 170px; height: 50px; border: 1px solid var(--ms-accent); border-radius: 50%; transform: rotate(-16deg); opacity: .65; }
.ms-orbit-icon svg { position: relative; z-index: 1; width: 72px; height: 72px; stroke: currentColor; stroke-width: 1.35; filter: drop-shadow(0 0 7px currentColor); }
.ms-sector-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 26px; color: var(--ms-accent); font-size: 12px; letter-spacing: .12em; }
.ms-sector-row b { font-weight: 600; }
.ms-sector-row em { padding: 3px 9px; border: 1px solid var(--ms-accent); color: var(--ms-accent); font-size: 9px; font-style: normal; letter-spacing: .14em; }
.ms-diamonds { margin-left: auto; color: var(--ms-accent); font-size: 15px; letter-spacing: .04em; }
.ms-name { position: relative; z-index: 1; margin-top: 4px; color: #edf4ff; font: 600 clamp(18px, 1.35vw, 25px)/1.1 ui-monospace, "MiSans", monospace; letter-spacing: .13em; text-align: center; text-shadow: 0 0 12px var(--ms-accent-soft); white-space: nowrap; }
.ms-subname { position: relative; z-index: 1; margin-top: 5px; color: var(--ms-accent); font: 600 14px/1.1 "MiSans", "Segoe UI", sans-serif; letter-spacing: .2em; text-align: center; text-shadow: 0 0 10px var(--ms-accent-soft); }
.ms-desc { position: relative; z-index: 1; margin-top: 10px; color: #9eaecb; font-size: 10px; letter-spacing: .13em; text-align: center; }
.ms-region { position: relative; z-index: 1; margin: 15px 0 14px; color: #7e8eac; font-size: 10px; letter-spacing: .14em; text-align: center; }
.ms-threat-head { position: relative; z-index: 1; display: flex; justify-content: space-between; color: #aab8d2; font-size: 10px; letter-spacing: .08em; }
.ms-threat-head b { color: #aebbd5; font-weight: 400; }
.ms-threat-bar { position: relative; z-index: 1; display: block; height: 7px; margin: 8px 0 17px; background: rgba(84, 107, 145, .22); }
.ms-threat-bar i { display: block; height: 100%; background: var(--ms-accent); box-shadow: 0 0 9px var(--ms-accent); }
.ms-data-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 13px 0 15px; border-top: 1px solid rgba(130, 160, 211, .18); border-bottom: 1px solid rgba(130, 160, 211, .18); }
.ms-data-grid > span { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; column-gap: 5px; }
.ms-data-icon { grid-row: span 2; color: var(--ms-accent); font-size: 16px; font-weight: 400; }
.ms-data-grid small { overflow: hidden; color: #7888a5; font-size: 8px; letter-spacing: .06em; white-space: nowrap; }
.ms-data-grid strong { overflow: hidden; color: #d3dded; font-size: 8px; font-weight: 500; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.ms-objectives-head { position: relative; z-index: 1; display: flex; justify-content: space-between; margin: 13px 0 5px; color: #9aaacc; font-size: 11px; letter-spacing: .13em; }
.ms-objectives-count { color: #bac8df; font-weight: 400; }
.ms-objectives { position: relative; z-index: 1; min-height: 94px; color: #8d9fbe; font-size: 10px; line-height: 1.8; letter-spacing: .04em; }
.ms-card--red .ms-objectives { line-height: 1.45; }
.ms-objectives ul { list-style: none; }
.ms-objectives li::before { content: '·'; margin-right: 9px; color: var(--ms-accent); }
.ms-progress { position: absolute; left: 24px; bottom: 88px; z-index: 1; color: var(--ms-accent); font-size: 17px; letter-spacing: .08em; opacity: .85; }
.ms-deploy { position: absolute; left: 25px; right: 25px; bottom: 24px; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 19px; min-height: 57px; color: #f3f5ff; background: var(--ms-accent-soft); border: 1px solid var(--ms-accent); clip-path: polygon(0 0, 97% 0, 100% 18%, 100% 100%, 3% 100%, 0 80%); box-shadow: inset 0 0 18px var(--ms-accent-soft); }
.ms-deploy b { font-size: 16px; letter-spacing: .15em; }
.ms-deploy small { color: #bac6df; font-size: 10px; letter-spacing: .17em; }

.ms-footer { display: flex; align-items: end; justify-content: space-between; gap: 24px; min-height: 158px; padding-top: 30px; }
/* v2.3.3 批次E11：页脚中部补一条协议色带 —— 此前 1920 下左右实、中间 ~700px 空洞 */
.ms-footer-line { flex: 1; height: 1px; margin-bottom: 39px; background: linear-gradient(90deg, rgba(116, 151, 207, .34), rgba(116, 151, 207, .1)); position: relative; }
.ms-footer-line::after { content: ''; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; background: #21d9ff; box-shadow: 0 0 8px rgba(33, 217, 255, .8); }
.ms-footer-left { display: flex; gap: 15px; }
.ms-status-panel { position: relative; width: 250px; min-height: 92px; padding: 13px 14px 11px; display: flex; flex-direction: column; gap: 6px; color: #8c9dba; background: rgba(7, 15, 32, .64); border: 1px solid rgba(116, 151, 207, .32); clip-path: polygon(0 0, 94% 0, 100% 12%, 100% 88%, 94% 100%, 6% 100%, 0 88%); font-size: 9px; letter-spacing: .08em; }
.ms-panel-title { color: #8d9fbe; font-size: 10px; letter-spacing: .14em; }
.ms-fleet-ship { position: absolute; left: 45px; right: 30px; top: 33px; height: 29px; opacity: .72; }
.ms-fleet-ship::before { content: ''; position: absolute; left: 10%; right: 6%; top: 50%; height: 1px; background: #2587ff; box-shadow: 0 -9px 0 rgba(37, 135, 255, .45), 0 9px 0 rgba(37, 135, 255, .35); transform: rotate(-4deg); }
.ms-fleet-ship span { position: absolute; left: 18%; top: 8px; width: 58%; height: 15px; border: 1px solid #2074ea; border-radius: 50% 54% 45% 44%; transform: skewX(-22deg); box-shadow: 0 0 13px rgba(32, 116, 234, .42), inset 0 0 10px rgba(32, 116, 234, .28); }
.ms-fleet-ship i,.ms-fleet-ship b { position: absolute; top: 2px; width: 11px; height: 26px; border: 1px solid #2074ea; transform: skewX(-22deg); }
.ms-fleet-ship i { left: 42%; } .ms-fleet-ship b { right: 24%; }
.ms-readiness { position: absolute; left: 14px; right: 14px; bottom: 10px; display: grid; gap: 5px; color: #8d9fbe; }
.ms-readiness b { color: #21d9ff; font-weight: 500; }
.ms-readiness > i { display: block; height: 5px; background: rgba(102, 127, 168, .2); }
.ms-readiness > i b { display: block; width: 70%; height: 100%; background: linear-gradient(90deg, #2855e8, #21d9ff); box-shadow: 0 0 6px #21d9ff; }
.ms-support { width: 190px; justify-content: center; }
.ms-support > span:not(.ms-panel-title) { display: flex; justify-content: space-between; color: #8798b8; font-size: 9px; white-space: nowrap; }
.ms-support > span b { color: #d9e5f8; font-weight: 400; }
.ms-confirm { min-width: min(370px, 34vw); min-height: 78px; padding: 12px 30px; display: flex; align-items: center; justify-content: flex-start; gap: 20px; color: #eff4ff; background: linear-gradient(135deg, rgba(97, 65, 159, .54), rgba(41, 46, 93, .58)); border: 1px solid #b99cf4; clip-path: polygon(0 0, 96% 0, 100% 18%, 100% 100%, 4% 100%, 0 80%); box-shadow: 0 0 18px rgba(150, 113, 242, .18), inset 0 0 20px rgba(180, 149, 255, .16); cursor: pointer; text-align: left; transition: transform .18s, box-shadow .18s, background .18s; }
.ms-confirm:hover,.ms-confirm:focus-visible { background: linear-gradient(135deg, rgba(132, 87, 204, .7), rgba(51, 59, 130, .7)); box-shadow: 0 0 28px rgba(174, 135, 255, .35), inset 0 0 20px rgba(180, 149, 255, .18); }
.ms-confirm:focus-visible { outline: 1px solid #e0ceff; outline-offset: 4px; }
.ms-confirm:active { transform: translateY(1px); }
.ms-confirm-icon { font-size: 35px; color: #f4edff; text-shadow: 0 0 9px #cdb5ff; }
.ms-confirm span:last-child { display: grid; gap: 8px; }
.ms-confirm b { font-size: 16px; letter-spacing: .14em; }
.ms-confirm small { color: #b9add2; font-size: 9px; letter-spacing: .13em; }
.ms-confirm-mode { color: #e5d6ff; font-weight: 500; }

/* ================================================================
   完整结算界面（resultUI.js）——全息结果终端
   ================================================================ */
.rs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(18px, 3vw, 42px);
  --rs-color: #4ca7ff;
  --rs-bright: #b9e9ff;
  --rs-border: rgba(76, 167, 255, .42);
  --rs-soft: rgba(76, 167, 255, .12);
  --rs-panel: rgba(5, 13, 31, .84);
  --rs-shadow: rgba(76, 167, 255, .22);
}

.rs-wrap.is-fail {
  --rs-color: #ff526c;
  --rs-bright: #ffd0d9;
  --rs-border: rgba(255, 82, 108, .52);
  --rs-soft: rgba(255, 54, 82, .13);
  --rs-panel: rgba(32, 7, 21, .88);
  --rs-shadow: rgba(255, 42, 77, .28);
}

.rs-wrap.is-win {
  --rs-color: #4ca7ff;
  --rs-bright: #d5f3ff;
  --rs-border: rgba(76, 167, 255, .48);
  --rs-soft: rgba(39, 139, 255, .14);
  --rs-panel: rgba(4, 15, 39, .88);
  --rs-shadow: rgba(38, 142, 255, .26);
}

.rs-wrap::before,
.rs-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

.rs-wrap::before {
  opacity: .52;
  background-image:
    linear-gradient(rgba(116, 177, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 177, 255, .08) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, var(--rs-soft), transparent 52%);
  background-size: 42px 42px, 42px 42px, auto;
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.rs-wrap::after {
  opacity: .22;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(238, 244, 255, .08) 4px, transparent 5px);
  mix-blend-mode: screen;
  animation: rsScan 7s linear infinite;
}

@keyframes rsScan { from { background-position-y: 0; } to { background-position-y: 120px; } }

.rs-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.rs-backdrop::before,
.rs-backdrop::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid var(--rs-border);
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: .24;
}

.rs-backdrop::before { width: min(74vw, 1040px); height: min(74vw, 1040px); }
.rs-backdrop::after { width: min(54vw, 760px); height: min(54vw, 760px); opacity: .16; }
.rs-backdrop i { position: absolute; display: block; height: 1px; width: 20vw; background: linear-gradient(90deg, transparent, var(--rs-color), transparent); opacity: .42; }
.rs-backdrop i:nth-child(1) { top: 18%; left: 0; }
.rs-backdrop i:nth-child(2) { top: 72%; right: 0; transform: rotate(180deg); }
.rs-backdrop i:nth-child(3) { top: 38%; right: 10%; width: 10vw; transform: rotate(90deg); opacity: .2; }

.rs-panel.rs-shell {
  position: relative;
  width: min(1240px, calc(100vw - 48px));
  min-height: min(720px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  padding: clamp(24px, 3vw, 42px) clamp(26px, 4vw, 62px) 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
  border: 1px solid var(--rs-border);
  border-radius: 0;
  background: linear-gradient(135deg, rgba(5, 11, 28, .94), var(--rs-panel) 48%, rgba(4, 9, 22, .94));
  box-shadow: 0 0 0 1px rgba(238, 244, 255, .04) inset, 0 0 64px var(--rs-shadow), 0 24px 90px rgba(0, 0, 0, .42);
}

.rs-panel.rs-shell::before,
.rs-panel.rs-shell::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.rs-panel.rs-shell::before {
  inset: 10px;
  border: 1px solid color-mix(in srgb, var(--rs-color) 23%, transparent);
  clip-path: polygon(0 0, 78px 0, 78px 1px, calc(100% - 78px) 1px, calc(100% - 78px) 0, 100% 0, 100% 100%, calc(100% - 78px) 100%, calc(100% - 78px) calc(100% - 1px), 78px calc(100% - 1px), 78px 100%, 0 100%);
}

.rs-panel.rs-shell::after {
  top: 0;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rs-bright), transparent);
  box-shadow: 0 0 16px var(--rs-color);
}

.rs-telemetry {
  position: absolute;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: color-mix(in srgb, var(--rs-bright) 62%, transparent);
  font: 9px/1.1 ui-monospace, Consolas, "MiSans", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rs-telemetry b { color: var(--rs-bright); font-weight: 500; }
.rs-telemetry-a { left: 20px; align-items: flex-start; }
.rs-telemetry-b { right: 20px; align-items: flex-end; text-align: right; }

.rs-header { display: grid; gap: 14px; position: relative; }
.rs-status-line { display: flex; align-items: center; gap: 8px; color: var(--rs-bright); font: 10px/1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .18em; }
.rs-status-line em { display: block; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rs-border), transparent); }
.rs-status-line small { color: color-mix(in srgb, var(--rs-bright) 62%, transparent); font: inherit; font-size: 9px; }
.rs-status-led { width: 7px; height: 7px; display: block; border: 1px solid var(--rs-color); background: var(--rs-color); box-shadow: 0 0 12px var(--rs-color); animation: rsStatusPulse 1.2s ease-in-out infinite; }
@keyframes rsStatusPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; box-shadow: 0 0 18px var(--rs-color); } }
.rs-title-row { display: flex; align-items: center; gap: 18px; }
.rs-icon { display: grid; place-items: center; width: 70px; height: 70px; flex: 0 0 70px; color: var(--rs-color); border: 1px solid var(--rs-border); background: var(--rs-soft); box-shadow: 0 0 24px var(--rs-shadow), inset 0 0 18px var(--rs-soft); clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
.rs-icon svg { width: 52px; height: 52px; }
.rs-title-copy { display: grid; gap: 9px; min-width: 0; }
.rs-title { color: var(--rs-bright); font: 700 clamp(28px, 4vw, 52px)/.98 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .1em; text-shadow: 0 0 20px var(--rs-shadow); }
.rs-title-copy small { color: color-mix(in srgb, var(--rs-bright) 68%, transparent); font-size: 12px; letter-spacing: .14em; }
.rs-header-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-left: 88px; color: color-mix(in srgb, var(--rs-bright) 58%, transparent); font: 10px/1.2 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; text-transform: uppercase; }
.rs-header-meta span { display: inline-flex; align-items: center; gap: 7px; }
.rs-header-meta span::before { content: ''; width: 4px; height: 4px; background: var(--rs-color); box-shadow: 0 0 8px var(--rs-color); }

.rs-grid { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.55fr); gap: 18px; }
.rs-summary-panel, .rs-terminal { min-height: 0; border: 1px solid color-mix(in srgb, var(--rs-color) 32%, transparent); background: rgba(3, 9, 24, .56); }
.rs-summary-panel { display: flex; flex-direction: column; padding: 18px; gap: 14px; }
.rs-panel-label { display: flex; align-items: center; gap: 9px; color: var(--rs-bright); font: 10px/1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .16em; }
.rs-panel-label i { height: 1px; flex: 1; background: linear-gradient(90deg, var(--rs-border), transparent); }
.rs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rs-row { display: grid; gap: 5px; padding: 9px 10px; border-left: 2px solid color-mix(in srgb, var(--rs-color) 45%, transparent); background: linear-gradient(90deg, var(--rs-soft), transparent); }
.rs-k { color: color-mix(in srgb, var(--rs-bright) 62%, transparent); font: 9px/1.1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; }
.rs-v { color: var(--white); font: 600 15px/1.1 ui-monospace, Consolas, "MiSans", monospace; }
.rs-reward-block { margin-top: auto; padding: 13px 0 10px; border-top: 1px solid color-mix(in srgb, var(--rs-color) 28%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--rs-color) 18%, transparent); }
.rs-gain { text-align: left; }
.rs-gain-label { color: color-mix(in srgb, var(--rs-bright) 64%, transparent); font: 10px/1.2 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; }
.rs-gain-num { margin-top: 7px; color: var(--rs-bright); font: 700 clamp(28px, 3.6vw, 42px)/1 ui-monospace, Consolas, "MiSans", monospace; text-shadow: 0 0 18px var(--rs-shadow); font-variant-numeric: tabular-nums; }
.rs-items { display: grid; gap: 5px; max-height: 76px; overflow: hidden; color: color-mix(in srgb, var(--rs-bright) 66%, transparent); font: 10px/1.3 ui-monospace, Consolas, "MiSans", monospace; }
.rs-item { display: flex; justify-content: space-between; gap: 12px; }
.rs-item .v-gold { color: var(--rs-bright); }
.rs-achv { margin: 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--rs-color) 45%, transparent); border-radius: 0; background: var(--rs-soft); }
.rs-achv-title { color: var(--rs-bright); font: 10px/1.2 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; margin-bottom: 5px; }
.rs-achv-item { display: flex; justify-content: space-between; gap: 8px; color: var(--white); font-size: 11px; padding: 2px 0; }
.rs-achv-item .rs-achv-name, .rs-achv-item .v-gold { color: var(--rs-bright); }

.rs-terminal { display: flex; flex-direction: column; overflow: hidden; }
.rs-terminal-head, .rs-terminal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; color: color-mix(in srgb, var(--rs-bright) 65%, transparent); font: 10px/1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; }
.rs-terminal-head { border-bottom: 1px solid color-mix(in srgb, var(--rs-color) 28%, transparent); }
.rs-terminal-head > span:last-child { display: inline-flex; align-items: center; gap: 7px; color: var(--rs-color); }
.rs-terminal-head i { width: 5px; height: 5px; background: currentColor; box-shadow: 0 0 9px currentColor; }
.rs-terminal-head b { font-weight: 500; }
.rs-terminal-viewport { position: relative; flex: 1; min-height: 250px; overflow: hidden; padding: 12px 14px; background: linear-gradient(180deg, rgba(4, 13, 29, .65), rgba(1, 5, 17, .92)); }
.rs-terminal-viewport::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 21px, color-mix(in srgb, var(--rs-color) 9%, transparent) 22px, transparent 23px); }
.rs-log-track { position: relative; display: grid; gap: 9px; animation: rsLogScroll 17s linear infinite; }
@keyframes rsLogScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.rs-log-line { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; color: rgba(208, 224, 250, .7); font: 11px/1.2 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .03em; white-space: nowrap; }
.rs-log-line > span { color: color-mix(in srgb, var(--rs-bright) 40%, transparent); }
.rs-log-line b { overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.rs-log-info b { color: #8fd6ff; }
.rs-log-ok b { color: #7ee8c8; }
.rs-log-link b { color: #c6a2ff; }
.rs-log-sync b { color: #ffd27a; }
.rs-log-complete b { color: #eef4ff; text-shadow: 0 0 10px rgba(143, 214, 255, .65); }
.rs-log-error b { color: #ff8b9e; }
.rs-log-critical b { color: #ff526c; text-shadow: 0 0 10px rgba(255, 82, 108, .32); }
.rs-log-warn b { color: #ffc477; }
.rs-terminal-foot { border-top: 1px solid color-mix(in srgb, var(--rs-color) 22%, transparent); font-size: 9px; }

.rs-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; }
.rs-actions .btn { min-width: 150px; min-height: 42px; padding: 0 18px; border: 1px solid var(--rs-border); border-radius: 0; color: var(--rs-bright); background: linear-gradient(90deg, var(--rs-soft), rgba(4, 10, 27, .5)); box-shadow: 0 0 14px transparent; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); font: 600 11px/1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; }
.rs-actions .btn:hover, .rs-actions .btn:focus-visible { color: #fff; border-color: var(--rs-bright); background: var(--rs-soft); box-shadow: 0 0 18px var(--rs-shadow); }
.rs-footer { display: flex; justify-content: space-between; gap: 12px; color: color-mix(in srgb, var(--rs-bright) 42%, transparent); font: 8px/1.1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .15em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .rs-wrap::after, .rs-status-led, .rs-log-track { animation: none; }
}

/* ================================================================
   商店（shopUI.js）
   ================================================================ */
.sh-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px;
}

.sh-tabs {
  display: flex;
  gap: 10px;
}

.sh-tab {
  font: inherit;
  font-size: 15px;
  letter-spacing: .15em;
  padding: 9px 26px;
  color: var(--accent2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}

.sh-tab:hover { background: rgba(76, 167, 255, .1); }
.sh-tab.on { border-color: var(--accent); background: rgba(76, 167, 255, .16); color: var(--white); }

.sh-body {
  width: min(640px, 94vw);
  max-width: 92vw;
  max-height: 62vh;
  overflow: hidden;                /* 第17轮：原生滚动 → Canvas 自绘 */
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}
.sh-body-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  width: 100%;
}

.sh-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.sh-row:hover { background: rgba(76, 167, 255, .06); }

.sh-icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent2);
}

.sh-icon svg { width: 30px; height: 30px; }

.sh-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-name { font-size: 14px; letter-spacing: .06em; color: var(--white); }
.sh-desc { font-size: 11px; opacity: .65; }
.sh-levels { display: flex; gap: 5px; margin-top: 2px; }
.sh-dot { width: 14px; height: 5px; border-radius: 3px; background: rgba(120, 180, 255, .18); }
.sh-dot.on { background: var(--accent); box-shadow: 0 0 6px rgba(76, 167, 255, .6); }

.sh-buy { min-width: 96px; }
.sh-buy.poor { color: var(--danger); border-color: rgba(255, 107, 107, .5); }
.sh-buy.owned { opacity: .6; }
.sh-buy.maxed { opacity: .6; }
.sh-buy:disabled { cursor: not-allowed; }

.sh-group { margin-bottom: 6px; }
.sh-group-title {
  font-size: 13px;
  letter-spacing: .2em;
  margin: 8px 0 6px;
  padding-left: 8px;
  border-left: 3px solid currentColor;
}

.sh-wgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 4px;
}

.sh-wcard {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(8, 14, 28, .6);
}

.sh-whead { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sh-wname { font-size: 13px; letter-spacing: .05em; }
.sh-wq { font-size: 10px; }
.sh-wstats { font-size: 11px; opacity: .7; }
.sh-wdesc { font-size: 10px; opacity: .55; line-height: 1.5; }

.sh-toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
}

/* ================================================================
   图鉴（codexUI.js）
   ================================================================ */
.cd-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px;
}

.cd-tabs { display: flex; gap: 10px; }

.cd-tab {
  font: inherit;
  font-size: 15px;
  letter-spacing: .15em;
  padding: 9px 26px;
  color: var(--accent2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}

.cd-tab:hover { background: rgba(76, 167, 255, .1); }
.cd-tab.on { border-color: var(--accent); background: rgba(76, 167, 255, .16); color: var(--white); }

.cd-body {
  width: min(780px, 94vw);
  max-width: 94vw;
  max-height: 62vh;
  overflow: hidden;                /* 第17轮：原生滚动 → Canvas 自绘 */
  padding: 16px;
}
.cd-body-content {
  flex: 0 0 auto;
  width: 100%;
}

.cd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.cd-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: rgba(8, 14, 28, .6);
}

.cd-card.locked { opacity: .55; }

.cd-portrait { margin-bottom: 2px; }

.cd-cname { font-size: 14px; font-weight: 600; letter-spacing: .1em; }
.cd-text { font-size: 11px; line-height: 1.6; opacity: .85; }
.cd-text.dim { opacity: .55; }
.cd-skill-ic { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.cd-tip {
  font-size: 11px;
  line-height: 1.6;
  color: var(--accent2);
  border-top: 1px dashed var(--line);
  padding-top: 6px;
  margin-top: 4px;
  opacity: .9;
}

.cd-particle { display: flex; justify-content: center; }

.cd-wname { font-size: 14px; font-weight: 600; letter-spacing: .05em; }
.cd-wq { font-size: 10px; opacity: .8; }

/* ================================================================
   设置（settingsUI.js）
   ================================================================ */
.st-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px;
}

.st-body {
  width: min(560px, 94vw);
  max-width: 92vw;
  max-height: 66vh;
  overflow: hidden;                /* 第17轮：原生滚动 → Canvas 自绘 */
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
}
.st-body-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
  width: 100%;
}

.st-section {
  font-size: 13px;
  letter-spacing: .25em;
  color: var(--accent2);
  margin: 12px 0 4px;
  padding-left: 8px;
  border-left: 3px solid var(--accent);
}

.st-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 4px;
}

.st-row.danger { margin-top: 6px; }

.st-label { width: 120px; font-size: 14px; color: var(--white); }

.st-range {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(120, 180, 255, .25);
  outline: none;
}

.st-range:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 5px;
  box-shadow: 0 0 12px rgba(76, 167, 255, .45);
}

.st-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-deep);
  box-shadow: 0 0 8px rgba(76, 167, 255, .6);
  cursor: pointer;
}

.st-val {
  width: 34px;
  text-align: right;
  font-size: 13px;
  color: var(--accent2);
  font-variant-numeric: tabular-nums;
}

.st-select {
  font: inherit;
  font-size: 13px;
  color: var(--white);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 12px;
}

.st-select:focus-visible,
.st-toggle:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 3px;
}

.st-hint { font-size: 11px; opacity: .55; flex-basis: 100%; }

.st-toggle {
  width: 96px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #765db0;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color .15s, filter .15s;
}

.st-toggle svg { display: block; width: 96px; height: 34px; overflow: visible; }
.st-toggle-track {
  fill: rgba(20, 14, 43, .96);
  stroke: rgba(126, 95, 190, .82);
  stroke-width: 1.5;
  transition: fill .16s, stroke .16s;
}
.st-toggle-thumb {
  fill: rgba(79, 53, 143, .94);
  stroke: currentColor;
  stroke-width: 1.5;
  transition: fill .16s, stroke .16s, x .16s ease;
}
.st-toggle:hover, .st-toggle:focus-visible { color: #c9b2ff; filter: brightness(1.12); }
.st-toggle.on { color: #e2d4ff; }
.st-toggle.on .st-toggle-track {
  fill: rgba(89, 53, 165, .98);
  stroke: rgba(205, 181, 255, .98);
}
.st-toggle.on .st-toggle-thumb {
  fill: #b58cff;
  stroke: #f4eeff;
}

.btn.danger {
  color: var(--danger);
  border-color: rgba(255, 107, 107, .55);
}

.btn.danger:hover {
  background: rgba(255, 107, 107, .15);
  color: var(--danger);
}

.st-reset-input {
  width: 100%;
  margin: 8px 0 18px;
  font: inherit;
  font-size: 16px;
  text-align: center;
  letter-spacing: .4em;
  color: var(--white);
  background: rgba(6, 10, 20, .7);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px;
  outline: none;
}

.st-reset-input:focus { border-color: var(--danger); }

/* ================================================================
   帮助（helpUI.js）
   ================================================================ */
.hp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px;
}

.hp-body {
  width: min(720px, 94vw);
  max-width: 94vw;
  max-height: 66vh;
  overflow: hidden;                /* 第17轮：原生滚动 → Canvas 自绘 */
  padding: 18px 26px;
  display: flex;
  flex-direction: column;
}
.hp-body-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 0 0 auto;
  width: 100%;
}

.hp-title {
  font-size: 16px;
  letter-spacing: .3em;
  color: var(--accent2);
  margin-bottom: 10px;
  text-shadow: 0 0 12px rgba(76, 167, 255, .35);
}

.hp-content { display: flex; flex-direction: column; gap: 8px; }

.hp-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }

.hp-key {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  border-bottom: 1px dashed rgba(120, 180, 255, .15);
  padding-bottom: 4px;
}

.hp-k { color: var(--gold); font-weight: 600; white-space: nowrap; }
.hp-v { color: var(--white); text-align: right; }

.hp-p { font-size: 13px; line-height: 1.8; color: var(--white); opacity: .9; }
.hp-p b { color: var(--accent2); }

.hp-particles { display: flex; flex-direction: column; gap: 10px; }

.hp-particle {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hp-ptext { font-size: 12px; line-height: 1.6; color: var(--white); opacity: .9; }
.hp-ptext b { letter-spacing: .05em; }

/* ---------- 测试通道（自动化验收用，不可见） ---------- */
.battle-cmd {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  z-index: 9999;          /* 顶层：避免被 app/canvas 覆盖影响自动化输入 */
  pointer-events: auto;   /* 测试通道需可聚焦（IAB fill 要求 actionability） */
}

.battle-state { display: none; }

/* ================================================================
   游戏运行态自绘鼠标（2×视觉尺寸）
   控制由 js/ui/gameCursor.js 负责；视觉占位与最终 SVG/PNG 入口由
   js/ui/gameCursorStyle.js 负责。只在 html.sf-game-cursor-active 时生效。
   指针层不接收事件，下面的按钮、Canvas、HUD 和弹窗仍是实际命中目标。
   ================================================================ */
.game-cursor-layer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;                /* 高于游戏 UI，低于测试通道与旋转引导 */
  overflow: hidden;
  pointer-events: none;
  contain: layout style paint;
}

@keyframes skillOrbit {
  to { transform: rotate(360deg); }
}
@keyframes skillOrbitNode {
  50% { opacity: .42; transform: scale(.68); }
}
@keyframes skillGlyphSpin {
  50% { opacity: .36; transform: rotate(180deg) scale(.94); }
}
@keyframes skillGlyphPulse {
  0%, 100% { opacity: .22; transform: scale(.82); }
  50% { opacity: .86; transform: scale(1.04); }
}
@keyframes skillCorePulse {
  0%, 100% { opacity: .44; transform: scale(.72); }
  50% { opacity: 1; transform: scale(1.35); }
}
@keyframes skillVectorFlow {
  0%, 100% { opacity: .28; transform: translateX(-1.2px); }
  50% { opacity: .94; transform: translateX(1.5px); }
}
@keyframes skillScanSweep {
  0%, 100% { opacity: .2; transform: translateY(-1.5px); }
  50% { opacity: .9; transform: translateY(1.5px); }
}
@keyframes skillImpactFlicker {
  0%, 100% { opacity: .3; transform: scale(.9); }
  45% { opacity: 1; transform: scale(1.06); }
}
@keyframes skillHealOrbit {
  to { transform: rotate(-360deg); }
}
@keyframes skillSlotCast {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes skillCastRing {
  0% { opacity: .9; transform: scale(.78); }
  100% { opacity: 0; transform: scale(1.3); }
}
@keyframes skillCastGlyph {
  0% { transform: scale(.72); opacity: .45; }
  45% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .skill-icon svg[data-skill-icon] .skill-motion,
  .buff-ico svg[data-skill-icon],
  .skill-slot.is-casting,
  .skill-slot.is-casting::after,
  .skill-slot.is-casting .skill-motion-layer { animation: none !important; }
}

.game-cursor-layer.is-visible { display: block; }

.game-cursor-visual {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--game-cursor-size, 64px);
  height: var(--game-cursor-size, 64px);
  pointer-events: none;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0);
}

/* TODO: CUSTOM_CURSOR_STYLE：只负责三层断边三角锁定框的视觉。
   后续替换 SVG/PNG 资源时保留 game-cursor-visual 的尺寸、热点和 transform 接口。 */
.game-cursor-lock-frame {
  color: rgb(96, 111, 234);
  filter: drop-shadow(0 0 10px rgba(96, 111, 234, .62));
}

.game-cursor-triangle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

.game-cursor-triangle path { vector-effect: non-scaling-stroke; }

.game-cursor-triangle-outer {
  stroke-width: 2.9;
  opacity: .92;
  animation: game-cursor-rotate-outer 5.8s linear infinite;
}

.game-cursor-triangle-middle {
  stroke-width: 2.5;
  opacity: .72;
  transform: scale(.78);
  animation: game-cursor-rotate-middle 4.1s linear infinite;
}

.game-cursor-triangle-inner {
  stroke-width: 2.2;
  opacity: .9;
  transform: scale(.56);
  animation: game-cursor-rotate-inner 2.8s linear infinite;
}

@keyframes game-cursor-rotate-outer {
  to { transform: rotate(360deg); }
}

@keyframes game-cursor-rotate-middle {
  to { transform: scale(.78) rotate(-360deg); }
}

@keyframes game-cursor-rotate-inner {
  to { transform: scale(.56) rotate(360deg); }
}

/* 状态先共用同一视觉；数据状态接口保留给后续资源/样式扩展。 */
.game-cursor-visual[data-cursor-state="default"],
.game-cursor-visual[data-cursor-state="hover"],
.game-cursor-visual[data-cursor-state="pressed"],
.game-cursor-visual[data-cursor-state="dragging"],
.game-cursor-visual[data-cursor-state="disabled"] { opacity: 1; }

/* 自绘鼠标覆盖的游戏屏幕中始终隐藏网页指针；失焦/触摸/离窗会移除该类。
   战斗态即使自绘光标暂未命中白名单，也不能露出系统箭头。 */
html.sf-game-cursor-active,
html.sf-game-cursor-active body,
html.sf-game-cursor-active body * {
  cursor: none !important;
}

html.sf-battle-active,
html.sf-battle-active body,
html.sf-battle-active body * {
  cursor: none !important;
}

/* ================================================================
   第8轮：局内菜单按钮 + 暂停面板 + 武器图标
   ================================================================ */

/* ---------- 战斗顶部暂停图标 ---------- */
.hud-menubtn {
  position: absolute;
  /* 目标信息右侧红框：与左侧 OBJECTIVE 的第二行对齐，避免压住标题。 */
  top: calc(47px + var(--sa-t));
  left: calc(353px + var(--sa-l));
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  font: inherit;
  color: #83d7ff;
  background: linear-gradient(145deg, rgba(8, 32, 57, .8), rgba(7, 15, 35, .48));
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(102, 194, 255, .72);
  border-radius: 0;
  clip-path: polygon(0 9px, 9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px));
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(60, 181, 255, .18));
  transition: background .15s, border-color .15s, color .15s, filter .15s, transform .15s;
}

.hud-menubtn:hover {
  background: linear-gradient(145deg, rgba(17, 69, 104, .9), rgba(11, 25, 56, .7));
  border-color: #b4edff;
  color: #eaffff;
  filter: drop-shadow(0 0 16px rgba(60, 181, 255, .45));
}

.hud-menubtn:active {
  transform: translateY(1px);
}

.hud-menubtn:focus-visible {
  outline: 1px solid #d8f7ff;
  outline-offset: 4px;
}

.hud-menubtn::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(116, 205, 255, .2);
  clip-path: polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px));
  pointer-events: none;
}

.hud-menubtn-icon {
  position: relative;
  z-index: 1;
  display: block;
  filter: drop-shadow(0 0 7px rgba(116, 220, 255, .55));
}

/* 移动端保留 44px 级别的透明手指热区；热区跟随按钮，不覆盖摇杆或画布。 */
@media (pointer: coarse) {
  .hud-menubtn::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 14px;
  }
}

/* ---------- 战术暂停层：对照 stardust-pause-reference-v1 ---------- */
.pause-bd {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 45%, rgba(31, 56, 148, .16), transparent 39%),
    linear-gradient(180deg, rgba(3, 8, 28, .71), rgba(2, 7, 23, .84));
  backdrop-filter: blur(1.5px) saturate(.68);
  -webkit-backdrop-filter: blur(1.5px) saturate(.68);
}

.pause-bd::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .2;
  background-image:
    linear-gradient(rgba(82, 128, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 128, 255, .12) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.pause-bd::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 8, 27, .55), transparent 18%, transparent 82%, rgba(3, 8, 27, .55)),
    radial-gradient(ellipse at center, transparent 42%, rgba(1, 4, 18, .38) 100%);
}

.pause-panel {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(520px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 32px));
  min-height: 560px;
  padding: 28px 0;
  color: var(--white);
  text-align: center;
  animation: pausePanelIn .48s cubic-bezier(.2, .85, .25, 1) both;
}

@keyframes pausePanelIn {
  from { opacity: 0; transform: translateY(12px) scale(.975); }
  to { opacity: 1; transform: none; }
}

.pause-radar {
  position: absolute;
  z-index: 0;
  top: 47%;
  left: 50%;
  width: min(640px, 72vh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .9;
}

.pause-radar-grid,
.pause-radar-ring,
.pause-radar-sweep,
.pause-radar-axis,
.pause-radar-node,
.pause-radar-core {
  position: absolute;
  display: block;
}

.pause-radar-grid {
  inset: 5%;
  border: 1px solid rgba(67, 117, 245, .19);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center, transparent 0 18%, rgba(72, 120, 246, .07) 18.2% 18.45%, transparent 18.7% 33%),
    repeating-conic-gradient(from 0deg, rgba(72, 120, 246, .13) 0 1deg, transparent 1deg 30deg);
  mask-image: radial-gradient(circle, #000 0 69%, transparent 72%);
}

.pause-radar-ring {
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(80, 132, 255, .34);
  box-shadow: 0 0 14px rgba(53, 102, 255, .12), inset 0 0 16px rgba(38, 88, 211, .08);
}

.pause-radar-ring-outer { width: 94%; height: 94%; border-style: dashed; opacity: .76; animation: pauseRingSpin 22s linear infinite; }
.pause-radar-ring-mid { width: 76%; height: 76%; border-color: rgba(86, 141, 255, .42); animation: pauseRingSpinReverse 16s linear infinite; }
.pause-radar-ring-inner { width: 48%; height: 48%; border-color: rgba(106, 151, 255, .52); border-style: dotted; }

@keyframes pauseRingSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes pauseRingSpinReverse { to { transform: translate(-50%, -50%) rotate(-360deg); } }

.pause-radar-sweep {
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from -22deg, transparent 0 71%, rgba(77, 134, 255, .02) 75%, rgba(90, 145, 255, .2) 80%, transparent 87% 100%);
  mask-image: radial-gradient(circle, #000 0 72%, transparent 73%);
  animation: pauseSweep 7s linear infinite;
}

@keyframes pauseSweep { to { transform: rotate(360deg); } }

.pause-radar-axis {
  left: 50%;
  top: 7%;
  width: 1px;
  height: 86%;
  transform: translateX(-50%);
  background: linear-gradient(transparent, rgba(83, 137, 255, .34) 18%, rgba(121, 158, 255, .42) 50%, rgba(83, 137, 255, .34) 82%, transparent);
  opacity: .6;
}

.pause-radar-axis-x {
  top: 50%;
  left: 7%;
  width: 86%;
  height: 1px;
  transform: translateY(-50%);
}

.pause-radar-node {
  width: 5px;
  height: 5px;
  border: 1px solid #74a2ff;
  background: #192c78;
  box-shadow: 0 0 10px rgba(87, 145, 255, .9);
  transform: rotate(45deg);
}

.pause-radar-node-a { left: 19%; top: 34%; }
.pause-radar-node-b { right: 16%; top: 22%; }
.pause-radar-node-c { right: 22%; bottom: 26%; }
.pause-radar-node-d { left: 25%; bottom: 18%; }

.pause-radar-core {
  left: 50%;
  top: 23%;
  width: 116px;
  height: 116px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 12px rgba(137, 169, 255, .72));
}

.pause-radar-core::before,
.pause-radar-core::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(151, 176, 255, .54);
  transform: rotate(45deg);
}

.pause-radar-core::after { inset: 28px; border-color: rgba(105, 146, 255, .52); transform: rotate(0deg); }
.pause-radar-core svg { width: 96px; height: 96px; fill: none; stroke: #dce6ff; stroke-width: 1.8; }
.pause-radar-core svg path:last-of-type { fill: rgba(166, 190, 255, .32); }
.pause-radar-core svg circle { fill: #dce6ff; stroke: none; }

.pause-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transform: translateY(38px);
}

.pause-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: rgba(128, 166, 255, .72);
  font-family: "Segoe UI", system-ui, "MiSans", sans-serif;
  font-size: 10px;
  letter-spacing: .23em;
}

.pause-eyebrow i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7d9eff;
  box-shadow: 0 0 8px #6d8dff;
}

.pause-title {
  color: #f0f4ff;
  font-size: clamp(40px, 4vw, 58px);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.1;
  text-shadow: 0 0 22px rgba(151, 178, 255, .38), 0 2px 0 rgba(13, 26, 77, .9);
}

.pause-status {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 11px;
  color: #bccbff;
  font-size: 16px;
  letter-spacing: .52em;
  text-indent: .52em;
  text-shadow: 0 0 12px rgba(125, 150, 255, .7);
}

.pause-status span {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #718fff);
}

.pause-status span:last-child { transform: scaleX(-1); }

.pause-divider {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 244px;
  margin: 17px 0 18px;
  color: #668bff;
}

.pause-divider i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(81, 125, 255, .75)); }
.pause-divider i:last-child { transform: scaleX(-1); }
.pause-divider b { width: 7px; height: 7px; border: 1px solid #7399ff; transform: rotate(45deg); box-shadow: 0 0 8px rgba(105, 145, 255, .8); }

.pause-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(330px, calc(100vw - 70px));
}

.pause-btn {
  position: relative;
  display: grid;
  grid-template-columns: 28px 31px minmax(0, 1fr) 18px;
  align-items: center;
  width: 100%;
  height: 59px;
  padding: 0 17px;
  border: 0;
  border-radius: 0;
  color: rgba(202, 215, 255, .82);
  background: transparent;
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 9px, 9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px));
  filter: drop-shadow(0 0 8px rgba(41, 82, 199, .08));
  transition: color .16s, filter .16s, transform .16s;
}

.pause-btn::before,
.pause-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inherit;
}

.pause-btn::before { z-index: 0; background: linear-gradient(105deg, rgba(89, 128, 222, .62), rgba(52, 73, 141, .48)); }
.pause-btn::after { inset: 1px; z-index: 1; background: linear-gradient(100deg, rgba(11, 25, 67, .9), rgba(7, 16, 48, .82)); }
.pause-btn > * { position: relative; z-index: 2; }

.pause-btn:hover,
.pause-btn:focus-visible { color: #f1f5ff; filter: drop-shadow(0 0 12px rgba(76, 112, 255, .32)); }
.pause-btn:hover::after { background: linear-gradient(100deg, rgba(22, 43, 105, .92), rgba(12, 27, 72, .9)); }
.pause-btn:focus-visible { outline: 1px solid #8ba8ff; outline-offset: 4px; }
.pause-btn:active { transform: translateY(1px); }

.pause-btn.is-selected::before { background: linear-gradient(100deg, #7b67ff, #4e5dff 55%, #7357ff); }
.pause-btn.is-selected::after { background: linear-gradient(100deg, rgba(56, 39, 169, .96), rgba(37, 31, 132, .93) 60%, rgba(44, 25, 121, .9)); }
.pause-btn.is-selected { color: #fff; filter: drop-shadow(0 0 14px rgba(92, 81, 255, .52)); }
/* v2.3.3 批次E12：danger 项 hover/选中用红系 —— 旧紫蓝渐变让
   "返回指挥舱"（退出对局）与普通项无视觉区分，危险语义丢失 */
.pause-btn.danger:hover::before,
.pause-btn.danger.is-selected::before { background: linear-gradient(100deg, rgba(255, 92, 122, .8), rgba(196, 48, 78, .62)); }
.pause-btn.danger:hover,
.pause-btn.danger.is-selected { color: #ffd9e1; filter: drop-shadow(0 0 14px rgba(255, 92, 122, .45)); }
.pause-btn.danger:hover::after,
.pause-btn.danger.is-selected::after { background: linear-gradient(100deg, rgba(148, 27, 54, .96), rgba(104, 18, 40, .93) 60%, rgba(122, 20, 48, .9)); }

.pause-btn-index {
  color: rgba(128, 158, 238, .74);
  font-size: 10px;
  letter-spacing: .08em;
}

.pause-btn.is-selected .pause-btn-index { color: rgba(232, 235, 255, .86); }
.pause-btn-icon { display: grid; place-items: center; width: 25px; height: 25px; }
.pause-btn-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: bevel; }
.pause-btn[data-act="resume"] .pause-btn-icon svg path:first-child { fill: currentColor; stroke: none; }
.pause-btn-label { overflow: hidden; font-size: 20px; font-weight: 600; letter-spacing: .22em; white-space: nowrap; text-shadow: 0 1px 8px rgba(3, 8, 26, .8); }
.pause-btn-arrow { justify-self: end; color: rgba(116, 148, 235, .8); font-size: 27px; font-weight: 300; line-height: 1; }
.pause-btn.is-selected .pause-btn-arrow { color: #fff; }

.pause-footer {
  display: flex;
  justify-content: space-between;
  width: min(330px, calc(100vw - 70px));
  margin-top: 18px;
  color: rgba(111, 140, 215, .58);
  font-size: 9px;
  letter-spacing: .18em;
}

@media (prefers-reduced-motion: reduce) {
  .pause-panel, .pause-radar-ring-outer, .pause-radar-ring-mid, .pause-radar-sweep { animation: none; }
}

/* ---------- 武器图标（各 UI 共用 weaponIcons.js 线稿） ---------- */
.weapon-icon svg { display: block; }
.weapon-icon { color: var(--accent2); }
.weapon-icon .raster-icon-canvas { width: 24px; height: 24px; }
.weapon-card[data-quality="rare"] .weapon-icon   { color: var(--rare); }
.weapon-card[data-quality="epic"] .weapon-icon   { color: var(--epic); }
.weapon-card[data-quality="legend"] .weapon-icon { color: var(--legend); }

.prep-wicon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-icon {
  align-items: center;
  justify-content: center;
}
.inv-icon svg { display: block; }
.inv-icon.q-common { color: var(--accent2); }
.inv-icon.q-rare { color: var(--rare); }
.inv-icon.q-epic { color: var(--epic); }
.inv-icon.q-legend { color: var(--legend); }

/* 图鉴武器卡图标 */
.cd-wicon {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--accent2);
}
.cd-wicon.q-rare { color: var(--rare); }
.cd-wicon.q-epic { color: var(--epic); }
.cd-wicon.q-legend { color: var(--legend); }
.cd-wicon svg { filter: drop-shadow(0 0 6px currentColor); }
.cd-wicon .raster-icon-canvas { filter: drop-shadow(0 0 6px currentColor); }

/* 第19轮：图鉴·局内强化 图标（与武器图标同风格，橙色系） */
.cd-upicon {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
  color: #ffb74d;
}
.cd-upicon svg { width: 34px; height: 34px; filter: drop-shadow(0 0 6px currentColor); }

/* ================================================================
   第11轮 · 神盾协议作战
   ================================================================ */
/* 战斗 HUD：核心血条 / 能量 / 波次（顶部中央下方） */
.denial-wrap {
  position: fixed;
  /* 第14轮：hidden 属性需显式覆盖 display:flex（UA [hidden] 样式被类选择器覆盖） */
}
.denial-wrap[hidden] { display: none; }
.denial-wrap {
  position: fixed;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(6, 12, 24, .82);
  border: 1px solid rgba(105, 240, 174, .3);
  border-radius: 10px;
  padding: 8px 16px;
  z-index: 40;
  backdrop-filter: blur(3px);
}
.denial-wrap .denial-core { display: flex; align-items: center; gap: 8px; }
.denial-wrap .denial-core .k,
.denial-wrap .denial-energy .k { font-size: 12px; color: #7c93b8; letter-spacing: .1em; }
.denial-wrap .denial-core .bar {
  width: 130px; height: 8px;
  background: rgba(255, 255, 255, .1);
  border-radius: 4px; overflow: hidden;
}
.denial-wrap .denial-core .bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #69f0ae, #a5f6c8);
  transition: width .15s;
}
.denial-wrap .denial-core .v { font-size: 12px; color: #cfe2ff; min-width: 64px; }
.denial-wrap .denial-energy { display: flex; align-items: center; gap: 6px; }
.denial-wrap .denial-energy .v { font-size: 16px; font-weight: 600; color: #69f0ae; }
.denial-wrap .denial-wave { font-size: 13px; color: #ffd54f; letter-spacing: .08em; }

/* 建造按钮（HUD 常驻，提示 G 快捷键；HUD 层默认 pointer-events:none，需单独恢复） */
.denial-wrap .denial-buildbtn {
  pointer-events: auto;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  color: #69f0ae;
  background: rgba(105, 240, 174, .12);
  border: 1px solid rgba(105, 240, 174, .5);
  border-radius: 6px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.denial-wrap .denial-buildbtn:hover { background: rgba(105, 240, 174, .25); border-color: #69f0ae; }

/* 建造菜单（右下） */
.denial-build {
  position: fixed;
  right: 18px;
  bottom: 90px;
  width: 250px;
  background: rgba(6, 12, 24, .92);
  border: 1px solid rgba(105, 240, 174, .35);
  border-radius: 10px;
  padding: 10px;
  z-index: 45;
  display: none;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(3px);
}
.denial-build.on { display: flex; }
.denial-build-title { font-size: 12px; color: #69f0ae; letter-spacing: .05em; }
.denial-build-list { overflow: hidden; max-height: 52vh; }   /* 第15轮：原生滚动 → Canvas 自绘 */
.denial-build-list-content { display: flex; flex-direction: column; gap: 6px; padding-right: 2px; will-change: transform; }
.db-cat {
  font-size: 11px;
  font-weight: 700;
  color: #69f0ae;
  letter-spacing: .3em;
  padding: 4px 2px 0;
  border-top: 1px solid rgba(105, 240, 174, .18);
}
.db-cat:first-child { border-top: 0; }
.denial-build-btn .db-size { font-size: 10px; color: #7c93b8; margin-left: 5px; }
.denial-build-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-items: center;
  padding: 7px 10px;
  background: rgba(20, 34, 56, .8);
  border: 1px solid rgba(120, 160, 220, .25);
  border-radius: 8px;
  color: var(--white);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s;
}
.denial-build-btn:hover { border-color: #69f0ae; background: rgba(105, 240, 174, .1); }
.denial-build-btn.sel { border-color: #69f0ae; background: rgba(105, 240, 174, .16); }
.denial-build-btn .db-name { font-size: 13px; font-weight: 600; }
.denial-build-btn .db-cost { font-size: 12px; color: #ffd54f; }
.denial-build-btn .db-desc { grid-column: 1 / -1; font-size: 11px; color: #7c93b8; }
.denial-build-energy { font-size: 12px; color: #69f0ae; text-align: right; }

/* 战前准备：设施平面图预览 */
.prep-editor-btn {
  font-size: 12px;
  padding: 3px 12px;
  margin-left: 12px;
  letter-spacing: .1em;
  vertical-align: 1px;
}
.prep-chart canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, .2);
}

/* ================================================================
   第16轮：设施地图编辑器（游戏内整合）
   ================================================================ */
.me-root { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: hidden; }
.me-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid rgba(120,180,255,.25);
  background: rgba(10,18,34,.92);
}
.me-title { font-size: 15px; letter-spacing: .18em; color: #8fd6ff; margin-right: 6px; }
.me-back { border-color: #69f0ae; color: #69f0ae; }
.me-back:hover { background: rgba(105,240,174,.12); }
.me-header label { display: flex; align-items: center; gap: 5px; color: #9fb6d8; font-size: 12px; }
.me-header input[type=text], .me-header input[type=number] {
  background: rgba(8,14,28,.9); border: 1px solid rgba(120,180,255,.25); color: #eef4ff;
  border-radius: 5px; padding: 4px 8px; font: inherit; font-size: 12px;
}
.me-header input[type=text] { width: 130px; }
.me-header input[type=number] { width: 60px; }
.me-main { flex: 1; display: flex; min-height: 0; }
/* 左工具栏（Canvas 自绘滚动） */
.me-tools {
  width: 180px; display: flex; flex-direction: column; overflow: hidden;
  border-right: 1px solid rgba(120,180,255,.25); background: rgba(8,12,24,.6);
}
.me-tools-content { display: flex; flex-direction: column; gap: 7px; padding: 10px; }
.me-tool-title { font-size: 11px; color: #7c93b8; letter-spacing: .2em; margin-top: 4px; }
.me-tool-btn {
  font: inherit; font-size: 12px; text-align: left; color: #eef4ff; cursor: pointer;
  background: rgba(20,34,56,.8); border: 1px solid rgba(120,180,255,.25); border-radius: 6px;
  padding: 6px 9px; transition: border-color .12s, background .12s;
}
.me-tool-btn:hover { border-color: #4ca7ff; background: rgba(76,167,255,.1); }
.me-tool-btn.sel { border-color: #4ca7ff; background: rgba(76,167,255,.18); color: #8fd6ff; }
.me-tool-btn small { display: block; color: #7c93b8; margin-top: 2px; font-size: 10px; }
.me-dim { color: #7c93b8; font-size: 10px; margin-left: 3px; }
.me-size-row { display: flex; align-items: center; gap: 6px; }
.me-size-label { font-size: 11px; color: #7c93b8; }
.me-size-btn {
  font: inherit; font-size: 11px; color: #eef4ff; cursor: pointer; width: 32px;
  background: rgba(20,34,56,.8); border: 1px solid rgba(120,180,255,.25); border-radius: 4px; padding: 3px 0;
}
.me-size-btn.sel { border-color: #4ca7ff; background: rgba(76,167,255,.18); color: #8fd6ff; }
/* 中间画布 */
.me-stage-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; position: relative; padding: 8px; }
#me-stage { display: block; width: 100%; height: 100%; background: #0a1220; border: 1px solid rgba(120,180,255,.25); cursor: crosshair; }
.me-hover-tip {
  position: absolute; left: 14px; bottom: 12px; color: #7c93b8; font-size: 11px;
  background: rgba(8,12,24,.7); padding: 4px 10px; border-radius: 6px; pointer-events: none;
}
/* 右侧栏（Canvas 自绘滚动） */
.me-side {
  width: 250px; display: flex; flex-direction: column; overflow: hidden;
  border-left: 1px solid rgba(120,180,255,.25); background: rgba(8,12,24,.6);
}
.me-side-content { display: flex; flex-direction: column; gap: 9px; padding: 10px; }
.me-hint { font-size: 11px; color: #647a9c; line-height: 1.6; }
.me-io { display: flex; gap: 6px; }
.me-io .btn { flex: 1; }
#me-map-list { display: flex; flex-direction: column; gap: 5px; }
.me-map-row {
  display: flex; align-items: center; gap: 5px; padding: 6px 8px;
  background: rgba(20,34,56,.8); border: 1px solid rgba(120,180,255,.25); border-radius: 5px;
}
.me-map-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.me-map-row button {
  font: inherit; font-size: 10px; cursor: pointer; color: #eef4ff;
  background: transparent; border: 1px solid rgba(120,180,255,.25); border-radius: 4px; padding: 2px 7px;
}
.me-map-row button:hover { border-color: #4ca7ff; color: #8fd6ff; }
.me-map-row button.del:hover { border-color: #ff5252; color: #ff5252; }
#me-check-result { font-size: 11px; line-height: 1.6; white-space: pre-wrap; color: #9fb6d8; }
#me-check-result .ok { color: #69f0ae; } #me-check-result .bad { color: #ff5252; }

/* ---------- 开发者控制台：上方约 2/3 屏、低装饰毛玻璃终端 ---------- */
#dev-console {
  position: fixed;
  top: max(12px, calc(var(--sa-t, 0px) + 12px));
  right: max(12px, calc(var(--sa-r, 0px) + 4vw));
  left: max(12px, calc(var(--sa-l, 0px) + 4vw));
  height: min(66.6667vh, 720px);
  min-height: 214px;
  z-index: 65; /* 低于自绘鼠标层，控制台上的光标仍保持可见 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 10px;
  overflow: hidden;
  color: #dfe5ff;
  background: linear-gradient(145deg, rgba(31, 20, 66, .88), rgba(7, 10, 29, .91));
  border: 1px solid rgba(151, 130, 255, .42);
  border-radius: 8px;
  box-shadow: 0 16px 44px rgba(4, 2, 20, .38), 0 0 22px rgba(109, 81, 214, .12);
  backdrop-filter: blur(14px) saturate(118%);
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
}
#dev-console[hidden] { display: none; }
#dev-console .dev-console-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 30px;
  min-width: 0;
  border-bottom: 1px solid rgba(151, 130, 255, .18);
}
#dev-console .dev-console-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
#dev-console .dev-title {
  overflow: hidden;
  color: #d9d2ff;
  font-size: clamp(11px, .72vw, 14px);
  font-weight: 650;
  letter-spacing: .12em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dev-console .dev-key {
  flex: 0 0 auto;
  color: #a899e4;
  font-size: 9px;
  letter-spacing: .08em;
  opacity: .72;
  white-space: nowrap;
}
#dev-console .dev-console-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #aaa8d5;
  font-size: 9px;
  letter-spacing: .06em;
  white-space: nowrap;
}
#dev-console .dev-status-text { overflow: hidden; text-overflow: ellipsis; }
#dev-console .dev-status-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #927cff;
  box-shadow: 0 0 8px rgba(146, 124, 255, .75);
}
#dev-console .dev-console-status:has([data-paused="true"]) .dev-status-dot { background: #f2c76d; }
#dev-console .dev-close {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  padding: 0;
  color: #bcb7dc;
  background: transparent;
  border: 1px solid rgba(151, 130, 255, .24);
  border-radius: 4px;
  font: 17px/21px ui-sans-serif, system-ui, sans-serif;
}
#dev-console .dev-close:hover,
#dev-console .dev-close:focus-visible { color: #fff; border-color: rgba(182, 163, 255, .65); background: rgba(151, 130, 255, .12); }
#dev-console .dev-console-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}
#dev-console .dev-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 20px;
  color: #b4a9e9;
  font-size: 9px;
  letter-spacing: .12em;
}
#dev-console .dev-section-head small { color: #7974a0; font-size: 9px; letter-spacing: .06em; }
#dev-console .dev-log-frame {
  display: flex;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}
#dev-console .dev-log {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 7px 9px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: rgba(4, 6, 20, .43);
  border: 1px solid rgba(151, 130, 255, .17);
  border-radius: 4px;
  color: #b8c1df;
  font-size: clamp(10px, .63vw, 12px);
  line-height: 1.55;
}
#dev-console .dev-log::-webkit-scrollbar { width: 0; height: 0; display: none; }
#dev-console .dev-log-scrollbar {
  position: relative;
  flex: 0 0 clamp(9px, .58vw, 12px);
  width: clamp(9px, .58vw, 12px);
  min-height: 30px;
  padding: 2px;
  overflow: hidden;
  background: rgba(4, 6, 20, .44);
  border: 1px solid rgba(151, 130, 255, .2);
  border-radius: 4px;
  outline: 0;
  cursor: ns-resize;
  touch-action: none;
}
#dev-console .dev-log-scrollbar::before {
  position: absolute;
  inset: 5px 50%;
  width: 1px;
  content: '';
  background: linear-gradient(180deg, transparent, rgba(151, 130, 255, .38) 18%, rgba(151, 130, 255, .38) 82%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}
#dev-console .dev-log-scrollbar:focus-visible { outline: 1px solid rgba(191, 174, 255, .88); outline-offset: 1px; }
#dev-console .dev-log-scroll-thumb {
  position: absolute;
  top: 2px;
  right: 2px;
  left: 2px;
  min-height: 28px;
  background: linear-gradient(180deg, rgba(211, 197, 255, .92), rgba(132, 107, 232, .72));
  border: 1px solid rgba(237, 231, 255, .55);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(142, 112, 245, .4);
  pointer-events: auto;
  will-change: transform, height;
}
#dev-console .dev-log-scrollbar[data-scrollable="false"] .dev-log-scroll-thumb { opacity: .46; }
#dev-console .dev-log-line {
  display: grid;
  grid-template-columns: 72px 78px minmax(0, 1fr);
  gap: 9px;
  min-width: max-content;
  white-space: nowrap;
}
#dev-console .dev-log-line time { color: #6e7092; }
#dev-console .dev-log-line b { color: #a998e8; font-weight: 600; letter-spacing: .05em; }
#dev-console .dev-log-line span { color: #b9c2df; }
#dev-console .dev-log-line.is-ok span { color: #b8e7d0; }
#dev-console .dev-log-line.is-warn span { color: #e6cb91; }
#dev-console .dev-log-line.is-error span { color: #f0a1b1; }
#dev-console .dev-log-line.is-command span { color: #dbccff; }
#dev-console .dev-console-footer {
  display: flex;
  align-items: stretch;
  gap: 7px;
  flex: 0 0 30px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#dev-console .dev-console-footer::-webkit-scrollbar { width: 0; height: 0; display: none; }
#dev-console .dev-command-form {
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 180px;
  height: 30px;
  overflow: hidden;
  background: rgba(4, 6, 20, .56);
  border: 1px solid rgba(151, 130, 255, .3);
  border-radius: 4px;
}
#dev-console .dev-command-form:focus-within { border-color: rgba(177, 158, 255, .72); box-shadow: 0 0 0 2px rgba(119, 92, 218, .12); }
#dev-console .dev-command-prefix { padding: 0 7px; color: #9b84ed; font-size: 11px; }
#dev-console .dev-command-input {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 4px;
  color: #eef0ff;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  font: inherit;
  font-size: 11px;
}
#dev-console .dev-command-input::placeholder { color: #777394; }
#dev-console .dev-command-submit {
  width: 31px;
  height: 28px;
  flex: 0 0 31px;
  padding: 0;
  color: #dcd3ff;
  background: rgba(132, 106, 231, .18);
  border: 0;
  border-left: 1px solid rgba(151, 130, 255, .24);
  border-radius: 0;
  font: 15px/26px ui-monospace, monospace;
}
#dev-console .dev-actions {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex: 0 0 auto;
  min-width: max-content;
}
#dev-console .dev-action {
  height: 30px;
  min-width: 64px;
  padding: 0 clamp(6px, .6vw, 12px);
  color: #c9c1ef;
  background: rgba(116, 88, 205, .14);
  border: 1px solid rgba(151, 130, 255, .31);
  border-radius: 4px;
  font: 10px/28px ui-monospace, monospace;
  white-space: nowrap;
}
#dev-console .dev-action:hover,
#dev-console .dev-action:focus-visible { color: #fff; background: rgba(137, 107, 234, .28); border-color: rgba(183, 164, 255, .72); }
#dev-console .dev-action:disabled { cursor: not-allowed; opacity: .36; }
#dev-console .dev-console-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 12px;
  overflow: hidden;
  color: #716b98;
  font-size: 8px;
  letter-spacing: .08em;
  line-height: 12px;
  white-space: nowrap;
}
#dev-console .dev-console-meta span:first-child { overflow: hidden; text-overflow: ellipsis; }
#dev-console button:focus-visible,
#dev-console input:focus-visible { outline: 1px solid rgba(191, 174, 255, .88); outline-offset: 1px; }

@media (max-width: 720px) {
  #dev-console {
    right: max(8px, calc(var(--sa-r, 0px) + 8px));
    left: max(8px, calc(var(--sa-l, 0px) + 8px));
    top: max(8px, calc(var(--sa-t, 0px) + 8px));
    height: min(66.6667vh, 520px);
    padding: 9px 10px 8px;
    gap: 6px;
  }
  #dev-console .dev-console-head { flex-basis: 27px; gap: 7px; }
  #dev-console .dev-key { display: none; }
  #dev-console .dev-console-status { font-size: 8px; }
  #dev-console .dev-console-footer { flex-basis: 28px; gap: 5px; }
  #dev-console .dev-command-form,
  #dev-console .dev-action { height: 28px; }
  #dev-console .dev-action { min-width: 59px; padding-inline: 5px; font-size: 9px; line-height: 26px; }
  #dev-console .dev-console-meta { display: none; }
}

/* ================================================================
   v1.6.0 外围包：成就屏 / 图鉴进度条 / 分章 / FPS / 金色 toast / 结算成就行
   ================================================================ */

/* ---------- 成就屏 ---------- */
.achv-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; }
.achv-body { width: min(1080px, 94vw); flex: 1; min-height: 0; position: relative; overflow: hidden; }
.achv-tab-cnt { font-size: 12px; opacity: .75; margin-left: 4px; }
.achv-head { padding: 10px 14px 6px; }
.achv-head-txt { font-size: 14px; color: var(--white); letter-spacing: .08em; }
.achv-head-txt b { color: var(--gold); font-size: 16px; }
.achv-head-star { float: right; display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-size: 13px; }
.achv-prog { height: 6px; margin-top: 8px; background: rgba(120,180,255,.12); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.achv-prog-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2), var(--gold)); border-radius: 3px; transition: width .6s cubic-bezier(.2,.8,.3,1); }
.achv-prog-fill.full { box-shadow: 0 0 10px rgba(255,213,79,.55); }
.achv-sec { margin: 6px 0 14px; }
.achv-sec-title { padding: 6px 14px 8px; font-size: 14px; font-weight: 600; letter-spacing: .14em; display: flex; justify-content: space-between; }
.achv-sec-title span { opacity: .7; font-weight: 400; font-size: 12px; }
.achv-card { position: relative; animation: achvFade .34s both; animation-delay: var(--d, 0ms); }
@keyframes achvFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.achv-badge { width: 52px; height: 52px; margin: 2px auto 6px; border: 1.6px solid; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(8,20,42,.6); }
.achv-card.on .achv-badge { box-shadow: 0 0 12px rgba(140,190,255,.22) inset; }
.achv-bar { height: 5px; margin: 6px 10px 2px; background: rgba(120,180,255,.12); border-radius: 3px; overflow: hidden; }
.achv-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 3px; }
.achv-bar-num { font-size: 11px; color: #7d92b5; text-align: center; margin-bottom: 2px; }
.achv-got { font-size: 12px; text-align: center; margin: 6px 0 2px; font-weight: 600; }
.achv-reward { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--gold); padding: 2px 0 4px; }
.achv-stats-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.achv-stat-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; animation: achvFade .34s both; animation-delay: var(--d, 0ms); }
.achv-stat-ico { color: var(--accent2); opacity: .8; }
.achv-stat-v { font-size: clamp(17px, 1vw + 14px, 20px); font-weight: 700; color: var(--white); letter-spacing: .04em; }
.achv-stat-k { font-size: 12px; color: #7d92b5; }

/* ---------- 图鉴：进度条头部 + 分章 + Boss 角标 ---------- */
.cd-prog-head { padding: 10px 14px 8px; }
.cd-prog-txt { font-size: 13px; color: var(--white); letter-spacing: .08em; }
.cd-prog-txt b { color: var(--gold); font-size: 15px; }
.cd-ch-sec { margin-bottom: 4px; }
.cd-ch-title { padding: 8px 14px 6px; font-size: 13px; font-weight: 600; color: #9db8dd; letter-spacing: .14em; border-left: 3px solid var(--line); margin: 4px 8px 2px; display: flex; justify-content: space-between; }
.cd-ch-title span { font-weight: 400; font-size: 12px; opacity: .75; }
.cd-ch-title.full { color: var(--gold); border-left-color: var(--gold); }
.cd-ecard { position: relative; }
.cd-ecard.is-boss::after { content: 'BOSS'; position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--gold); border: 1px solid rgba(255,213,79,.55); border-radius: 4px; padding: 1px 5px; background: rgba(8,20,42,.75); }
.cd-ecard.locked.is-boss::after { color: #5a6b85; border-color: rgba(120,150,190,.3); }

/* ---------- FPS 显示 ---------- */
.hud-fps { position: absolute; top: calc(10px + var(--sa-t)); right: calc(14px + var(--sa-r)); z-index: 6; font-size: 12px; color: var(--accent2); opacity: .8; letter-spacing: .08em; font-family: ui-monospace, Consolas, "MiSans", monospace; pointer-events: none; }

/* ---------- 成就金色 toast ---------- */
.toast-achv { border-color: rgba(255,213,79,.6); background: linear-gradient(135deg, rgba(50,40,10,.94), rgba(20,18,30,.94)); color: var(--gold); display: flex; align-items: center; gap: 6px; box-shadow: 0 0 16px rgba(255,213,79,.25); }
.toast-achv b { color: #fff3c4; }
.achv-toast-star { display: inline-flex; }

/* ---------- 结算：新成就行 ---------- */
.rs-achv { margin: 10px 0 2px; padding: 8px 12px; border: 1px solid rgba(255,213,79,.45); border-radius: 8px; background: linear-gradient(135deg, rgba(50,40,10,.5), rgba(20,18,30,.4)); }
.rs-achv-title { font-size: 13px; color: var(--gold); letter-spacing: .14em; font-weight: 600; margin-bottom: 4px; }
.rs-achv-item { display: flex; justify-content: space-between; font-size: 13px; color: var(--white); padding: 2px 0; }
.rs-achv-item .rs-achv-name { color: #ffe9a8; }

/* ---------- 主菜单按钮图标 ----------
   inline-flex 下 text-align 对 flex 子项无效——必须 justify-content: center
   文字才居中（旧版纯文字与新版图标+文字都整体居中） */
.menu-nav .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.menu-nav-ico { display: inline-flex; opacity: .85; }

/* ================================================================
   v1.6.0 响应式兼容规则
   这些规则保留给未启用 PC 参考表面的编辑器/旧嵌入环境；正式移动入口
   通过 width=1920 的布局视口避开该重排，最终统一参考表面见文件末尾。
   ================================================================ */

/* ---------- B. ≤768px / 手机横屏矮视口：纵向堆叠 ----------
   横屏手机在 Chrome 地址栏可见时布局视口高度会被压到 ~287px，
   而 CSS 宽度（如 Pixel 6 = 915px）远超 768 断点 → 会误走 PC 布局。
   故另加"横屏 + 触屏 + 高度 ≤500px"触发同一套移动端规则。 */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .cs-body, .prep-body { flex-direction: column; align-items: center; }
  .cs-list, .cs-detail { width: min(94vw, 460px); }
  .cs-detail { max-height: 42vh; overflow-y: auto; }
  .prep-class, .prep-weapons { width: min(94vw, 460px); }
  .prep-diffgrid { grid-template-columns: repeat(2, 1fr); }
  .prep-chgrid { justify-content: center; }
  .cs-row { grid-template-columns: 64px 1fr auto; }
  .cs-row-tag { display: none; }                    /* PC 冗余：一句话定位 */
  /* 主菜单：2 列按钮网格（7 钮 4 行，矮屏高度受限也完整显示、全部可点按；
     PC 单列 250px 按钮布局不变） */
  .menu-title { margin-bottom: 12px; }
  .menu-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: min(460px, 92vw); }
  .menu-nav .btn { width: 100%; padding: 12px 10px; }
  /* 模式选择：三卡并排紧凑（窄屏高度有限，卡片瘦身） */
  .ms-wrap { gap: 14px; padding: 14px; }
  .ms-cards { gap: 10px; }
  .ms-card { width: min(300px, 30vw); padding: 14px 10px; gap: 8px; }
  .ms-name { font-size: 15px; letter-spacing: .14em; }
  .ms-desc { font-size: 12px; line-height: 1.4; }
  .ms-progress { font-size: 19px; padding: 4px 10px; margin-top: 2px; }
  /* 职业选择：解除列表/详情固定高度 → 整屏随手指滚动（避免双层滚动区） */
  .cs-list, .cs-detail { max-height: none; overflow-y: visible; }
  .cs-body { gap: 10px; }
  /* 旧嵌入环境的移动布局回退；正式移动入口使用文件末尾的 PC 参考表面。 */
  /* 旧嵌入环境的全屏效果层回退；正式移动入口的 Canvas 与参考表面同坐标。 */
  /* 全屏效果层豁免：伤害数字坐标是视口系、低血警告/滤镜需铺满全屏 */
  .battle-root > .screenfx,
  .battle-root .hud > .dmg-layer,
  .battle-root .hud > .lowhp { position: fixed; inset: 0; width: 100%; height: 100%; transform: none; }
  .rs-panel, .modal { padding: 14px 16px; }
  .st-row, .rs-row { padding: 6px 4px; }
  .screen { padding: 8px; }
  .hp-keys { grid-template-columns: 1fr; }          /* 键位表两列 → 单列 */
  .screen-panel { padding: 24px 20px; }
}

/* 键位设置弹窗：由 settingsUI.js 动态挂载，独立于设置正文滚动区，避免在
   手机横屏或暂停菜单入口中被 st-body 的 Canvas transform 裁切。 */
.st-bindings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(1, 5, 16, .78);
  backdrop-filter: blur(6px);
}

.st-bindings-backdrop[hidden] { display: none; }

.st-bindings-modal {
  width: min(780px, calc(100vw - 56px));
  max-height: min(820px, calc(100vh - 56px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: #eef2ff;
  background: linear-gradient(145deg, rgba(10, 19, 45, .98), rgba(5, 10, 28, .98));
  border: 1px solid rgba(184, 157, 255, .76);
  clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 0 20px 70px rgba(0, 0, 0, .55), 0 0 32px rgba(127, 92, 255, .2), inset 0 0 35px rgba(84, 111, 203, .08);
}

.st-bindings-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid rgba(125, 151, 224, .28);
}

.st-bindings-kicker { color: #b99cff; font: 10px/1.2 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .14em; }
.st-bindings-header h2 { margin-top: 7px; color: #fff; font-size: 24px; font-weight: 600; letter-spacing: .12em; }
.st-bindings-header p { margin-top: 7px; color: rgba(192, 203, 235, .76); font-size: 13px; line-height: 1.5; }
.st-bindings-close { width: 36px; height: 36px; flex: 0 0 auto; color: #e9ddff; background: rgba(117, 86, 203, .18); border: 1px solid rgba(193, 167, 255, .58); font: 25px/30px "Segoe UI", "MiSans", sans-serif; cursor: pointer; }
.st-bindings-close:hover, .st-bindings-close:focus-visible { color: #fff; background: rgba(143, 106, 242, .4); border-color: #d9c8ff; outline: 1px solid rgba(217, 200, 255, .58); outline-offset: 2px; }

/* 滚动条由 scroll-canvas 自绘（registerScroll 注入 native-scroll-viewport），不用浏览器原生条。 */
.st-bindings-list { min-height: 0; overflow-y: auto; padding: 10px 28px 16px; }
.st-bindings-group { padding: 11px 2px 6px; color: #9f8aff; font: 10px/1.2 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .16em; }
.st-binding-row { min-height: 60px; display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; gap: 18px; padding: 8px 12px; border: 1px solid rgba(103, 132, 201, .24); border-left: 2px solid rgba(65, 134, 241, .52); background: rgba(10, 21, 48, .56); }
.st-binding-row + .st-binding-row { border-top-color: rgba(103, 132, 201, .14); }
.st-binding-row:hover, .st-binding-row.is-listening { background: rgba(39, 30, 83, .66); border-color: rgba(181, 151, 255, .72); }
.st-binding-copy { min-width: 0; }
.st-binding-copy b, .st-binding-copy small { display: block; }
.st-binding-copy b { color: #f0efff; font-size: 14px; font-weight: 600; letter-spacing: .06em; }
.st-binding-copy small { margin-top: 2px; color: rgba(187, 178, 241, .72); font: 9px/1.2 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; }
.st-binding-copy p { margin-top: 4px; color: rgba(174, 188, 224, .7); font-size: 11px; line-height: 1.3; }
.st-binding-key { min-width: 0; height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 12px; color: #f2ecff; background: rgba(4, 9, 24, .9); border: 1px solid rgba(142, 115, 231, .72); font: 600 12px/1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .06em; cursor: pointer; }
.st-binding-key i { width: 8px; height: 8px; flex: 0 0 auto; border-top: 1px solid #d2bdff; border-right: 1px solid #d2bdff; transform: rotate(45deg); }
.st-binding-key:hover, .st-binding-key:focus-visible, .st-binding-row.is-listening .st-binding-key { color: #fff; background: rgba(121, 82, 224, .56); border-color: #d8c9ff; outline: 1px solid rgba(216, 201, 255, .4); outline-offset: 2px; }
.st-binding-row.is-listening .st-binding-key { animation: stBindingPulse 1s ease-in-out infinite; }
@keyframes stBindingPulse { 50% { box-shadow: 0 0 0 3px rgba(171, 134, 255, .12), 0 0 18px rgba(157, 115, 255, .3); } }

.st-bindings-footer { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 28px 19px; border-top: 1px solid rgba(125, 151, 224, .28); }
.st-bindings-status { min-width: 0; overflow: hidden; color: rgba(191, 202, 234, .78); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.st-bindings-reset, .st-bindings-done { min-height: 38px; padding: 0 16px; color: #d8d0f8; background: rgba(8, 14, 34, .8); border: 1px solid rgba(122, 145, 206, .56); font: inherit; font-size: 12px; cursor: pointer; }
.st-bindings-reset:hover, .st-bindings-reset:focus-visible { color: #fff; border-color: rgba(157, 206, 255, .9); outline: 1px solid rgba(157, 206, 255, .35); outline-offset: 2px; }
.st-bindings-done { color: #fff; background: linear-gradient(135deg, rgba(123, 85, 230, .9), rgba(74, 49, 147, .88)); border-color: rgba(211, 193, 255, .9); }
.st-bindings-done:hover, .st-bindings-done:focus-visible { background: linear-gradient(135deg, rgba(156, 119, 247, .96), rgba(92, 61, 181, .94)); outline: 1px solid rgba(218, 203, 255, .52); outline-offset: 2px; }

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .st-bindings-backdrop { padding: 8px; }
  .st-bindings-modal { width: min(100%, 760px); max-height: calc(100vh - 16px); }
  .st-bindings-header { gap: 8px; padding: 12px 14px 10px; }
  .st-bindings-kicker { font-size: 7px; }
  .st-bindings-header h2 { margin-top: 4px; font-size: 16px; }
  .st-bindings-header p { margin-top: 4px; font-size: 9px; }
  .st-bindings-close { width: 28px; height: 28px; font-size: 20px; line-height: 22px; }
  .st-bindings-list { padding: 5px 8px 8px; }
  .st-bindings-group { padding: 6px 2px 3px; font-size: 7px; }
  .st-binding-row { min-height: 42px; grid-template-columns: minmax(0, 1fr) 112px; gap: 7px; padding: 4px 6px; }
  .st-binding-copy b { font-size: 10px; }
  .st-binding-copy small { font-size: 7px; }
  .st-binding-copy p { margin-top: 2px; font-size: 8px; }
  .st-binding-key { height: 30px; padding: 0 7px; font-size: 9px; }
  .st-bindings-footer { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 8px 10px 10px; }
  .st-bindings-status { font-size: 8px; }
  .st-bindings-reset, .st-bindings-done { min-height: 30px; padding: 0 8px; font-size: 9px; }
}

/* ================================================================
   战前准备 → SORTIE 任务卡风格收口
   与 modeSelect 共用紫/青/红三色协议、扫描线、切角与数据栏语言。
   ================================================================ */
#app > .screen > .prep-viewport { background: #020817; font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, "MiSans", monospace; }
#app > .screen > .prep-viewport::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .28; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(105, 158, 219, .04) 3px 4px), linear-gradient(rgba(83, 128, 191, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(83, 128, 191, .045) 1px, transparent 1px); background-size: auto, 80px 80px, 80px 80px; }
#prep-wrap.prep-shell { --prep-accent: #a55bff; --prep-accent-rgb: 165, 91, 255; grid-template-rows: 74px minmax(158px, 1.05fr) minmax(155px, 1.25fr) auto auto 48px; background: linear-gradient(180deg, rgba(3, 10, 26, .92), rgba(2, 8, 20, .96)); border-color: rgba(var(--prep-accent-rgb), .5); box-shadow: 0 0 0 1px rgba(6, 32, 64, .9), 0 0 42px rgba(var(--prep-accent-rgb), .12), inset 0 0 42px rgba(var(--prep-accent-rgb), .07); }
#prep-wrap.prep-shell::before { background-image: linear-gradient(rgba(var(--prep-accent-rgb), .06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--prep-accent-rgb), .06) 1px, transparent 1px); }
#prep-wrap.prep-shell::after { border-color: rgba(var(--prep-accent-rgb), .16); }
#prep-wrap.prep-shell .prep-topbar { grid-template-columns: 118px minmax(260px, 1fr) auto; align-items: start; gap: 18px; min-height: 0; padding: 0; border-bottom-color: rgba(var(--prep-accent-rgb), .38); }
#prep-wrap.prep-shell .prep-topbar::after { left: 30%; right: 30%; background: var(--prep-accent); box-shadow: 0 0 16px var(--prep-accent); }
.prep-top-back { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 104px; height: 41px; margin-top: 4px; color: #f1f6ff; background: linear-gradient(135deg, rgba(17, 33, 63, .9), rgba(8, 15, 34, .7)); border: 1px solid rgba(152, 184, 239, .64); clip-path: polygon(0 0, 88% 0, 100% 22%, 100% 100%, 12% 100%, 0 78%); font: 600 14px/1 ui-monospace, "MiSans", monospace; letter-spacing: .17em; cursor: pointer; transition: color .18s, border-color .18s, background .18s, transform .18s; }
.prep-top-back:hover, .prep-top-back:focus-visible { color: #fff; border-color: var(--prep-accent); background: rgba(var(--prep-accent-rgb), .22); }.prep-top-back:active { transform: translateY(1px); }.prep-top-back:focus-visible { outline: 1px solid var(--prep-accent); outline-offset: 3px; }
#prep-wrap.prep-shell .prep-heading { align-items: flex-start; gap: 5px; text-align: left; }
.prep-heading-kicker, .prep-heading em { color: #8b9bbb; font: 10px/1 ui-monospace, "MiSans", monospace; letter-spacing: .18em; font-style: normal; }
#prep-wrap.prep-shell .prep-heading .prep-heading-kicker { color: #8b9bbb; font-size: 10px; font-weight: 400; line-height: 1; letter-spacing: .18em; text-shadow: none; }
.prep-heading strong { color: #f0f5ff; font-size: clamp(23px, 2vw, 34px); font-weight: 500; letter-spacing: .2em; line-height: 1.05; text-shadow: 0 0 14px rgba(var(--prep-accent-rgb), .5); }
.prep-heading small { margin-top: 0; color: var(--prep-accent); font: 600 13px/1 ui-monospace, "MiSans", monospace; letter-spacing: .14em; text-shadow: 0 0 9px rgba(var(--prep-accent-rgb), .45); }
.prep-heading em { margin-top: 2px; font-size: 9px; letter-spacing: .2em; }
.prep-command-meta { display: grid; gap: 12px; padding-top: 5px; color: #8f9db7; font-size: 10px; letter-spacing: .08em; text-align: right; white-space: nowrap; }
.prep-command-meta b { color: #c3cce0; font-weight: 500; }.prep-command-meta i { color: #60789f; font-style: normal; }.prep-command-status { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; color: #9bb0ce; }.prep-command-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--prep-accent); box-shadow: 0 0 9px var(--prep-accent); animation: prepOnlinePulse 1.8s ease-in-out infinite; }.prep-command-status b { color: #d6e4f6; font-weight: 500; }.prep-command-status em { color: var(--prep-accent); font-style: normal; }
#prep-wrap.prep-shell .prep-class, #prep-wrap.prep-shell .prep-weapons, #prep-wrap.prep-shell .prep-tactical { border-color: rgba(var(--prep-accent-rgb), .48); box-shadow: inset 0 0 26px rgba(var(--prep-accent-rgb), .055); }
#prep-wrap.prep-shell .prep-class { background: linear-gradient(135deg, rgba(var(--prep-accent-rgb), .12), rgba(2, 10, 20, .72)); }.prep-class::after { border-color: rgba(var(--prep-accent-rgb), .22); box-shadow: 0 0 0 12px rgba(var(--prep-accent-rgb), .04), 0 0 0 26px rgba(var(--prep-accent-rgb), .025); }
#prep-wrap.prep-shell .prep-wrow { border-color: rgba(var(--prep-accent-rgb), .34); }.prep-wrow.sel { border-color: var(--prep-accent) !important; background: rgba(var(--prep-accent-rgb), .17); box-shadow: inset 0 0 18px rgba(var(--prep-accent-rgb), .1), 0 0 12px rgba(var(--prep-accent-rgb), .12); }.prep-wrow:hover { border-color: var(--prep-accent); background: rgba(var(--prep-accent-rgb), .2); }
#prep-wrap.prep-shell .prep-wtitle { color: #d2c5ff; }.prep-mode-endless .prep-wtitle { color: #a9f1ff !important; }.prep-mode-denial .prep-wtitle { color: #ffb8c1 !important; }
#prep-wrap.prep-shell .prep-section-head { position: relative; }.prep-section-code { overflow: hidden; margin-left: auto; color: var(--prep-accent); font: 8px ui-monospace, "MiSans", monospace; letter-spacing: .11em; opacity: .8; text-overflow: ellipsis; white-space: nowrap; }.prep-editor-btn { color: var(--prep-accent); border-color: rgba(var(--prep-accent-rgb), .6); }.prep-editor-btn:hover, .prep-editor-btn:focus-visible { border-color: var(--prep-accent); background: rgba(var(--prep-accent-rgb), .16); }
#prep-wrap.prep-shell .prep-chapters, #prep-wrap.prep-shell .prep-levels, #prep-wrap.prep-shell .prep-diff { border-color: rgba(var(--prep-accent-rgb), .4); background: rgba(3, 13, 29, .72); }
#prep-wrap.prep-shell .prep-ch { border-color: rgba(130, 160, 211, .32); background: linear-gradient(180deg, rgba(9, 18, 39, .76), rgba(3, 10, 24, .9)); }.prep-ch:hover { border-color: var(--prep-accent); box-shadow: 0 0 16px rgba(var(--prep-accent-rgb), .14), inset 0 0 24px rgba(var(--prep-accent-rgb), .08); }.prep-ch.sel { border-color: var(--prep-accent); background: linear-gradient(180deg, rgba(var(--prep-accent-rgb), .19), rgba(3, 10, 24, .9)); box-shadow: 0 0 22px rgba(var(--prep-accent-rgb), .2), inset 0 0 36px rgba(var(--prep-accent-rgb), .13); }.prep-card-top { display: flex; align-items: center; justify-content: space-between; min-width: 0; }.prep-card-marker { overflow: hidden; color: var(--prep-accent); font: 8px ui-monospace, "MiSans", monospace; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }.prep-card-index { color: var(--prep-accent); }
#prep-wrap.prep-shell .prep-lv { border-color: rgba(130, 160, 211, .32); }.prep-lv:hover, .prep-lv.sel { border-color: var(--prep-accent); }.prep-lv.sel { color: #fff; background: rgba(var(--prep-accent-rgb), .2); box-shadow: inset 0 0 16px rgba(var(--prep-accent-rgb), .13), 0 0 11px rgba(var(--prep-accent-rgb), .18); }.prep-lv.sel .prep-level-icon { color: var(--prep-accent); filter: drop-shadow(0 0 5px rgba(var(--prep-accent-rgb), .6)); }
#prep-wrap.prep-shell .prep-diffbtn { border-color: rgba(130, 160, 211, .32); }.prep-diffbtn:hover, .prep-diffbtn.sel { border-color: var(--prep-accent); }.prep-diffbtn.sel { background: rgba(var(--prep-accent-rgb), .16); box-shadow: inset 0 0 18px rgba(var(--prep-accent-rgb), .12), 0 0 12px rgba(var(--prep-accent-rgb), .2); }.prep-diff-icon { color: var(--prep-accent); }.prep-diffbtn.sel .prep-diffname { color: var(--prep-accent); }
#prep-wrap.prep-shell .prep-bottom { border-top-color: rgba(var(--prep-accent-rgb), .36); }.prep-bottom-note { color: var(--prep-accent); opacity: .75; }.prep-go { color: #f4edff; border-color: var(--prep-accent); background: linear-gradient(135deg, rgba(var(--prep-accent-rgb), .45), rgba(var(--prep-accent-rgb), .16)); box-shadow: 0 0 18px rgba(var(--prep-accent-rgb), .18), inset 0 0 20px rgba(var(--prep-accent-rgb), .16); }.prep-go:hover { background: linear-gradient(135deg, rgba(var(--prep-accent-rgb), .64), rgba(var(--prep-accent-rgb), .25)); }.prep-bottom .prep-back:hover, .prep-bottom .prep-back:focus-visible { border-color: var(--prep-accent); box-shadow: 0 0 16px rgba(var(--prep-accent-rgb), .15); }
.prep-mode-endless .prep-go { color: #e4fcff; }.prep-mode-denial .prep-go { color: #fff0f2; }

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #prep-wrap.prep-shell { grid-template-rows: auto auto auto auto auto auto; min-height: 100%; }
  #prep-wrap.prep-shell .prep-topbar { grid-template-columns: 1fr auto; align-items: center; min-height: 46px; gap: 6px; }
  .prep-top-back { width: 74px; height: 32px; margin-top: 0; font-size: 9px; }.prep-heading { grid-column: 1 / -1; grid-row: 1; align-items: center !important; text-align: center !important; }.prep-heading-kicker, .prep-heading em { display: none; }.prep-heading strong { font-size: 20px; }.prep-heading small { font-size: 8px; }.prep-command-meta { grid-column: 2; grid-row: 1; gap: 0; min-width: 0; padding-top: 0; font-size: 7px; opacity: .7; }.prep-command-meta > span:not(.prep-command-status) { display: none; }.prep-command-status b, .prep-command-status em { display: none; }
  #prep-wrap.prep-shell .prep-wtitle { font-size: 11px; }.prep-section-code { display: none; }.prep-card-marker { display: none; }.prep-ch { min-height: 128px; }.prep-bottom .prep-go, .prep-bottom .prep-back { min-height: 40px; }
}

/* ---------- C. pointer:coarse 触屏 ---------- */
@media (pointer: coarse) {
  .btn { padding: 12px 24px; }
  .cd-tab { padding: 12px 20px; }
  .cs-row { padding: 12px; }
  .inv-slot { padding: 12px 10px; }
  .hud-menubtn { padding: 0; }
  .st-range { height: 22px; }
  .st-range::-webkit-slider-thumb { width: 22px; height: 22px; }
  .st-range::-moz-range-thumb { width: 22px; height: 22px; border: none; }
  /* 自绘滚动条与浏览器手势冲突 → 走原生触摸滚动，隐藏 Canvas 条 */
  .cd-body, .st-body, .hp-body, .sh-body, .cs-list, .hp-wrap .hp-body,
  .cd-body-content, .st-body-content, .hp-body-content, .sh-body-content, .cs-list-content {
    overflow: hidden;
    touch-action: none;
  }
  /* 整屏级手指滚动：屏幕内容超高时（safe center = 能放下时居中、放不下时顶部对齐不裁头） */
  .screen {
    overflow: hidden;
    touch-action: none;
    align-items: safe center;
  }
  /* 战前准备 / 地图编辑器：同样原生手指滚动（隐藏自绘滚动条，触控拖 8px 滑块不可用） */
  .prep-wrap { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  #prep-scroll-canvas { display: none !important; }
  .me-tools, .me-side { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  .scroll-canvas { display: none !important; }
  #app { touch-action: manipulation; }
  /* 拉拽刷新/边缘回弹与游戏手势冲突 → 关闭（仅影响滚动容器，桌面零变化） */
  body { overscroll-behavior: none; }
  /* 局内弹窗挂 body，不在 .screen/.hud 缩放范围内；暂停层保留参考图的
     中央构图，矮屏时通过整体缩放与滚动兜底保证四项操作可达。 */
  body > .modal-backdrop {
    transform: scale(0.8);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    align-items: safe center;
  }
  .pause-panel { width: min(520px, calc(100vw - 24px)); min-height: 0; height: 450px; padding: 14px 0; }
  .pause-content { transform: translateY(-20px); }
  .pause-radar { width: min(600px, 88vh); }
  .pause-title { font-size: clamp(30px, 7vw, 44px); letter-spacing: .13em; }
  .pause-eyebrow { font-size: 8px; gap: 6px; letter-spacing: .12em; }
  .pause-status { font-size: 13px; margin-top: 8px; }
  .pause-divider { margin: 12px 0 13px; }
  .pause-actions { width: min(330px, calc(100vw - 46px)); gap: 7px; }
  .pause-btn { height: 51px; padding: 0 13px; grid-template-columns: 24px 27px minmax(0, 1fr) 14px; }
  .pause-btn-label { font-size: 17px; letter-spacing: .16em; }
  .pause-btn-icon { width: 22px; height: 22px; }
  .pause-btn-icon svg { width: 21px; height: 21px; }
  .pause-footer { width: min(330px, calc(100vw - 46px)); margin-top: 12px; font-size: 8px; }
  .choice-panel { padding: 18px 14px; }
  .choice-card { padding: 12px 10px; gap: 6px; }
  .choice-icon svg { width: 32px; height: 32px; }
  .choice-title { margin-bottom: 14px; }
}

/* ---------- D. 窄屏/手机横屏 HUD 紧凑（主视野 >70%） ---------- */
@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .hpbar { width: clamp(130px, 30vw, 220px); height: 12px; }
  .hpbar.thin { width: 110px; }
  .shieldbar, .heatbar { width: clamp(130px, 30vw, 220px); }
  .heatlabel { display: none; }
  .pcard-icon svg { width: 20px; height: 20px; }
  .buff-slot { width: 22px; height: 22px; }
  .mcard-status { display: none; }                  /* 队友卡极简：只留名字+细血条 */
  .hud-mmwrap { padding: 5px; max-width: 152px; }   /* 星辉/关卡文本不撑破小地图列宽 */
  .mm-star-row { white-space: nowrap; overflow: hidden; max-width: 100%; }
  .mm-level { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #hud-minimap { width: 132px; height: 88px; }
  .mm-star-row { font-size: 12px; }
  .mm-level { font-size: 12px; }
  .skill-slot { width: 46px; height: 46px; }
  .weapon-card { max-width: 34vw; }
  .weapon-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hud-deck { gap: 6px; }
  .toast-stack { bottom: calc(60px + var(--sa-b)); }
  .bosswrap { top: calc(54px + var(--sa-t)); }
  .hud-objective { font-size: 12px; padding: 4px 10px; max-width: 60vw; overflow: hidden; }
  .hud-objective-text { max-width: 100%; }
  .hud-objective-meter { margin-top: 3px; }
  .denial-wrap { gap: 8px; padding: 6px 10px; max-width: 94vw; flex-wrap: wrap; justify-content: center; }
  /* 字号底线（正文类 ≥12px，装饰角标放宽到 10px） */
  .hptext, .mcard-name, .mm-level, .bossbar .boss-name { font-size: 12px; }
  .skill-key, .buff-t { font-size: 10px; }
  .revive-t { font-size: 10px; }
}

/* ---------- E. 窄横屏 HUD 紧凑（≤700px / 矮横屏：小手机横放；四角互不遮挡） ---------- */
@media (max-width: 700px), (orientation: landscape) and (max-height: 420px) and (pointer: coarse) {
  .hud-card { padding: 8px 10px; gap: 8px; }
  .hud-pcard { left: calc(10px + var(--sa-l)); top: calc(10px + var(--sa-t)); }
  .hud-mmwrap { top: calc(10px + var(--sa-t)); right: calc(10px + var(--sa-r)); }
  .hpbar { width: clamp(120px, 26vw, 200px); height: 12px; }
  .hpbar.thin { width: clamp(90px, 20vw, 150px); }
  .shieldbar, .heatbar { width: clamp(120px, 26vw, 200px); }
  .hud-objective { top: calc(10px + var(--sa-t)); max-width: 46vw; padding: 4px 8px; }
  /* Boss 条/防卫面板下移：避开左上玩家卡（≤700px 时 pcard 高 ~90px） */
  .bosswrap { top: calc(100px + var(--sa-t)); width: min(440px, 80vw); }
  .denial-wrap { top: calc(100px + var(--sa-t)); }
  .denial-wrap:not([hidden]) ~ .bosswrap { top: calc(148px + var(--sa-t)); }
  .hud-deck { bottom: calc(12px + var(--sa-b)); gap: 6px; }
  .skill-slot { width: 44px; height: 44px; }
  .weapon-card { max-width: 30vw; padding: 6px 10px; }
  .weapon-name { font-size: 12px; }
  .toast-stack { right: calc(10px + var(--sa-r)); bottom: calc(58px + var(--sa-b)); }
  .hud-menubtn { top: calc(14px + var(--sa-t)); left: calc(230px + var(--sa-l)); width: 54px; height: 54px; }
}

/* ---------- E2. 极矮横屏（浏览器地址栏可见时布局视口 ~287px，内容需整屏放下） ---------- */
@media (orientation: landscape) and (max-height: 380px) and (pointer: coarse) {
  .ms-wrap { gap: 8px; padding: 8px; }
  .ms-card { padding: 10px 8px; gap: 6px; }
  .ms-name { font-size: 14px; letter-spacing: .1em; }
  .ms-progress { font-size: 19px; padding: 3px 8px; margin-top: 0; }
  .ms-cards { gap: 8px; }
}

/* ---------- F. 竖屏 + 触屏：强制横屏引导 ----------
   media 块必须在基础规则之后（同特异性后者胜，先写 none 会被 media 覆盖） */
.rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(5, 7, 15, .96);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--white);
  letter-spacing: .14em;
}
.rotate-overlay svg {
  width: 64px; height: 64px;
  color: var(--accent2);
  animation: rotateHint 2.2s ease-in-out infinite;
}
@keyframes rotateHint {
  0%, 20% { transform: rotate(0deg); }
  55%, 80% { transform: rotate(90deg); }
  100% { transform: rotate(90deg); }
}
.rotate-overlay .ro-title { font-size: clamp(18px, 2vw + 14px, 24px); }
.rotate-overlay .ro-sub { font-size: 14px; color: #9db8dd; }

@media (orientation: portrait) and (pointer: coarse) {
  .rotate-overlay { display: flex; }
}

/* ================================================================
   v1.6.0 移动端触控（画布手势 / 虚拟摇杆 / 触控按钮组）
   PC 端（≥768px / 鼠标）零影响：全部默认隐藏，仅 pointer:coarse 激活
   ================================================================ */

/* 游戏画布禁止浏览器手势（滚动/双指缩放），交给游戏内触控层 */
#stage, #battle-canvas { touch-action: none; }

/* 固定虚拟摇杆（input.js 创建；常驻左下角半透明，激活时 .on 高亮） */
.touch-stick {
  display: none;
  position: fixed;
  left: calc(28px + var(--sa-l));
  bottom: calc(28px + var(--sa-b));
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1.5px solid rgba(143, 214, 255, .3);
  background: radial-gradient(circle, rgba(76, 167, 255, .1), rgba(76, 167, 255, .02));
  box-shadow: 0 0 26px rgba(76, 167, 255, .12);
  z-index: 55;                 /* HUD(z2) 之上、暂停菜单(z60)之下（同在 #app 内） */
  pointer-events: none;
  opacity: .45;
  transition: opacity .12s, border-color .12s, box-shadow .12s;
}
.touch-stick.on {
  opacity: 1;
  border-color: rgba(143, 214, 255, .6);
  box-shadow: 0 0 30px rgba(76, 167, 255, .28);
}
.touch-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(143, 214, 255, .55);
  box-shadow: 0 0 16px rgba(143, 214, 255, .55);
}

@media (pointer: coarse) {
  .battle-root > .touch-stick { display: block; }
  .skill-slot { cursor: pointer; }
}

/* ================================================================
   v1.6.8 移动端原生感收口
   - 安全区作为真实边距参与布局，避免刘海/手势条压住内容
   - 菜单与战前卡片使用更大的圆角、稳定的 48px 触控行高
   - HUD 固定控件分区更明确：左下移动、右下动作、底部中央武器
   ================================================================ */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .screen:not(.battle-root) {
    padding: max(8px, calc(8px + var(--sa-t))) max(8px, calc(8px + var(--sa-r)))
      max(8px, calc(8px + var(--sa-b))) max(8px, calc(8px + var(--sa-l)));
  }

  .menu-root {
    justify-content: flex-start;
    padding-top: max(18px, calc(18px + var(--sa-t)));
    padding-bottom: max(16px, calc(16px + var(--sa-b)));
  }
  .menu-title {
    margin-top: clamp(6px, 3vh, 26px);
    margin-bottom: clamp(18px, 5vh, 38px);
    text-shadow: 0 0 18px rgba(76, 167, 255, .46);
  }
  .menu-nav {
    width: min(460px, calc(100vw - 24px - var(--sa-l) - var(--sa-r)));
    gap: 10px;
  }
  .menu-nav .btn {
    min-height: 56px;
    padding: 12px 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(18, 34, 60, .7), rgba(10, 18, 36, .55));
    box-shadow: 0 5px 18px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .06);
  }
  .menu-nav .btn:active { transform: scale(.96); }

  .screen-panel, .panel, .cs-detail, .prep-class, .prep-weapons {
    border-radius: 14px;
  }
  .cs-row, .prep-wrow, .prep-ch, .prep-diffbtn {
    min-height: 48px;
    border-radius: 12px;
  }
}

@media (pointer: coarse) {
  button, .btn, .skill-slot {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .touch-stick {
    left: max(16px, calc(18px + var(--sa-l)));
    bottom: max(16px, calc(18px + var(--sa-b)));
    width: 128px;
    height: 128px;
    border-width: 2px;
    opacity: .58;
    background:
      radial-gradient(circle at center, rgba(143, 214, 255, .16) 0 2px, transparent 3px),
      radial-gradient(circle, rgba(76, 167, 255, .13), rgba(76, 167, 255, .025) 68%, transparent 69%);
    box-shadow: 0 0 0 7px rgba(76, 167, 255, .045), 0 0 28px rgba(76, 167, 255, .16);
  }
  .touch-stick::before, .touch-stick::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(143, 214, 255, .18);
    border-radius: 50%;
  }
  .touch-stick::after {
    inset: 61px;
    border: 0;
    background: rgba(238, 244, 255, .4);
    box-shadow: 0 0 8px rgba(143, 214, 255, .65);
  }
  .touch-stick-knob {
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    border: 1px solid rgba(238, 244, 255, .38);
    background: radial-gradient(circle at 36% 32%, rgba(238, 244, 255, .72), rgba(143, 214, 255, .44) 48%, rgba(76, 167, 255, .24));
  }

  .hud-deck {
    bottom: max(8px, calc(10px + var(--sa-b)));
    gap: 8px;
  }
  .weapon-card {
    max-width: min(34vw, 190px);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(18, 34, 60, .82), rgba(10, 18, 36, .72));
  }
  .weapon-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (pointer: coarse) and (max-width: 700px), (pointer: coarse) and (orientation: landscape) and (max-height: 420px) {
  .hud-pcard { max-width: min(44vw, 270px); }
  .hud-pcard .pcard-main { min-width: 0; }
  .pcard-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hud-objective { max-width: min(48vw, 320px); }
}

/* v1.6.9：同一 DOM 的宽屏重排。宽屏把统计/卡片/建造信息铺开，
   窄屏媒体块再收束为单列；不复制 Mobile 页面，也不改变桌面视觉语言。 */
@media (min-width: 1100px) {
  .achv-wrap { padding: 28px 5vw; }
  .achv-body { width: min(1280px, 90vw); }
  .achv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .achv-stats-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cd-body { width: min(1180px, 90vw); max-height: 72vh; }
  .cd-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cd-wgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hud-pcard { max-width: 310px; }
  .hud-mmwrap { right: calc(24px + var(--sa-r)); }
  .hud-deck { left: 50%; transform: translateX(-50%); bottom: calc(18px + var(--sa-b)); }
  .denial-build { width: min(430px, 32vw); right: calc(24px + var(--sa-r)); bottom: calc(96px + var(--sa-b)); }
  .denial-build-list-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .db-cat { grid-column: 1 / -1; }
}

/* 防卫建造菜单在窄屏占用底部安全区，横屏仍保留两列空间。 */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .denial-wrap { top: calc(8px + var(--sa-t)); left: calc(8px + var(--sa-l)); right: calc(8px + var(--sa-r)); transform: none; justify-content: space-between; gap: 6px; padding: 6px 8px; }
  .denial-wrap .denial-core .bar { width: clamp(70px, 20vw, 130px); }
  .denial-build { left: calc(8px + var(--sa-l)); right: calc(8px + var(--sa-r)); bottom: calc(74px + var(--sa-b)); width: auto; max-height: min(56vh, 420px); }
  .denial-build-list-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .db-cat { grid-column: 1 / -1; }
  .denial-build-btn { min-height: 48px; padding: 8px; }
  .screen-title { font-size: clamp(20px, 5vw, 28px); margin-bottom: 14px; }
  .cd-tabs { gap: 8px; flex-wrap: wrap; }
  .cd-tab { min-height: 48px; padding: 12px 16px; }
  .cd-grid, .achv-grid, .achv-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cd-card { min-height: 48px; padding: 12px 10px; }
  .st-row, .hp-row, .setting-row { min-height: 48px; }
  .cs-body, .prep-body { width: min(96vw, 760px); gap: 14px; }
  .cs-list, .cs-detail, .prep-class, .prep-weapons { width: 100%; }
  .hud-deck { left: calc(150px + var(--sa-l)); right: calc(150px + var(--sa-r)); justify-content: center; }
}

/* ================================================================
   v1.6.10 移动端原生横屏 UI
   - 页面使用“顶栏 / 可用内容区 / 固定操作栏”应用壳，不再缩放桌面长页
   - 职业选择左右分区；战前准备把机体武器与关卡配置并排呈现
   - 所有大面板占满剩余空间，取消 62/66vh 等桌面固定高度
   ================================================================ */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .screen:not(.battle-root) {
    box-sizing: border-box;
    overflow: hidden;
    align-items: stretch;
    justify-content: stretch;
  }
  /* 触屏正文靠直接拖拽，不显示仅 8px 宽的桌面 Canvas 滑块。 */
  #scroll-canvas, #prep-scroll-canvas { display: none !important; }

  /* 主菜单保持 PC 的居中构图，但把卡片视觉宽度收至约一半；触控热区仍 >=44px。 */
  .menu-root {
    align-items: center;
    justify-content: center;
    padding-top: max(8px, var(--sa-t));
    padding-bottom: max(8px, var(--sa-b));
  }
  .menu-title {
    margin: 0 0 clamp(10px, 3vh, 18px);
    font-size: clamp(20px, 4.2vw, 28px);
    letter-spacing: .24em;
  }
  .menu-nav {
    grid-template-columns: repeat(2, 132px);
    width: max-content;
    max-width: calc(100vw - 24px - var(--sa-l) - var(--sa-r));
    gap: 7px 9px;
    margin-inline: auto;
  }
  .menu-nav .btn {
    width: 132px;
    min-height: 45px;
    padding: 6px 8px;
    border-radius: 9px;
    font-size: 13px;
  }
  .menu-nav .btn:nth-child(7) { grid-column: 1 / -1; justify-self: center; }
  .menu-nav-ico svg { width: 14px; height: 14px; }

  /* 图鉴 / 商店 / 成就 / 设置 / 帮助：动态占满可用视口，而不是固定 vh 面板。 */
  .cd-wrap, .sh-wrap, .achv-wrap, .st-wrap, .hp-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 4px 6px;
    gap: 6px;
    align-items: stretch;
    justify-items: stretch;
  }
  .cd-wrap, .sh-wrap, .achv-wrap {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .st-wrap, .hp-wrap {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .cd-wrap > .screen-title, .achv-wrap > .screen-title,
  .st-wrap > .screen-title, .hp-wrap > .screen-title,
  .sh-head .screen-title {
    margin: 0;
    font-size: clamp(18px, 4vw, 24px);
    line-height: 1.1;
  }
  .sh-head { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .cd-tabs, .sh-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: min(100%, 720px);
    justify-self: center;
    gap: 5px;
  }
  .cd-tab, .sh-tab {
    min-height: 38px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 12px;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  .cd-body, .sh-body, .achv-body, .st-body, .hp-body {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    min-height: 0;
    box-sizing: border-box;
    padding: 8px 10px;
  }
  .cd-wrap > .btn:last-child, .sh-wrap > .btn:last-child,
  .achv-wrap > .btn:last-child, .st-wrap > .btn:last-child,
  .hp-wrap > .btn:last-child {
    justify-self: center;
    min-height: 40px;
    padding: 6px 22px;
    font-size: 13px;
  }
  .cd-grid, .achv-grid, .achv-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .cd-card { padding: 8px 6px; gap: 3px; }
  .achv-head { padding: 6px 8px 4px; }
  .achv-sec { margin: 4px 0 8px; }
  .achv-sec-title { padding: 4px 8px; }
  .achv-badge { width: 40px; height: 40px; margin-bottom: 3px; }
  .st-body-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; }
  .st-section { grid-column: 1 / -1; margin: 5px 0 1px; }
  .st-row { min-width: 0; padding: 3px 2px; }
  .st-label { width: 88px; font-size: 12px; }
  .st-hint { font-size: 10px; }
  .hp-body-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .hp-section:first-child { grid-column: 1 / -1; }
  .hp-title { font-size: 14px; margin-bottom: 5px; }
  .hp-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
  .hp-p { font-size: 12px; line-height: 1.55; }

  /* 职业选择：固定顶栏与底栏，中间左右分区；仅职业列表自身滚动。 */
  .screen > .cs-wrap {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    gap: 6px;
    padding: 3px 5px;
    margin: 0;
  }
  .cs-head { justify-content: center; gap: 14px; min-height: 30px; }
  .cs-head .screen-title { margin: 0; font-size: clamp(18px, 4vw, 24px); }
  .cs-body {
    display: grid;
    grid-template-columns: minmax(220px, 41%) minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 7px;
    align-items: stretch;
  }
  .cs-list, .cs-detail {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    box-sizing: border-box;
    overflow: hidden;
  }
  .cs-list-content { gap: 3px; padding: 5px; }
  .cs-row {
    grid-template-columns: minmax(66px, .8fr) 1fr;
    min-height: 40px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 12px;
  }
  .cs-row-state { text-align: right; }
  .cs-detail { padding: 8px 10px; gap: 4px; }
  .cs-detail-head { margin: 0; padding-left: 8px; }
  .cs-detail-name { font-size: 16px; }
  .cs-detail-tag { font-size: 10px; }
  .cs-detail-preview { height: 70px; }
  .cs-stat, .cs-wpn, .cs-sk { font-size: 11px; gap: 6px; line-height: 1.25; }
  .cs-stat .k, .cs-wpn .k, .cs-sk .k { min-width: 66px; }
  .cs-bottom {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.25fr) auto auto;
    width: 100%;
    gap: 6px;
    align-items: center;
  }
  .cs-mate { min-width: 0; gap: 4px; font-size: 11px; white-space: nowrap; }
  .cs-mate select { min-width: 0; width: 100%; min-height: 40px; padding: 4px 6px; font-size: 11px; }
  .cs-bottom .btn { min-height: 40px; padding: 6px 12px; font-size: 12px; white-space: nowrap; }

  /* 战前准备：左侧机体+2x2武器，右侧章节/关卡/难度，底部操作始终可见。 */
  .screen > .prep-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #prep-wrap {
    display: grid;
    grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "prep-title prep-title"
      "prep-loadout prep-chapters"
      "prep-loadout prep-levels"
      "prep-loadout prep-diff"
      "prep-actions prep-actions";
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    gap: 5px 7px;
    padding: 2px 4px;
    margin: 0;
    transform: none !important;
  }
  #prep-wrap > .screen-title { grid-area: prep-title; margin: 0; font-size: clamp(18px, 4vw, 24px); line-height: 1.05; }
  #prep-wrap > .prep-body { grid-area: prep-loadout; }
  #prep-wrap > .prep-chapters { grid-area: prep-chapters; }
  #prep-wrap > .prep-levels { grid-area: prep-levels; }
  #prep-wrap > .prep-diff { grid-area: prep-diff; }
  #prep-wrap > .prep-bottom { grid-area: prep-actions; }
  .prep-body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 5px;
  }
  .prep-class, .prep-weapons {
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    margin: 0;
  }
  .prep-class { padding: 7px 9px; gap: 2px; }
  .prep-cname { font-size: 16px; }
  .prep-ctag { margin-bottom: 2px; font-size: 10px; }
  .prep-cstat, .prep-cskill { font-size: 10px; line-height: 1.3; }
  .prep-weapons { display: flex; flex-direction: column; padding: 6px; overflow: hidden; }
  .prep-wtitle { margin-bottom: 4px; font-size: 11px; letter-spacing: .1em; }
  .prep-wlist { flex: 1; min-height: 0; overflow: hidden; }
  .prep-wlist-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .prep-wrow {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 42px;
    padding: 4px 5px;
    gap: 5px;
    border-radius: 8px;
  }
  .prep-wicon { width: 27px; height: 27px; border-radius: 6px; }
  .prep-wicon svg { width: 20px; height: 20px; }
  .prep-wname { font-size: 10px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prep-wname em { display: none; }
  .prep-wdesc, .prep-wstate { display: none; }
  .prep-chapters, .prep-levels, .prep-diff {
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 5px 7px;
    overflow: hidden;
  }
  .prep-chgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 3px; }
  .prep-ch {
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 4px 5px;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 7px;
  }
  .prep-chart, .prep-chdesc, .prep-chprog { display: none; }
  .prep-chinfo { min-width: 0; }
  .prep-chname { font-size: 11px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prep-lvgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 3px; }
  .prep-lv { justify-content: center; min-width: 0; min-height: 34px; padding: 3px 4px; font-size: 10px; text-align: center; }
  .prep-lv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prep-diffgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 3px; }
  .prep-diffbtn { min-width: 0; min-height: 38px; align-items: center; justify-content: center; padding: 4px; text-align: center; }
  .prep-diffname { font-size: 11px; }
  .prep-diffdesc { display: none; }
  .prep-bottom { justify-content: center; gap: 8px; }
  .prep-bottom .btn { min-height: 40px; padding: 6px 24px; font-size: 12px; }
}
/* 图形化 UI 编辑器生成的运行时点击判定区域。默认完全透明，show-label 仅用于明确可见按钮。 */
.ui-editor-hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  color: #dff6ff;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.ui-editor-hotspot.show-label {
  border: 1px solid rgba(143, 214, 255, .55);
  border-radius: 8px;
  background: rgba(7, 20, 38, .72);
  box-shadow: 0 0 16px rgba(76, 167, 255, .2);
}

/* 固定视口特效层：与页面布局解耦，尤其避免移动端页面容器的 transform 影响坐标。 */
.hud-viewport-fx {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.hud-viewport-fx > .dmg-layer,
.hud-viewport-fx > .lowhp { position: absolute; inset: 0; width: 100%; height: 100%; }
/* ================================================================
   v1.7 · UIre：Resource Bootstrap loading screen
   进入游戏后的第一屏只负责真实资源预加载；完成后交给 Boot / Access / Link。
   ================================================================ */
.sf-loading {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  color: #dbeaff;
  background:
    radial-gradient(circle at 50% 44%, rgba(13, 65, 133, .23), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(7, 40, 85, .17), transparent 48%),
    #020711;
  font-family: ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
}
.sf-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 36%, rgba(0, 2, 10, .58) 100%);
}
.loading-dynamics { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: .95; pointer-events: none; mix-blend-mode: screen; }
.loading-frame { position: absolute; inset: 19px; z-index: 7; border: 1px solid rgba(74, 135, 255, .17); pointer-events: none; }
.loading-frame::before,
.loading-frame::after,
.loading-frame i { content: ''; position: absolute; width: 42px; height: 42px; border-color: #4c87ff; border-style: solid; opacity: .92; }
.loading-frame::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.loading-frame::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.loading-frame i:nth-child(1) { right: -1px; top: -1px; border-width: 2px 2px 0 0; }
.loading-frame i:nth-child(2) { left: -1px; bottom: -1px; border-width: 0 0 2px 2px; }
.loading-frame i:nth-child(3) { left: 45%; top: -1px; width: 80px; height: 7px; border-width: 2px 0 0; opacity: .45; }
.loading-frame i:nth-child(4) { right: 7%; bottom: -1px; width: 78px; height: 7px; border-width: 0 0 2px; opacity: .45; }
.loading-topline { position: absolute; top: 2.55%; right: 4.8%; left: 4.8%; z-index: 6; display: flex; align-items: center; gap: clamp(18px, 2.3vw, 38px); color: rgba(116, 166, 232, .78); font: 10px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .12em; white-space: nowrap; }
.loading-topline span { color: #28adf4; }
.loading-topline b { margin-left: auto; font-weight: 500; }
.loading-topline em { font-style: normal; color: rgba(156, 190, 239, .64); }
.loading-terminal { position: absolute; top: 31%; left: 50%; z-index: 6; width: min(670px, 52vw); translate: -50% 0; text-align: center; }
.loading-kicker { color: #25b8ff; font-size: clamp(9px, .65vw, 12px); letter-spacing: .28em; }
.loading-terminal h1 { margin: 23px 0 12px; color: #e9f5ff; font: 600 clamp(29px, 3.1vw, 58px)/1 "Arial Narrow", Bahnschrift, system-ui, "MiSans", sans-serif; letter-spacing: .19em; text-shadow: 0 0 18px rgba(106, 184, 255, .3); }
.loading-terminal p { margin: 0; color: rgba(153, 192, 238, .73); font-size: clamp(10px, .72vw, 13px); letter-spacing: .15em; }
.loading-progress-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; margin-top: 44px; color: rgba(150, 188, 237, .72); font-size: 9px; letter-spacing: .11em; text-align: left; }
.loading-percent { min-width: 53px; color: #e6f4ff; font: 600 18px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .03em; }
.loading-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loading-loaded { color: #55c7ff; font-weight: 500; white-space: nowrap; }
.loading-progress { position: relative; height: 7px; margin-top: 13px; overflow: hidden; border: 1px solid rgba(75, 145, 255, .55); background: rgba(4, 13, 32, .72); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); }
.loading-progress > i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #098df8, #2e4ff9 45%, #3816b8 76%, #b213e1); box-shadow: 0 0 17px rgba(40, 124, 255, .72); transition: width .16s ease-out; }
.loading-progress > b { position: absolute; inset: 0 auto 0 0; width: 100%; opacity: .2; background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(178, 214, 255, .44) 27px 28px); pointer-events: none; }
.loading-current { min-height: 28px; margin-top: 16px; color: #4ccaff; font-size: 10px; letter-spacing: .12em; text-align: left; }
.loading-stream { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 26px; padding-top: 15px; border-top: 1px solid rgba(77, 145, 239, .26); }
.loading-stream span { display: flex; flex-direction: column; gap: 7px; min-width: 0; text-align: left; }
.loading-stream b { color: rgba(128, 169, 224, .56); font-size: 8px; font-weight: 500; letter-spacing: .14em; }
.loading-stream em { color: #4bb5ff; font-size: 10px; font-style: normal; letter-spacing: .11em; }
.loading-stream-good em { color: #4de0c1; }
.loading-stream-neutral em { color: rgba(138, 177, 230, .52); }
.loading-stream-active em { animation: loadingStatusBlink 1.1s ease-in-out infinite; }
@keyframes loadingStatusBlink { 0%, 100% { opacity: .44; } 50% { opacity: 1; } }
.loading-core-label { position: absolute; top: 70.5%; left: 50%; z-index: 6; translate: -50% 0; color: rgba(113, 171, 236, .58); font-size: 9px; letter-spacing: .24em; white-space: nowrap; }
.loading-core-label span { color: #4de0c1; }
.loading-side { position: absolute; top: 33%; right: 7.4%; z-index: 6; display: grid; grid-template-columns: auto auto; gap: 15px 25px; min-width: 230px; padding: 16px 18px; border-left: 1px solid rgba(69, 134, 232, .38); border-top: 1px solid rgba(69, 134, 232, .18); color: rgba(125, 168, 224, .64); font-size: 8px; letter-spacing: .12em; }
.loading-side b { color: #54bfff; font-weight: 500; text-align: right; }
.loading-side i { grid-column: 1 / -1; height: 1px; background: rgba(73, 142, 238, .2); }
.loading-side .loading-security { color: #4ee4c4; }
.loading-footer { position: absolute; right: 4.8%; bottom: 2.8%; left: 4.5%; z-index: 7; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); color: rgba(107, 139, 192, .68); font: 9px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .1em; white-space: nowrap; }
.loading-footer span:first-child { color: #22c2f7; letter-spacing: .16em; }
.loading-footer i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.loading-footer span:last-child { margin-left: auto; color: rgba(146, 179, 235, .78); }

/* ================================================================
   v1.7 · UIre：Boot / Access / Link 启动页
   中心 logo 使用 Reference image 的裁切素材，其余元素全部由 DOM/CSS/
   Canvas 构成：日志、遥测、指标、音频频谱、网格和扫描轨道持续更新。
   ================================================================ */
.sf-boot {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  color: #dbeaff;
  background:
    radial-gradient(circle at 50% 39%, rgba(14, 67, 128, .2), transparent 31%),
    radial-gradient(circle at 50% 100%, rgba(7, 39, 85, .16), transparent 45%),
    #020711;
  font-family: ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
}
.sf-boot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 2, 10, .45) 100%);
}
.boot-dynamics {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .95;
  mix-blend-mode: screen;
}
.boot-frame {
  position: absolute;
  inset: 19px;
  z-index: 7;
  border: 1px solid rgba(74, 135, 255, .17);
  pointer-events: none;
}
.boot-frame::before,
.boot-frame::after,
.boot-frame i {
  content: '';
  position: absolute;
  width: 42px;
  height: 42px;
  border-color: #4c87ff;
  border-style: solid;
  opacity: .92;
}
.boot-frame::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.boot-frame::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.boot-frame i:nth-child(1) { right: -1px; top: -1px; border-width: 2px 2px 0 0; }
.boot-frame i:nth-child(2) { left: -1px; bottom: -1px; border-width: 0 0 2px 2px; }
.boot-frame i:nth-child(3) { left: 45%; top: -1px; width: 80px; height: 7px; border-width: 2px 0 0; opacity: .45; }
.boot-frame i:nth-child(4) { right: 7%; bottom: -1px; width: 78px; height: 7px; border-width: 0 0 2px; opacity: .45; }
.boot-meta-top {
  position: absolute;
  top: 2.55%;
  right: 4.8%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.3vw, 38px);
  color: rgba(116, 166, 232, .78);
  font: 10px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
  letter-spacing: .12em;
  white-space: nowrap;
}
.boot-feed {
  position: absolute;
  top: 5.7%;
  left: 4.8%;
  z-index: 6;
  width: min(420px, 28vw);
  color: rgba(142, 180, 229, .72);
  font: clamp(9px, .62vw, 11px)/1.55 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
  letter-spacing: .045em;
}
.boot-feed-head,
.boot-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #29a9f8;
  letter-spacing: .2em;
  white-space: nowrap;
}
.boot-feed-head b,
.boot-panel-head b {
  color: #5ee5c1;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
}
.boot-feed-source { margin-top: 20px; color: rgba(184, 208, 241, .7); }
.boot-feed-command { margin-top: 4px; color: rgba(184, 208, 241, .82); }
.boot-feed-lines {
  height: 300px;
  margin-top: 13px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 0 88%, transparent 100%);
}
.boot-feed-lines > span {
  display: block;
  min-height: 20px;
  white-space: pre-wrap;
}
.boot-feed-lines b { display: inline-block; width: 45px; color: #5b9ff1; font-weight: 500; }
.boot-feed-lines em { color: rgba(184, 208, 241, .74); font-style: normal; }
.boot-feed-lines strong { color: #42c7ff; font-weight: 500; }
.boot-tone-good strong { color: #38e7c3; }
.boot-tone-bright em { color: #e3efff; }
.boot-tone-accent strong { color: #2aa9ff; }
.boot-tone-neutral strong { color: rgba(181, 208, 239, .74); }
.boot-telemetry {
  position: absolute;
  top: 6.7%;
  right: 4%;
  z-index: 4;
  box-sizing: border-box;
  width: min(320px, 22vw);
  min-height: 414px;
  padding: 17px 18px 16px;
  overflow: hidden;
  background: rgba(2, 9, 22, .69);
  border: 1px solid rgba(74, 135, 255, .48);
  clip-path: polygon(0 15px, 15px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px));
  box-shadow: inset 0 0 22px rgba(42, 121, 225, .06), 0 0 30px rgba(21, 82, 172, .08);
  color: rgba(137, 176, 228, .78);
  font: 9px/1.25 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
  letter-spacing: .07em;
}
.boot-panel-head { color: #a8c5ec; font-size: 10px; letter-spacing: .14em; }
.boot-panel-head b { display: flex; align-items: center; gap: 6px; color: #42c9ff; }
.boot-panel-head b i,
.boot-online i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.boot-panel-head b i { animation: bootTelemetryPulse 1.8s ease-in-out infinite; }
@keyframes bootTelemetryPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; box-shadow: 0 0 16px currentColor; } }
.boot-panel-head em { font-style: normal; }
.boot-panel-rule { height: 1px; margin-top: 14px; background: rgba(100, 155, 231, .24); }
.boot-readiness-row { position: relative; display: flex; align-items: center; gap: 15px; margin-top: 21px; }
.boot-readiness {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(#208eff 0 var(--readiness, 87%), rgba(45, 78, 131, .25) var(--readiness, 87%) 100%);
  box-shadow: 0 0 16px rgba(38, 134, 255, .18);
}
.boot-readiness::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #030b1b; border: 1px solid rgba(57, 148, 255, .72); }
.boot-readiness::after { content: ''; position: absolute; inset: -5px; border: 1px solid rgba(57, 148, 255, .28); border-radius: 50%; clip-path: polygon(0 0, 42% 0, 42% 7%, 0 7%, 0 100%, 100% 100%, 100% 93%, 0 93%); }
.boot-readiness-value { position: relative; z-index: 1; color: #e5f1ff; font: 20px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: -.05em; }
.boot-readiness-label { align-self: end; margin-bottom: 4px; color: rgba(137, 176, 228, .66); font-size: 8px; letter-spacing: .08em; }
.boot-data-grid { display: grid; grid-template-columns: 1fr auto; gap: 10px 9px; margin-top: 19px; padding-top: 13px; border-top: 1px solid rgba(100, 155, 231, .2); }
.boot-data-grid b { color: #52c4ff; font-weight: 500; text-align: right; }
.boot-data-grid span { color: rgba(137, 176, 228, .68); }
.boot-sector { margin-top: 18px; padding-top: 13px; border-top: 1px solid rgba(100, 155, 231, .2); }
.boot-sector-title { color: #a8c5ec; font-size: 9px; letter-spacing: .13em; }
.boot-sector-map { position: relative; height: 112px; margin-top: 11px; overflow: hidden; border: 1px solid rgba(71, 138, 226, .28); background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(44, 103, 180, .12) 23px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(44, 103, 180, .12) 32px); }
.boot-sector-map::before { content: ''; position: absolute; inset: 16% 12%; border: 1px solid rgba(46, 135, 255, .65); clip-path: polygon(0 54%, 14% 25%, 33% 42%, 48% 8%, 64% 42%, 86% 23%, 100% 54%, 87% 81%, 59% 69%, 41% 92%, 20% 71%); box-shadow: 0 0 10px rgba(46, 135, 255, .22); }
.boot-sector-map i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #4bb7ff; box-shadow: 0 0 8px #4bb7ff; animation: bootNodePulse 2.2s ease-in-out infinite; }
.boot-sector-map i:nth-child(1) { left: 18%; top: 40%; } .boot-sector-map i:nth-child(2) { left: 47%; top: 21%; animation-delay: -.6s; } .boot-sector-map i:nth-child(3) { left: 82%; top: 45%; animation-delay: -.9s; } .boot-sector-map i:nth-child(4) { left: 61%; top: 76%; animation-delay: -1.4s; }
.boot-sector-map b { position: absolute; left: 54%; top: 48%; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #d8eaff; box-shadow: 0 0 0 4px rgba(54, 118, 255, .28), 0 0 15px #388dff; }
@keyframes bootNodePulse { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
.boot-sector-foot { margin-top: 10px; color: rgba(137, 176, 228, .68); text-align: right; }
.boot-sector-foot strong { color: #53d8d1; font-weight: 500; }
.boot-logo {
  position: absolute;
  top: 15.5%;
  left: 50%;
  z-index: 2;
  width: min(770px, 48vw);
  height: min(430px, 45.7vh);
  translate: -50% 0;
  pointer-events: none;
  filter: drop-shadow(0 0 13px rgba(113, 177, 255, .3));
}
.boot-logo-art { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; opacity: .98; }
.boot-logo-art.is-error { opacity: .35; }
.boot-phase,
.boot-detail,
.boot-progress,
.boot-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boot-link-state { position: absolute; top: 63.2%; left: 50%; z-index: 6; translate: -50% 0; color: #1caef8; font: 14px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .26em; white-space: nowrap; text-shadow: 0 0 12px rgba(28, 174, 248, .45); }
.boot-access {
  position: absolute;
  top: 70.6%;
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: min(420px, 30vw);
  height: 74px;
  padding: 0 24px;
  translate: -50% 0;
  appearance: none;
  border: 1px solid rgba(70, 140, 255, .78);
  border-radius: 0;
  clip-path: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px));
  background: linear-gradient(90deg, rgba(4, 15, 40, .78), rgba(4, 18, 46, .42), rgba(4, 15, 40, .78));
  color: #edf6ff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, background .2s, box-shadow .2s;
}
.sf-boot[data-phase="access"] .boot-access { opacity: 1; pointer-events: auto; animation: bootAccessIn .42s ease-out; }
.boot-access:hover,
.boot-access:focus-visible { background: rgba(30, 85, 173, .3); box-shadow: 0 0 25px rgba(45, 128, 255, .22), inset 0 0 18px rgba(64, 142, 255, .1); }
.boot-access:focus-visible { outline: 1px solid #9dd9ff; outline-offset: 5px; }
.boot-access:disabled { cursor: default; }
.boot-access span { color: #5a88ff; font: 12px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .12em; }
.boot-access b { color: #edf6ff; font: 600 17px/1 "Arial Narrow", Bahnschrift, system-ui, "MiSans", sans-serif; letter-spacing: .15em; }
@keyframes bootAccessIn { from { opacity: 0; translate: -50% 8px; } to { opacity: 1; translate: -50% 0; } }
.boot-metrics { position: absolute; top: 58.5%; right: 4.2%; z-index: 6; display: grid; gap: 23px; width: min(250px, 18vw); color: rgba(135, 171, 222, .76); font: 10px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .14em; }
.boot-metrics > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 15px; }
.boot-metrics b { color: #9fbff2; font-weight: 500; text-align: right; }
.boot-signal-bars { display: inline-flex; align-items: end; gap: 3px; height: 18px; margin-left: 4px; grid-column: 2; }
.boot-signal-bars em { display: block; width: 5px; background: #8e6dff; box-shadow: 0 0 8px rgba(142, 109, 255, .42); }
.boot-signal-bars em:nth-child(1) { height: 6px; } .boot-signal-bars em:nth-child(2) { height: 10px; } .boot-signal-bars em:nth-child(3) { height: 14px; } .boot-signal-bars em:nth-child(4) { height: 18px; }
.boot-spectrum { position: absolute; left: 3.5%; bottom: 8.5%; z-index: 6; box-sizing: border-box; width: min(310px, 21vw); height: 118px; padding: 14px 20px 16px; border: 1px solid rgba(61, 123, 222, .5); clip-path: polygon(0 13px, 13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px)); background: rgba(2, 10, 24, .58); }
.boot-spectrum-head { display: flex; justify-content: space-between; color: #92b8e9; font: 9px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .16em; }
.boot-spectrum-head b { color: #4cd7d1; font-weight: 500; }
.boot-spectrum-line { display: flex; align-items: end; gap: 3px; height: 75px; margin-top: 9px; border-bottom: 1px solid rgba(89, 133, 214, .42); }
.boot-spectrum-line i { display: block; flex: 1 1 0; min-width: 2px; height: 5%; background: var(--bar-color, #098df8); box-shadow: 0 0 7px color-mix(in srgb, var(--bar-color, #098df8) 55%, transparent); transition: height .08s linear, opacity .08s linear; }
.boot-footer { position: absolute; right: 4.8%; bottom: 2.8%; left: 4.5%; z-index: 7; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); color: rgba(107, 139, 192, .68); font: 9px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .1em; white-space: nowrap; }
.boot-online { color: #22c2f7; letter-spacing: .16em; }
.boot-online i { margin-right: 8px; color: #16bff1; vertical-align: 1px; }
.boot-separator { color: rgba(99, 140, 211, .38); }
.boot-footer-version { margin-left: auto; color: rgba(146, 179, 235, .78); }

@media (max-width: 1100px), (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .loading-terminal { width: min(670px, 58vw); }
  .loading-side { right: 4%; min-width: 190px; }
  .loading-footer { gap: 12px; letter-spacing: .06em; }
  .boot-feed { width: 31vw; }
  .boot-telemetry { width: 25vw; }
  .boot-logo { width: min(770px, 50vw); }
  .boot-metrics { width: 20vw; }
  .boot-footer { gap: 12px; letter-spacing: .06em; }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .loading-frame { inset: 9px; }
  .loading-topline { top: 2.5%; right: 4%; left: 4%; gap: 10px; font-size: 7px; letter-spacing: .06em; }
  .loading-topline b { display: none; }
  .loading-terminal { top: 28%; width: 82vw; }
  .loading-terminal h1 { margin: 14px 0 8px; font-size: clamp(22px, 5vw, 34px); letter-spacing: .13em; }
  .loading-terminal p { font-size: 8px; letter-spacing: .08em; }
  .loading-progress-row { grid-template-columns: auto 1fr; gap: 8px; margin-top: 24px; font-size: 7px; }
  .loading-loaded { grid-column: 2; }
  .loading-current { margin-top: 10px; font-size: 7px; }
  .loading-stream { gap: 6px; margin-top: 14px; padding-top: 9px; }
  .loading-stream b { font-size: 6px; }
  .loading-stream em { font-size: 7px; }
  .loading-side { top: auto; right: 4%; bottom: 18%; min-width: 0; width: 28vw; padding: 8px; gap: 8px 10px; font-size: 6px; }
  .loading-core-label { top: 65%; font-size: 7px; letter-spacing: .12em; }
  .loading-footer { right: 4%; bottom: 2.5%; left: 4%; gap: 7px; overflow: hidden; font-size: 6px; }
  .loading-footer span:nth-child(2) { display: none; }
  .boot-frame { inset: 9px; }
  .boot-meta-top { top: 2.5%; right: 4%; gap: 10px; font-size: 7px; letter-spacing: .06em; }
  .boot-feed { top: 6%; left: 4%; width: 43vw; font-size: 7px; }
  .boot-feed-source { margin-top: 10px; }
  .boot-feed-lines { height: 25vh; }
  .boot-telemetry { top: 6%; right: 4%; width: 35vw; min-height: 0; height: 32vh; padding: 10px; font-size: 7px; }
  .boot-readiness { width: 48px; height: 48px; }
  .boot-readiness-value { font-size: 13px; }
  .boot-sector-map { height: 50px; }
  .boot-logo { top: 22%; width: 76vw; height: 34vh; }
  .boot-link-state { top: 61%; font-size: 9px; letter-spacing: .16em; }
  .boot-access { top: 68%; width: 50vw; height: 52px; }
  .boot-access b { font-size: 11px; }
  .boot-metrics { top: auto; right: 4%; bottom: 20%; width: 29vw; gap: 10px; font-size: 7px; }
  .boot-spectrum { left: 4%; bottom: 9%; width: 35vw; height: 74px; padding: 9px; }
  .boot-spectrum-line { height: 43px; margin-top: 6px; gap: 1px; }
  .boot-footer { right: 4%; bottom: 2.5%; left: 4%; gap: 7px; overflow: hidden; font-size: 6px; }
  .boot-footer > span:not(.boot-online):not(.boot-footer-version) { display: none; }
}

/* ================================================================
   v1.7 · UIre：Archive Extraction reference reconstruction
   中心星核、轴线与扫描纹理由 Canvas/代码实时绘制；DOM 仅承载档案索引、
   访问日志和真实资源进度。布局以 1664×941 参考图为锚点，四角信息不
   依赖整图贴图，保持在其它 PC 比例下可读。
   ================================================================ */
.sf-loading {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  color: #d8dcff;
  background: #020311;
  font-family: ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
}
.sf-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .72;
  background: repeating-linear-gradient(0deg, rgba(113, 113, 214, .055) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
.sf-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 1, 11, .48) 100%);
}
.sf-loading .loading-dynamics {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .94;
  pointer-events: none;
  mix-blend-mode: screen;
}
.loading-axis {
  position: absolute;
  top: 49.5%;
  right: 0;
  left: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 8px 1fr;
  align-items: center;
  gap: 0;
  height: 10px;
  pointer-events: none;
}
.loading-axis i { display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(130, 138, 255, .54) 18%, rgba(194, 184, 255, .54)); }
.loading-axis i:last-child { background: linear-gradient(90deg, rgba(194, 184, 255, .54), rgba(130, 138, 255, .54) 82%, transparent); }
.loading-axis b { display: block; width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid rgba(175, 168, 255, .78); background: #252157; box-shadow: 0 0 8px rgba(140, 124, 255, .52); }
.loading-terminal {
  position: absolute;
  top: 54.9%;
  left: 50%;
  z-index: 6;
  width: min(740px, 52vw);
  translate: -50% 0;
  text-align: center;
}
.loading-terminal h1 {
  margin: 0;
  color: #eff0ff;
  font: 500 clamp(20px, 1.62vw, 30px)/1 "Arial Narrow", Bahnschrift, system-ui, "MiSans", sans-serif;
  letter-spacing: .34em;
  text-indent: .34em;
  text-shadow: 0 0 16px rgba(204, 198, 255, .26);
}
.loading-terminal p { margin: 27px 0 0; color: #c2bfff; font: 500 clamp(12px, .91vw, 16px)/1 "MiSans", sans-serif; letter-spacing: .24em; text-indent: .24em; text-shadow: 0 0 12px rgba(130, 112, 255, .32); }
.loading-status,
.loading-loaded,
.loading-current { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.loading-archive-index {
  position: absolute;
  top: 20.6%;
  right: 7.1%;
  z-index: 6;
  width: min(410px, 25vw);
  color: rgba(125, 130, 194, .7);
  font: clamp(8px, .57vw, 11px)/1.55 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
  letter-spacing: .025em;
  text-shadow: 0 0 7px rgba(65, 66, 161, .25);
}
.loading-index-head { color: rgba(158, 161, 224, .65); letter-spacing: .08em; }
.loading-index-command { margin-top: 11px; color: rgba(104, 118, 191, .72); }
.loading-index-sectors { margin-top: 17px; }
.loading-index-sectors > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; white-space: nowrap; }
.loading-index-sectors span { min-width: 0; overflow: hidden; }
.loading-index-sectors b { color: rgba(158, 158, 223, .8); font-weight: 400; }
.loading-index-summary { margin-top: 14px; color: rgba(105, 113, 181, .72); }
.loading-index-summary > div { display: flex; gap: 4px; white-space: nowrap; }
.loading-index-summary i { flex: 1; overflow: hidden; color: rgba(72, 82, 148, .7); font-style: normal; }
.loading-index-summary b { color: rgba(166, 166, 232, .84); font-weight: 400; }
.loading-access-log,
.loading-hex-panel {
  position: absolute;
  left: 7.2%;
  z-index: 6;
  color: rgba(111, 119, 185, .72);
  font: clamp(8px, .57vw, 11px)/1.48 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
  letter-spacing: .02em;
  text-shadow: 0 0 7px rgba(65, 66, 161, .22);
}
.loading-access-log { top: 52.9%; width: min(370px, 25vw); }
.loading-hex-panel { top: 71.7%; width: min(430px, 28vw); }
.loading-log-head,
.loading-hex-head { margin-bottom: 13px; color: rgba(144, 147, 211, .6); letter-spacing: .07em; }
.loading-log-lines,
.loading-hex-stream { margin: 0; overflow: hidden; color: inherit; font: inherit; white-space: pre; }
.loading-log-lines { min-height: 105px; }
.loading-hex-stream { color: rgba(94, 106, 174, .62); line-height: 1.46; }
.loading-progress-dock {
  position: absolute;
  top: 74.05%;
  left: 50%;
  z-index: 6;
  width: min(510px, 32vw);
  translate: -50% 0;
}
.loading-progress-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.loading-percent { color: #d9d3ff; font: 500 clamp(13px, .95vw, 17px)/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; }
.loading-progress { position: relative; height: 11px; overflow: hidden; border: 1px solid rgba(119, 103, 226, .72); background: rgba(10, 9, 43, .7); box-shadow: 0 0 10px rgba(79, 55, 182, .2); }
.loading-progress > i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7a62d6, #c9a8ff); box-shadow: 0 0 13px rgba(167, 122, 255, .72); transition: width .16s ease-out; }
.loading-progress > b { position: absolute; inset: 0; opacity: .45; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(230, 213, 255, .7) 10px 12px, transparent 12px 15px); pointer-events: none; }
.loading-footer { position: absolute; top: 79.1%; right: 0; bottom: auto; left: 0; z-index: 6; display: block; color: rgba(86, 91, 165, .66); font: 9px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .28em; text-align: center; text-indent: .28em; white-space: nowrap; }

@media (max-width: 1100px), (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .loading-archive-index { right: 4%; width: min(390px, 31vw); }
  .loading-access-log,
  .loading-hex-panel { left: 4%; }
  .loading-access-log { width: 31vw; }
  .loading-hex-panel { width: 35vw; }
  .loading-progress-dock { width: min(510px, 40vw); }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .loading-axis { top: 48%; }
  .loading-terminal { top: 54%; width: 84vw; }
  .loading-terminal h1 { font-size: clamp(15px, 3.1vw, 23px); letter-spacing: .2em; text-indent: .2em; }
  .loading-terminal p { margin-top: 14px; font-size: 9px; letter-spacing: .12em; text-indent: .12em; }
  .loading-archive-index { top: 10%; right: 4%; width: 44vw; font-size: 6px; line-height: 1.35; }
  .loading-index-command { margin-top: 6px; }
  .loading-index-sectors { margin-top: 7px; }
  .loading-index-sectors > div:nth-child(n+7) { display: none; }
  .loading-index-summary { margin-top: 6px; }
  .loading-access-log { top: 55%; left: 4%; width: 44vw; font-size: 6px; }
  .loading-log-head,
  .loading-hex-head { margin-bottom: 6px; }
  .loading-log-lines { min-height: 72px; }
  .loading-hex-panel { top: 74%; left: 4%; width: 44vw; font-size: 5px; }
  .loading-hex-stream { max-height: 42px; }
  .loading-progress-dock { top: 78%; width: 43vw; }
  .loading-progress { height: 7px; }
  .loading-percent { font-size: 10px; }
  .loading-footer { top: 87%; font-size: 6px; letter-spacing: .12em; text-indent: .12em; }
}

/* Restore the startup resource-bootstrap layer after the archive-only reference block. */
.sf-loading { position: absolute; inset: 0; display: block; overflow: hidden; isolation: isolate; color: #dbeaff; background: radial-gradient(circle at 50% 44%, rgba(13, 65, 133, .23), transparent 32%), radial-gradient(circle at 50% 100%, rgba(7, 40, 85, .17), transparent 48%), #020711; font-family: ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; }
.sf-loading::before { display: none; }
.sf-loading::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at center, transparent 36%, rgba(0, 2, 10, .58) 100%); }
.sf-loading .loading-dynamics { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: .95; pointer-events: none; mix-blend-mode: screen; }
.sf-loading .loading-frame { position: absolute; inset: 19px; z-index: 7; border: 1px solid rgba(74, 135, 255, .17); pointer-events: none; }
.sf-loading .loading-frame::before,
.sf-loading .loading-frame::after,
.sf-loading .loading-frame i { content: ''; position: absolute; width: 42px; height: 42px; border-color: #4c87ff; border-style: solid; opacity: .92; }
.sf-loading .loading-frame::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.sf-loading .loading-frame::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.sf-loading .loading-frame i:nth-child(1) { right: -1px; top: -1px; border-width: 2px 2px 0 0; }
.sf-loading .loading-frame i:nth-child(2) { left: -1px; bottom: -1px; border-width: 0 0 2px 2px; }
.sf-loading .loading-frame i:nth-child(3) { left: 45%; top: -1px; width: 80px; height: 7px; border-width: 2px 0 0; opacity: .45; }
.sf-loading .loading-frame i:nth-child(4) { right: 7%; bottom: -1px; width: 78px; height: 7px; border-width: 0 0 2px; opacity: .45; }
.sf-loading .loading-topline { position: absolute; top: 2.55%; right: 4.8%; left: 4.8%; z-index: 6; display: flex; align-items: center; gap: clamp(18px, 2.3vw, 38px); color: rgba(116, 166, 232, .78); font: 10px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .12em; white-space: nowrap; }
.sf-loading .loading-topline span { color: #28adf4; }
.sf-loading .loading-topline b { margin-left: auto; font-weight: 500; }
.sf-loading .loading-topline em { font-style: normal; color: rgba(156, 190, 239, .64); }
.sf-loading .loading-terminal { position: absolute; top: 31%; left: 50%; z-index: 6; width: min(670px, 52vw); translate: -50% 0; text-align: center; }
.sf-loading .loading-kicker { color: #25b8ff; font-size: clamp(9px, .65vw, 12px); letter-spacing: .28em; }
.sf-loading .loading-terminal h1 { margin: 23px 0 12px; color: #e9f5ff; font: 600 clamp(29px, 3.1vw, 58px)/1 "Arial Narrow", Bahnschrift, system-ui, "MiSans", sans-serif; letter-spacing: .19em; text-shadow: 0 0 18px rgba(106, 184, 255, .3); }
.sf-loading .loading-terminal p { margin: 0; color: rgba(153, 192, 238, .73); font-size: clamp(10px, .72vw, 13px); letter-spacing: .15em; }
.sf-loading .loading-progress-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; margin-top: 44px; color: rgba(150, 188, 237, .72); font-size: 9px; letter-spacing: .11em; text-align: left; }
.sf-loading .loading-percent { min-width: 53px; color: #e6f4ff; font: 600 18px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .03em; }
.sf-loading .loading-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-loading .loading-loaded { color: #55c7ff; font-weight: 500; white-space: nowrap; }
.sf-loading .loading-progress { position: relative; height: 7px; margin-top: 13px; overflow: hidden; border: 1px solid rgba(75, 145, 255, .55); background: rgba(4, 13, 32, .72); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); }
.sf-loading .loading-progress > i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #098df8, #2e4ff9 45%, #3816b8 76%, #b213e1); box-shadow: 0 0 17px rgba(40, 124, 255, .72); transition: width .16s ease-out; }
.sf-loading .loading-progress > b { position: absolute; inset: 0 auto 0 0; width: 100%; opacity: .2; background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(178, 214, 255, .44) 27px 28px); pointer-events: none; }
.sf-loading .loading-current { min-height: 28px; margin-top: 16px; color: #4ccaff; font-size: 10px; letter-spacing: .12em; text-align: left; }
.sf-loading .loading-stream { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 26px; padding-top: 15px; border-top: 1px solid rgba(77, 145, 239, .26); }
.sf-loading .loading-stream span { display: flex; flex-direction: column; gap: 7px; min-width: 0; text-align: left; }
.sf-loading .loading-stream b { color: rgba(128, 169, 224, .56); font-size: 8px; font-weight: 500; letter-spacing: .14em; }
.sf-loading .loading-stream em { color: #4bb5ff; font-size: 10px; font-style: normal; letter-spacing: .11em; }
.sf-loading .loading-stream-good em { color: #4de0c1; }
.sf-loading .loading-stream-neutral em { color: rgba(138, 177, 230, .52); }
.sf-loading .loading-stream-active em { animation: loadingStatusBlink 1.1s ease-in-out infinite; }
.sf-loading .loading-core-label { position: absolute; top: 70.5%; left: 50%; z-index: 6; translate: -50% 0; color: rgba(113, 171, 236, .58); font-size: 9px; letter-spacing: .24em; white-space: nowrap; }
.sf-loading .loading-core-label span { color: #4de0c1; }
.sf-loading .loading-side { position: absolute; top: 33%; right: 7.4%; z-index: 6; display: grid; grid-template-columns: auto auto; gap: 15px 25px; min-width: 230px; padding: 16px 18px; border-left: 1px solid rgba(69, 134, 232, .38); border-top: 1px solid rgba(69, 134, 232, .18); color: rgba(125, 168, 224, .64); font-size: 8px; letter-spacing: .12em; }
.sf-loading .loading-side b { color: #54bfff; font-weight: 500; text-align: right; }
.sf-loading .loading-side i { grid-column: 1 / -1; height: 1px; background: rgba(73, 142, 238, .2); }
.sf-loading .loading-side .loading-security { color: #4ee4c4; }
.sf-loading .loading-footer { position: absolute; right: 4.8%; bottom: 2.8%; left: 4.5%; z-index: 7; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); color: rgba(107, 139, 192, .68); font: 9px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .1em; white-space: nowrap; }
.sf-loading .loading-footer span:first-child { color: #22c2f7; letter-spacing: .16em; }
.sf-loading .loading-footer i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.sf-loading .loading-footer span:last-child { margin-left: auto; color: rgba(146, 179, 235, .78); }
@media (max-width: 1100px), (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .sf-loading .loading-terminal { width: min(670px, 58vw); }
  .sf-loading .loading-side { right: 4%; min-width: 190px; }
  .sf-loading .loading-footer { gap: 12px; letter-spacing: .06em; }
}
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .sf-loading .loading-frame { inset: 9px; }
  .sf-loading .loading-topline { top: 2.5%; right: 4%; left: 4%; gap: 10px; font-size: 7px; letter-spacing: .06em; }
  .sf-loading .loading-topline b { display: none; }
  .sf-loading .loading-terminal { top: 28%; width: 82vw; }
  .sf-loading .loading-terminal h1 { margin: 14px 0 8px; font-size: clamp(22px, 5vw, 34px); letter-spacing: .13em; }
  .sf-loading .loading-terminal p { font-size: 8px; letter-spacing: .08em; }
  .sf-loading .loading-progress-row { grid-template-columns: auto 1fr; gap: 8px; margin-top: 24px; font-size: 7px; }
  .sf-loading .loading-loaded { grid-column: 2; }
  .sf-loading .loading-current { margin-top: 10px; font-size: 7px; }
  .sf-loading .loading-stream { gap: 6px; margin-top: 14px; padding-top: 9px; }
  .sf-loading .loading-stream b { font-size: 6px; }
  .sf-loading .loading-stream em { font-size: 7px; }
  .sf-loading .loading-side { top: auto; right: 4%; bottom: 18%; min-width: 0; width: 28vw; padding: 8px; gap: 8px 10px; font-size: 6px; }
  .sf-loading .loading-core-label { top: 65%; font-size: 7px; letter-spacing: .12em; }
  .sf-loading .loading-footer { right: 4%; bottom: 2.5%; left: 4%; gap: 7px; overflow: hidden; font-size: 6px; }
  .sf-loading .loading-footer span:nth-child(2) { display: none; }
}

/* ================================================================
   v1.7 · UIre：Stardust command deck
   参考图优先的锚点布局：舰桥 raster plate + 2D 动态扫描层 + 可操作指挥入口。
   ================================================================ */
.menu-launcher {
  isolation: isolate;
  display: block;
  /* 固定视口主菜单不能成为可滚动容器；底部领航员故意越界 60px 只用于裁切，
     overflow:hidden 在 Chromium 仍允许 wheel/scrollTop 移动该容器并显示滚动条。 */
  overflow: clip;
  scrollbar-width: none;
  text-align: left;
  background-color: #030812;
  background-image:
    linear-gradient(90deg, rgba(1, 5, 16, .14), rgba(1, 5, 16, .02) 48%, rgba(1, 5, 16, .18)),
    url('../assets/ui/launcher/stardust-command-deck-v2-clean.webp'),
    url('../assets/ui/launcher/stardust-command-deck-v2-clean.png');
  background-position: center;
  background-size: cover;
}
.menu-launcher::-webkit-scrollbar { display: none; width: 0; height: 0; }
.launcher-bridge-patch { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url('../assets/ui/launcher/stardust-command-deck-v3-spliced-source.png') center / 100% 100% no-repeat; clip-path: inset(73.5% 41.5% 0 33.5%); opacity: .96; }
.launcher-backdrop { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; pointer-events: none; mix-blend-mode: screen; opacity: .72; }
.launcher-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.launcher-console,
.launcher-stardust,
.launcher-telemetry,
.launcher-signal,
.launcher-player,
.launcher-sector {
  position: absolute;
  box-sizing: border-box;
  border-radius: 0;
  background: rgba(3, 10, 25, .72);
  border: 1px solid rgba(91, 148, 226, .48);
  box-shadow: 0 0 28px rgba(40, 116, 190, .12), inset 0 0 24px rgba(143, 214, 255, .045);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  clip-path: polygon(0 18px, 18px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px));
}
.launcher-console { top: 3.7%; left: 1.7%; width: min(350px, 21vw); min-height: 30%; padding: 22px 22px 18px; }
.launcher-stardust { top: 34.4%; left: 1.7%; z-index: 2; width: min(265px, 16vw); height: 82px; padding: 12px 16px 10px; color: #8fb6dc; }
.launcher-telemetry { top: 3.6%; right: 1.7%; z-index: 2; width: min(330px, 20vw); padding: 20px 20px 18px; }
.launcher-console-head,
.launcher-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #a4bfdf; font: 11px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .13em; }
.launcher-console-head b,
.launcher-section-head b { color: #7ee8c8; font-weight: 500; font-size: 10px; }
.launcher-console-head b i,
.launcher-telemetry .launcher-console-head b i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.launcher-log { display: flex; flex-direction: column; gap: 9px; height: 178px; margin-top: 22px; overflow: hidden; scroll-behavior: smooth; color: rgba(190, 211, 237, .72); font: 11px/1.28 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; }
.launcher-log > span { flex: 0 0 auto; }
.launcher-log b { color: #7ee8c8; font-weight: 500; }
.launcher-log .terminal-good { color: #7ee8c8; }
.launcher-log .terminal-bright { color: #d9e7fa; }
.launcher-log .terminal-accent { color: #4ca7ff; }
.launcher-log .terminal-neutral { color: rgba(190, 211, 237, .76); }
.launcher-log span:nth-child(4) { color: #d9e7fa; }
.launcher-log span:nth-child(5) { color: rgba(174, 206, 237, .84); }
.launcher-log strong { color: #4ca7ff; font-weight: 600; }
.launcher-console-prompt { margin-top: 16px; color: #e6efff; font: 13px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; }
.launcher-stardust .launcher-section-head { font-size: 9px; letter-spacing: .09em; }
.launcher-stardust .launcher-section-head b { color: #b388ff; font-size: 13px; line-height: .8; }
.launcher-stardust-readout { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-top: 9px; }
.launcher-stardust-icon { display: grid; place-items: center; width: 29px; height: 29px; color: #8fd6ff; border: 1px solid rgba(143, 214, 255, .4); border-radius: 50%; background: radial-gradient(circle, rgba(76, 167, 255, .22), rgba(76, 167, 255, .03) 65%, transparent 66%); box-shadow: 0 0 13px rgba(76, 167, 255, .28), inset 0 0 10px rgba(179, 136, 255, .18); }
.launcher-stardust-icon svg { width: 25px; height: 25px; filter: drop-shadow(0 0 5px currentColor); }
.launcher-stardust-copy { display: grid; gap: 1px; min-width: 0; }
.launcher-stardust-value { color: #eef5ff; font: 26px/.9 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .04em; text-shadow: 0 0 12px rgba(143, 214, 255, .62); }
.launcher-stardust-copy small { color: rgba(171, 199, 232, .75); font: 8px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .14em; }
.launcher-stardust-meta { align-self: end; color: rgba(143, 182, 220, .62); font: 7px/1.35 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; text-align: right; white-space: nowrap; }
.launcher-stardust-meta b { color: #7ee8c8; font-size: 9px; font-weight: 500; }
.launcher-signal { left: 1%; bottom: 4.8%; z-index: 2; width: min(300px, 20vw); padding: 15px 16px 13px; color: #8fb6dc; }
.launcher-player { left: 1%; bottom: 21.2%; z-index: 3; width: min(300px, 20vw); height: 132px; padding: 11px 13px 9px; color: #8fb6dc; pointer-events: auto; overflow: hidden; }
.launcher-player::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(76, 167, 255, .08), transparent 40%, rgba(81, 40, 189, .08)); pointer-events: none; }
.launcher-player > * { position: relative; z-index: 1; }
.launcher-player-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #a4bfdf; font: 9px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .11em; }
.launcher-player-head b { display: inline-flex; align-items: center; gap: 4px; color: #7ee8c8; font: 8px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; }
.launcher-player-live-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: launcherPlayerPulse 1.6s ease-in-out infinite; }
@keyframes launcherPlayerPulse { 0%, 100% { opacity: .38; transform: scale(.78); } 50% { opacity: 1; transform: scale(1.2); } }
.launcher-player-main { display: grid; grid-template-columns: 30px minmax(0, 1fr) 72px; align-items: center; gap: 8px; margin-top: 9px; min-width: 0; }
.launcher-player-reactor { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(76, 167, 255, .65); border-radius: 50%; background: radial-gradient(circle, rgba(143, 214, 255, .22), rgba(46, 79, 249, .08) 43%, transparent 45%); box-shadow: 0 0 12px rgba(76, 167, 255, .3), inset 0 0 10px rgba(76, 167, 255, .18); }
.launcher-player-reactor::before, .launcher-player-reactor::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(143, 214, 255, .42); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; animation: launcherPlayerOrbit 2.8s linear infinite; }
.launcher-player-reactor::after { inset: 7px; border-color: rgba(178, 19, 225, .48); border-left-color: transparent; border-right-color: transparent; animation-direction: reverse; animation-duration: 1.9s; }
@keyframes launcherPlayerOrbit { to { rotate: 360deg; } }
.launcher-player-reactor i { width: 7px; height: 7px; border: 1px solid #dff8ff; border-radius: 50%; background: #4ca7ff; box-shadow: 0 0 10px #4ca7ff; animation: launcherPlayerCore 1.1s ease-in-out infinite; }
@keyframes launcherPlayerCore { 0%, 100% { opacity: .54; scale: .72; } 50% { opacity: 1; scale: 1.22; } }
.launcher-player-reactor b { position: absolute; left: 50%; top: -5px; width: 1px; height: 38px; background: linear-gradient(180deg, transparent, rgba(143, 214, 255, .6), transparent); transform: translateX(-50%); opacity: .5; }
.launcher-player-track { display: grid; min-width: 0; gap: 2px; }
.launcher-player-track small { color: rgba(143, 182, 220, .68); font: 7px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; }
.launcher-player-title { overflow: hidden; color: #eaf4ff; font: 600 12px/1.1 "MiSans", ui-monospace, sans-serif; letter-spacing: .06em; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 8px rgba(143, 214, 255, .45); }
.launcher-player-subtitle { overflow: hidden; color: #6f9bd0; font: 7px/1.1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .04em; white-space: nowrap; text-overflow: ellipsis; }
.launcher-player-metrics { display: grid; gap: 5px; min-width: 0; }
.launcher-player-metrics span { display: grid; gap: 1px; min-width: 0; text-align: right; }
.launcher-player-metrics b { overflow: hidden; color: #bfe6ff; font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 7px rgba(76, 167, 255, .6); }
.launcher-player-metrics small { color: rgba(143, 182, 220, .62); font: 6px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; }
.launcher-player-progress { position: relative; height: 12px; margin-top: 8px; border-top: 1px solid rgba(143, 214, 255, .22); border-bottom: 1px solid rgba(143, 214, 255, .22); cursor: pointer; outline: none; }
.launcher-player-progress::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: repeating-linear-gradient(90deg, rgba(91, 148, 226, .45) 0 1px, transparent 1px 13px); }
.launcher-player-progress-fill { position: absolute; z-index: 1; left: 0; top: 4px; width: var(--player-progress, 0%); height: 3px; background: linear-gradient(90deg, #098df8, #2e4ff9 42%, #3816b8 72%, #b213e1); box-shadow: 0 0 8px rgba(76, 167, 255, .75); transition: width .12s linear; }
.launcher-player-progress-head { position: absolute; z-index: 2; top: 1px; left: var(--player-progress, 0%); width: 8px; height: 8px; translate: -4px 0; border: 1px solid #e5f9ff; border-radius: 50%; background: #4ca7ff; box-shadow: 0 0 8px #4ca7ff; transition: left .12s linear; }
.launcher-player-progress > div { position: absolute; right: 0; bottom: -1px; display: flex; gap: 3px; padding-left: 5px; color: rgba(143, 182, 220, .72); background: rgba(3, 10, 25, .86); font: 7px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; }
.launcher-player-progress > div b { color: #dfeaff; font-weight: 500; }
.launcher-player-progress > div em { color: rgba(143, 182, 220, .52); font-style: normal; }
.launcher-player-progress:focus-visible { outline: 1px solid #9be8ff; outline-offset: 2px; }
.launcher-player-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 7px; }
.launcher-player-button { display: grid; place-items: center; min-width: 0; height: 28px; padding: 2px 3px; color: #a9c9ea; border: 1px solid rgba(91, 148, 226, .42); border-radius: 3px; background: linear-gradient(180deg, rgba(20, 45, 84, .72), rgba(5, 17, 42, .84)); cursor: pointer; font: inherit; transition: color .15s, border-color .15s, background .15s, box-shadow .15s; }
.launcher-player-button span { height: 13px; color: #dff7ff; font: 15px/.8 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; text-shadow: 0 0 7px rgba(76, 167, 255, .72); }
.launcher-player-button small { overflow: hidden; max-width: 100%; color: rgba(171, 199, 232, .72); font: 6px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .04em; white-space: nowrap; text-overflow: ellipsis; }
.launcher-player-button:hover, .launcher-player-button:focus-visible { color: #fff; border-color: #9be8ff; background: linear-gradient(180deg, rgba(29, 70, 126, .9), rgba(9, 27, 62, .9)); box-shadow: 0 0 13px rgba(76, 167, 255, .24), inset 0 0 9px rgba(143, 214, 255, .08); outline: none; }
.launcher-player-button:active { translate: 0 1px; }
.launcher-player-mode[data-mode="shuffle"] { color: #d7b9ff; border-color: rgba(178, 19, 225, .62); }
.launcher-player.is-playing .launcher-player-reactor { box-shadow: 0 0 15px rgba(76, 167, 255, .46), inset 0 0 12px rgba(76, 167, 255, .28); }
.launcher-section-head { font-size: 10px; letter-spacing: .11em; }
.launcher-section-head b { color: #9be8ff; }
.launcher-signal-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 19px; color: rgba(174, 206, 237, .72); font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .04em; }
.launcher-signal-row b { color: #dfeaff; font-weight: 500; }
.launcher-signal-line { display: flex; align-items: end; gap: 2px; height: 60px; margin-top: 8px; border-bottom: 1px solid rgba(143, 214, 255, .35); }
.launcher-signal-line i { flex: 1; height: 8%; min-width: 1px; background: var(--bar-color, #098df8); opacity: .62; transition: height .08s linear, opacity .08s linear; }
.launcher-volume { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 13px; pointer-events: auto; color: rgba(143, 182, 220, .72); font: 9px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .1em; }
.launcher-volume label { white-space: nowrap; }
.launcher-volume-control { position: relative; display: flex; align-items: center; min-width: 0; height: 15px; }
.launcher-volume-meter { display: flex; align-items: stretch; gap: 2px; width: 100%; height: 8px; pointer-events: none; background: linear-gradient(90deg, #071a4d 0%, #123b9a 42%, #2e87de 72%, #6de7ff 100%); }
.launcher-volume-meter i { flex: 1 1 0; min-width: 2px; border: 1px solid rgba(52, 89, 137, .42); background: rgba(4, 14, 39, .82); transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; }
.launcher-volume-meter i.is-on { border-color: rgba(123, 223, 255, .86); background: transparent; box-shadow: 0 0 7px rgba(9, 141, 248, .3); }
.launcher-volume-range { position: absolute; inset: -6px 0; width: 100%; height: 27px; margin: 0; opacity: 0; cursor: pointer; }
.launcher-volume-control:focus-within { outline: none; box-shadow: none; }
.launcher-volume-value { min-width: 32px; color: #dfeaff; text-align: right; letter-spacing: .04em; }
.launcher-readiness-row { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 13px; align-items: center; margin-top: 17px; }
.launcher-readiness { --readiness: 92%; position: relative; display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid rgba(76, 167, 255, .28); border-radius: 50%; background: conic-gradient(#4ca7ff 0 var(--readiness), rgba(76, 167, 255, .1) var(--readiness) 100%); box-shadow: 0 0 0 6px rgba(76, 167, 255, .045), inset 0 0 18px rgba(76, 167, 255, .18); }
.launcher-readiness::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(143, 214, 255, .35); border-radius: 50%; background: #061126; }
.launcher-readiness span,
.launcher-readiness small,
.launcher-readiness em { position: relative; z-index: 1; }
.launcher-readiness span { margin-right: -10px; transform: translate(-5px, 13px); color: #eaf3ff; font: 26px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; }
.launcher-readiness small { margin: -25px 0 0 39px; color: #a9c7e8; font: 10px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; }
.launcher-readiness em { position: absolute; bottom: -20px; color: rgba(143, 182, 220, .7); font: 8px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; white-space: nowrap; font-style: normal; }
.launcher-data-stack { min-width: 0; }
.launcher-data { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; color: rgba(143, 182, 220, .7); font: 9px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .06em; }
.launcher-data:first-child { margin-top: 0; }
.launcher-data b { color: #b8dafc; font-weight: 500; white-space: nowrap; }
.launcher-data b.good { color: #7ee8c8; }
.launcher-telemetry .telemetry-online-dot { animation: telemetryOnlinePulse 1.5s ease-in-out infinite; }
@keyframes telemetryOnlinePulse { 0%, 100% { opacity: .35; box-shadow: 0 0 5px currentColor; transform: scale(.85); } 50% { opacity: 1; box-shadow: 0 0 14px currentColor; transform: scale(1.15); } }
.launcher-sector { top: 27%; right: 1.7%; z-index: 3; width: min(330px, 20vw); height: 23%; padding: 17px 18px 13px; }
.launcher-sector-map { position: relative; height: calc(100% - 35px); margin-top: 10px; overflow: hidden; background-image: linear-gradient(rgba(76, 167, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 167, 255, .12) 1px, transparent 1px); background-size: 26px 26px; }
.launcher-sector-map::before { content: ''; position: absolute; inset: -30% 8% 0 24%; border: 1px solid rgba(76, 167, 255, .32); border-radius: 50%; transform: rotate(-18deg) scaleY(.72); }
.sector-path { position: absolute; left: 31%; top: 18%; width: 45%; height: 58%; border: 1px solid rgba(76, 167, 255, .78); background: rgba(76, 167, 255, .08); clip-path: polygon(22% 0, 72% 10%, 100% 32%, 78% 88%, 38% 100%, 0 65%, 10% 22%); }
.sector-node { position: absolute; width: 6px; height: 6px; border: 1px solid #8fd6ff; border-radius: 50%; background: #0a1e48; box-shadow: 0 0 8px #4ca7ff; }
.sector-node.n1 { left: 45%; top: 20%; }.sector-node.n2 { left: 67%; top: 38%; }.sector-node.n3 { left: 55%; top: 70%; }.sector-node.n4 { left: 30%; top: 59%; }
.sector-core { position: absolute; left: 50%; top: 48%; width: 12px; height: 12px; border: 1px solid #9be8ff; border-radius: 50%; box-shadow: 0 0 13px #4ca7ff; }
.launcher-sector-foot { margin-top: 7px; color: rgba(143, 182, 220, .68); font: 8px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; text-align: right; }
.launcher-sector-foot b { color: #7ee8c8; font-weight: 500; }
.launcher-pilot { position: absolute; z-index: 3; right: 1.4%; bottom: -60px; width: min(760px, 42vw); height: 100%; margin: 0; text-align: center; pointer-events: none; }
.launcher-pilot-frame { position: relative; width: 100%; height: 100%; min-height: 0; overflow: visible; }
.launcher-pilot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 28px rgba(94, 171, 255, .38)); }
.launcher-orbit-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: #4ca7ff; font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .06em; }
.orbit-label { position: absolute; display: grid; grid-template-columns: 12px auto; column-gap: 4px; text-shadow: 0 0 10px currentColor; }
.orbit-label i { grid-row: span 2; width: 8px; height: 8px; margin-top: 2px; border: 1px solid currentColor; transform: rotate(45deg); }
.orbit-label small { grid-column: 2; color: currentColor; font-size: 9px; }
.orbit-label.alpha { left: 27%; top: 14%; }.orbit-label.hostile { left: 58%; top: 15%; color: #ff557a; }.orbit-label.bravo { left: 8%; top: 43%; }.orbit-label.delta { left: 39%; top: 64%; }
.launcher-crosshair { position: absolute; right: 12%; bottom: 18%; z-index: 2; display: grid; justify-items: center; gap: 7px; color: rgba(143, 214, 255, .64); font: 9px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .16em; pointer-events: none; }
.launcher-crosshair i { display: block; width: 58px; height: 58px; border: 1px solid rgba(143, 214, 255, .34); border-radius: 50%; box-shadow: 0 0 0 8px rgba(143, 214, 255, .05), inset 0 0 18px rgba(143, 214, 255, .15); }
.launcher-crosshair i::before, .launcher-crosshair i::after { content: ''; position: absolute; background: rgba(143, 214, 255, .48); }
.launcher-crosshair i::before { width: 74px; height: 1px; margin: 28px 0 0 -8px; }
.launcher-crosshair i::after { width: 1px; height: 74px; margin: -8px 0 0 28px; }
.launcher-footer { position: absolute; right: 13%; bottom: 1.8%; z-index: 4; display: flex; align-items: center; gap: 10px; color: rgba(155, 184, 220, .7); font: 11px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .12em; }
.launcher-footer i { width: 22px; height: 11px; border-left: 1px solid #4ca7ff; border-right: 1px solid #4ca7ff; transform: skew(-25deg); }
.menu-launcher .menu-title { position: absolute; z-index: 5; top: 18%; left: calc(42.5% + 100px); width: min(802px, 44vw); max-width: none; margin: 0; translate: -50% 0; text-align: center; }
.menu-title-raster { display: block; width: 100%; height: auto; opacity: 0; mix-blend-mode: screen; filter: drop-shadow(0 0 18px rgba(143, 214, 255, .32)); transition: opacity .6s ease; }
.menu-launcher .menu-title.screen-in .menu-title-raster { opacity: 1; }
.menu-title-kicker { display: block !important; margin-bottom: 14px; color: rgba(143, 214, 255, .64); font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .25em; }
.menu-title-crest { position: relative; display: block; width: 84px; height: 39px; margin: 0 auto 13px; opacity: 0; transition: opacity .6s ease; }
.menu-title-crest::before, .menu-title-crest::after { content: ''; position: absolute; top: 19px; width: 28px; height: 1px; background: #dceaff; box-shadow: 0 0 12px #8fd6ff; }
.menu-title-crest::before { left: 0; }.menu-title-crest::after { right: 0; }
.menu-title-crest i { position: absolute; left: 31px; top: 7px; width: 22px; height: 22px; border: 4px solid #eaf3ff; border-top-color: #4ca7ff; border-radius: 4px; transform: rotate(45deg); box-shadow: 0 0 16px rgba(143, 214, 255, .85); }
.menu-title-crest b { position: absolute; left: 39px; top: 15px; width: 7px; height: 7px; background: #030812; border: 1px solid #b388ff; transform: rotate(45deg); }
.menu-launcher .menu-title.screen-in .menu-title-crest { opacity: 1; }
.menu-title-logo { display: grid; gap: 0; color: #eef5ff; font: 600 clamp(46px, 4.5vw, 86px)/.83 "Arial Narrow", "Bahnschrift SemiCondensed", system-ui, "MiSans", sans-serif; letter-spacing: .2em; text-shadow: 0 0 16px rgba(223, 237, 255, .82), 0 0 38px rgba(76, 167, 255, .36); transform: scaleX(1.32); transform-origin: center; }
.menu-title-word { display: block; white-space: nowrap; }
.menu-title-sub { display: block !important; margin-top: 21px; color: rgba(143, 214, 255, .68); font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .18em; }
.menu-launcher .menu-nav { position: absolute; z-index: 5; left: clamp(190px, 17vw, 326px); bottom: 13.5%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.menu-launcher .menu-nav .btn { position: relative; display: grid; grid-template-columns: 43px minmax(0, 1fr) 25px; align-items: center; width: 238px; min-height: 57px; padding: 7px 13px 7px 11px; text-align: left; border: 1px solid rgba(107, 123, 255, .9); border-radius: 0 17px 0 17px; background: linear-gradient(90deg, rgba(10, 18, 48, .96), rgba(5, 12, 30, .78)); box-shadow: 0 0 16px rgba(76, 83, 255, .16), inset 0 0 20px rgba(143, 214, 255, .04); }
.menu-launcher .menu-nav .btn[data-nav="modeSelect"] { width: 190px; }
.menu-launcher .menu-nav .btn[data-nav="shop"] { width: 214px; }
.menu-launcher .menu-nav .btn::before { content: ''; position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 4px; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 214, 255, .38), transparent); }
.menu-launcher .menu-nav .btn::after { content: ''; position: absolute; z-index: 1; inset: 3px; border: 1px solid rgba(91, 203, 255, 0); clip-path: polygon(0 13px, 13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%); pointer-events: none; }
.menu-launcher .menu-nav .btn > * { position: relative; z-index: 2; }
.menu-btn-rain-reveal { animation: menuButtonRainReveal 1.25s ease-out both; }
@keyframes menuButtonRainReveal {
  0% { opacity: 0; }
  35% { opacity: .34; }
  72% { opacity: .78; }
  100% { opacity: 1; }
}
.menu-data-rain { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; }
.menu-data-rain.is-active { opacity: 1; }
.menu-data-rain.is-fading { opacity: 0; transition: opacity 1.4s ease-out; }
.menu-rain-lane { position: absolute; z-index: 1; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 0; width: 48px; opacity: 0; will-change: transform, opacity; }
.menu-rain-glyph { display: block; width: 100%; color: rgba(88, 203, 255, .78); font: 700 var(--rain-font-size, 17px)/var(--rain-line-height, 20px) "MiSans", sans-serif; letter-spacing: .12em; text-align: center; text-shadow: 0 0 7px rgba(76, 167, 255, .9), 0 0 16px rgba(46, 79, 249, .58); }
.menu-rain-glyph::before { content: none; }
.menu-rain-glyph:first-child { color: #e8fbff; text-shadow: 0 0 9px #a3e9ff, 0 0 21px #4ca7ff; }
.menu-rain-glyph:nth-child(2n) { color: rgba(75, 184, 255, .92); }
.menu-rain-glyph:nth-child(3n) { color: rgba(72, 141, 255, .7); }
.menu-rain-head-mask, .menu-rain-tail-mask { position: absolute; z-index: 2; top: 0; left: 0; display: block; height: 100px; width: 48px; border-radius: 10px; background: linear-gradient(180deg, rgba(4, 17, 52, 0), rgba(4, 17, 52, .74)); filter: blur(3px); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.menu-launcher .menu-nav .btn:hover { border-color: #9be8ff; background: linear-gradient(90deg, rgba(26, 35, 93, .98), rgba(8, 17, 43, .88)); box-shadow: 0 0 25px rgba(76, 167, 255, .3), inset 0 0 16px rgba(143, 214, 255, .1); }
.menu-launcher .menu-nav .btn:focus-visible { outline: 1px solid #eef4ff; outline-offset: 4px; }
.menu-launcher .menu-nav-ico { display: grid; place-items: center; width: 34px; height: 34px; color: #dfeaff; border: 1px solid rgba(143, 214, 255, .34); border-radius: 50%; }
.menu-launcher .menu-nav-ico svg { width: 22px; height: 22px; }
.menu-nav-copy { display: grid; gap: 2px; min-width: 0; }
.menu-nav-label { color: #e5eeff; font: 500 18px/1.05 "Arial Narrow", "MiSans", system-ui, sans-serif; letter-spacing: .12em; }
.menu-nav-label::before { content: attr(data-label); }
.menu-nav-copy small { color: rgba(171, 193, 226, .82); font: 10px/1.1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; }
.menu-nav-copy small::before { content: attr(data-detail); }
.menu-nav-copy em { display: none; }
.menu-nav-index { color: rgba(143, 214, 255, .54); font: 10px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .1em; text-align: right; }
.menu-nav-index::before { content: attr(data-index); }
.menu-launcher .menu-ver { z-index: 5; }

@media (max-width: 1100px), (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .launcher-console { width: 27vw; }
  .launcher-stardust { width: 22vw; }
  .launcher-telemetry, .launcher-sector { width: 25vw; }
  .launcher-pilot { right: 5%; width: min(560px, 43vw); }
  .menu-launcher .menu-title { left: 43%; width: 48vw; }
  .menu-launcher .menu-nav { left: 13vw; }
}

/* ================================================================
   UIre 设置页：SYS-7A COMMAND TERMINAL
   参考图默认视图 = 画面分类；其他设置通过顶部标签切换。
   背景由 settingsBackdrop.js 动态绘制，DOM 只承载可访问/可操作控件。
   ================================================================ */
.st-wrap {
  display: block;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: var(--white);
}

.st-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.st-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 82px minmax(0, 1fr) 86px;
  gap: 0;
  padding: 27px 36px 18px;
}

.st-header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(610px, 840px) minmax(132px, 1fr);
  align-items: start;
  gap: 18px;
  border-bottom: 1px solid rgba(76, 145, 215, .25);
  position: relative;
}

.st-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(90deg, rgba(96, 174, 255, .5), transparent 28%, transparent 72%, rgba(96, 174, 255, .5));
  opacity: .35;
}

.st-heading {
  padding: 4px 0 0 2px;
  text-align: left;
  white-space: nowrap;
}

.st-heading-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: clamp(19px, 1.2vw, 25px);
  font-weight: 650;
  letter-spacing: .08em;
  text-shadow: 0 0 16px rgba(143, 214, 255, .24);
}

.st-heading-mark {
  color: #9e8aff;
  font-family: ui-monospace, Consolas, "MiSans", monospace;
  font-size: 25px;
  letter-spacing: -.18em;
  transform: skewX(-18deg);
  display: inline-block;
}

.st-heading-en {
  padding-left: 26px;
  margin-top: 3px;
  color: rgba(151, 169, 215, .72);
  font: 11px ui-monospace, Consolas, "MiSans", monospace;
  letter-spacing: .1em;
}

.st-tabs {
  min-width: 0;
  height: 67px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.st-tab {
  position: relative;
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 7px 12px;
  color: rgba(229, 234, 255, .82);
  background: rgba(4, 10, 25, .6);
  border: 1px solid rgba(91, 135, 207, .3);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  cursor: pointer;
  font: inherit;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}

.st-tab:hover,
.st-tab:focus-visible {
  color: #fff;
  border-color: rgba(143, 214, 255, .7);
  background: rgba(30, 49, 92, .65);
}

.st-tab.on {
  color: #fff;
  border-color: rgba(180, 155, 255, .95);
  background: linear-gradient(135deg, rgba(122, 96, 219, .78), rgba(62, 43, 122, .62));
  box-shadow: inset 0 0 24px rgba(184, 158, 255, .18), 0 0 18px rgba(116, 83, 255, .22);
}

.st-tab .st-setting-icon { width: 25px; height: 25px; flex: 0 0 auto; filter: none; }
.st-tab .st-setting-icon svg { width: 25px; height: 25px; }
.st-tab b, .st-tab small { display: block; text-align: left; }
.st-tab b { font-size: 16px; font-weight: 600; letter-spacing: .08em; }
.st-tab small { margin-top: 3px; color: rgba(214, 221, 255, .62); font: 10px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .1em; }
.st-tab.on small { color: rgba(239, 236, 255, .78); }

.st-back {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 100px;
  padding: 5px 0 0;
  color: rgba(242, 246, 255, .9);
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.st-back-icon {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border: 1px solid rgba(196, 194, 255, .75);
  border-radius: 50%;
  color: #f4efff;
  font: 29px/36px "Segoe UI", "MiSans", sans-serif;
  font-weight: 200;
  transition: background .18s, box-shadow .18s;
}

.st-back:hover .st-back-icon,
.st-back:focus-visible .st-back-icon {
  background: rgba(152, 130, 255, .2);
  box-shadow: 0 0 16px rgba(154, 126, 255, .35);
}

.st-back-copy { display: block; text-align: left; }
.st-back-copy b, .st-back-copy small { display: block; }
.st-back-copy b { font-size: 15px; font-weight: 600; letter-spacing: .08em; }
.st-back-copy small { margin-top: 3px; color: rgba(184, 190, 222, .72); font: 10px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .1em; }

.st-body {
  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  padding: 17px 0 12px;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.st-body-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}

.st-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.st-tab-panel[hidden] { display: none; }

.st-setting-row {
  position: relative;
  width: 100%;
  min-height: 90px;
  height: 90px;
  display: grid;
  grid-template-columns: 68px minmax(180px, 215px) minmax(0, 1fr) minmax(255px, 310px);
  align-items: center;
  gap: 12px;
  padding: 0 25px 0 25px;
  background: linear-gradient(100deg, rgba(11, 26, 57, .79), rgba(7, 17, 39, .58) 58%, rgba(6, 15, 34, .71));
  border: 1px solid rgba(111, 155, 226, .52);
  clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: inset 0 0 25px rgba(27, 81, 145, .08);
}

.st-setting-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, transparent, #258cff 25%, #258cff 75%, transparent);
  box-shadow: 0 0 10px rgba(37, 140, 255, .8);
}

.st-setting-row:hover {
  border-color: rgba(143, 214, 255, .78);
  background: linear-gradient(100deg, rgba(16, 36, 73, .87), rgba(10, 22, 48, .69));
}

.st-setting-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #d6c9ff;
  filter: drop-shadow(0 0 7px rgba(164, 135, 255, .38));
}

.st-setting-icon svg { width: 100%; height: 100%; }
.st-setting-copy { min-width: 0; }
.st-setting-copy b, .st-setting-copy small { display: block; }
.st-setting-copy b { font-size: 18px; font-weight: 600; letter-spacing: .08em; white-space: nowrap; }
.st-setting-copy small { margin-top: 4px; color: rgba(167, 179, 221, .72); font: 11px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .1em; }
.st-setting-description { min-width: 0; padding-left: 6px; color: rgba(184, 195, 226, .78); font-size: 14px; letter-spacing: .08em; line-height: 1.55; }

.st-control {
  min-width: 0;
  justify-self: stretch;
}

.st-select-control {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 46px 0 19px;
  background: rgba(5, 11, 27, .78);
  border: 1px solid rgba(92, 119, 181, .58);
  border-radius: 9px;
  box-shadow: inset 0 0 16px rgba(61, 77, 148, .08);
}

.st-select-control:focus-within { border-color: rgba(194, 169, 255, .96); box-shadow: 0 0 0 2px rgba(166, 135, 255, .19), inset 0 0 16px rgba(61, 77, 148, .12); }
.st-control-copy { min-width: 0; }
.st-control-copy b, .st-control-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-control-copy b { font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.st-control-copy small { margin-top: 3px; color: rgba(174, 183, 221, .7); font: 10px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .1em; }
.st-select-chevron { position: absolute; right: 18px; top: 21px; width: 9px; height: 9px; border-right: 2px solid #c5adff; border-bottom: 2px solid #c5adff; transform: rotate(45deg); pointer-events: none; }
.st-select-overlay { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.st-select-overlay option { color: #eef4ff; background: #0a1125; }

.st-volume-control { display: flex; align-items: center; gap: 17px; }
.st-reference-range {
  min-width: 0;
  flex: 1;
  height: 4px;
  appearance: none;
  border: 0;
  border-radius: 0;
  outline: none;
  background: linear-gradient(90deg, #b597ff 0 var(--value, 80%), rgba(102, 118, 177, .28) var(--value, 80%) 100%);
}
.st-reference-range:focus-visible { box-shadow: 0 0 0 3px rgba(182, 157, 255, .2), 0 0 13px rgba(182, 157, 255, .65); }
.st-reference-range::-webkit-slider-thumb { appearance: none; width: 15px; height: 15px; border: 0; border-radius: 1px; background: #c4a8ff; box-shadow: 0 0 9px rgba(194, 161, 255, .8); cursor: pointer; }
.st-reference-range::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 1px; background: #c4a8ff; box-shadow: 0 0 9px rgba(194, 161, 255, .8); cursor: pointer; }
.st-reference-value { width: 35px; color: #e9e1ff; font: 13px ui-monospace, Consolas, "MiSans", monospace; text-align: right; font-variant-numeric: tabular-nums; }

.st-action-control { height: 56px; }
.st-action {
  width: 100%; height: 100%; padding: 0 17px 0 20px; display: flex; align-items: center; justify-content: space-between;
  color: #f0ecff; background: rgba(5, 11, 27, .78); border: 1px solid rgba(92, 119, 181, .58); border-radius: 9px; font: inherit; cursor: pointer; text-align: left;
}
.st-action:hover, .st-action:focus-visible { border-color: rgba(194, 169, 255, .96); background: rgba(38, 30, 84, .64); box-shadow: 0 0 17px rgba(166, 135, 255, .16); }
.st-action.danger { color: #ffd7df; border-color: rgba(255, 117, 151, .58); }
.st-action.danger:hover, .st-action.danger:focus-visible { border-color: rgba(255, 145, 172, .96); background: rgba(102, 29, 59, .48); box-shadow: 0 0 17px rgba(255, 96, 145, .2); }
.st-action b, .st-action small { display: block; }
.st-action b { font-size: 15px; letter-spacing: .06em; }
.st-action small { margin-top: 3px; color: rgba(174, 183, 221, .7); font: 10px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .1em; }
.st-action i { width: 10px; height: 10px; border-top: 2px solid #c5adff; border-right: 2px solid #c5adff; transform: rotate(45deg); }
.st-toggle-control { height: 56px; display: flex; align-items: center; justify-content: flex-end; }

.st-footer {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 0 0;
  border-top: 1px solid rgba(76, 145, 215, .19);
}
.st-footer-copy { min-width: 0; padding-left: 5px; }
.st-footer-note { color: rgba(213, 218, 239, .83); font-size: 14px; letter-spacing: .06em; }
.st-footer-note i { color: #e1d1ff; font-style: normal; margin-right: 6px; }
.st-footer-meta { margin-top: 22px; color: rgba(135, 153, 197, .72); font: 11px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .08em; }
.st-footer-meta span { margin: 0 10px; color: rgba(141, 160, 213, .5); }
.st-save {
  width: 263px; height: 62px; display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 1px;
  color: #fff; background: linear-gradient(135deg, rgba(119, 83, 225, .84), rgba(74, 50, 143, .82)); border: 1px solid rgba(192, 167, 255, .96); border-radius: 11px; box-shadow: inset 0 0 18px rgba(219, 204, 255, .16), 0 0 20px rgba(102, 72, 224, .24); font: inherit; cursor: pointer; text-align: left;
}
.st-save:hover, .st-save:focus-visible, .st-save.saved { background: linear-gradient(135deg, rgba(151, 118, 245, .95), rgba(85, 57, 166, .9)); box-shadow: inset 0 0 18px rgba(219, 204, 255, .22), 0 0 25px rgba(145, 107, 255, .42); }
.st-save-icon { display: grid; place-items: center; color: #dfd2ff; }
.st-save-icon svg { display: block; }
.st-save b, .st-save small { display: block; }
.st-save b { font-size: 16px; letter-spacing: .1em; }
.st-save small { margin-top: 4px; color: rgba(223, 215, 255, .72); font: 10px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .1em; }


@media (max-width: 1100px) and (min-width: 769px) {
  .st-shell { padding-inline: 20px; }
  .st-header { grid-template-columns: 190px minmax(480px, 1fr) 110px; gap: 10px; }
  .st-setting-row { grid-template-columns: 52px 170px minmax(0, 1fr) 245px; padding-inline: 18px; gap: 8px; }
  .st-setting-description { font-size: 12px; }
  .st-setting-copy b { font-size: 16px; }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .st-wrap { display: grid; align-items: stretch; justify-items: stretch; }
  .st-shell {
    grid-template-rows: 45px minmax(0, 1fr) 49px;
    padding: 8px 10px 7px;
  }
  .st-header { grid-template-columns: 145px minmax(0, 1fr) 76px; gap: 6px; }
  .st-heading { padding-top: 0; }
  .st-heading-main { gap: 5px; font-size: 14px; }
  .st-heading-mark { font-size: 16px; }
  .st-heading-en { padding-left: 20px; margin-top: 0; font-size: 7px; }
  .st-tabs { height: 37px; gap: 3px; }
  .st-tab { min-height: 35px; gap: 4px; padding: 3px 5px; }
  .st-tab svg { width: 13px; height: 13px; }
  .st-tab b { font-size: 9px; letter-spacing: .02em; }
  .st-tab small { display: none; }
  .st-back { min-width: 68px; gap: 4px; padding-top: 0; }
  .st-back-icon { width: 26px; height: 26px; font-size: 20px; line-height: 23px; }
  .st-back-copy b { font-size: 10px; }
  .st-back-copy small { font-size: 7px; margin-top: 0; }
  .st-body { padding: 5px 0 3px; }
  .st-body-content, .st-tab-panel { gap: 4px; }
  .st-setting-row { min-height: 40px; height: 40px; grid-template-columns: 32px 92px minmax(0, 1fr) 124px; gap: 5px; padding: 0 7px 0 8px; }
  .st-setting-row::before { top: 6px; bottom: 6px; width: 1px; }
  .st-setting-icon { width: 24px; height: 24px; }
  .st-setting-copy b { font-size: 10px; letter-spacing: .01em; }
  .st-setting-copy small { margin-top: 1px; font-size: 7px; letter-spacing: .02em; }
  .st-setting-description { padding-left: 0; font-size: 8px; letter-spacing: 0; line-height: 1.15; }
  .st-select-control, .st-action-control { height: 33px; }
  .st-select-control { padding: 0 25px 0 8px; border-radius: 5px; }
  .st-control-copy b { font-size: 9px; letter-spacing: 0; }
  .st-control-copy small { margin-top: 0; font-size: 7px; }
  .st-select-chevron { right: 9px; top: 11px; width: 6px; height: 6px; border-width: 1px; }
  .st-volume-control { gap: 6px; }
  .st-reference-value { width: 26px; font-size: 8px; }
  .st-reference-range::-webkit-slider-thumb { width: 10px; height: 10px; }
  .st-reference-range::-moz-range-thumb { width: 10px; height: 10px; }
  .st-footer { gap: 7px; padding-top: 2px; }
  .st-footer-note { font-size: 8px; letter-spacing: 0; white-space: nowrap; }
  .st-footer-meta { margin-top: 3px; font-size: 6px; letter-spacing: .02em; }
  .st-footer-meta span { margin: 0 4px; }
  .st-save { width: 126px; height: 37px; gap: 5px; border-radius: 6px; }
  .st-save-icon svg { width: 17px; height: 17px; }
  .st-save b { font-size: 9px; letter-spacing: .02em; }
  .st-save small { margin-top: 1px; font-size: 6px; letter-spacing: .02em; }
  .st-toggle-control { height: 33px; }
  .st-toggle, .st-toggle svg { width: 76px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-orbit, .launcher-signal-line i { animation: none; }
}

/* 图鉴实时预览与数据提取过渡层 */
.cd-live-canvas { display: block; width: 88px; height: 64px; image-rendering: auto; }
.cd-portrait { width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 2px; border: 1px solid rgba(143, 214, 255, .16); border-radius: 50%; background: radial-gradient(circle, rgba(76, 167, 255, .08), transparent 68%); }
.cd-portrait .cd-live-canvas { width: 88px; height: 88px; }
.cd-ecard > .cd-live-canvas { width: 56px; height: 56px; }
.cd-wcard > .cd-live-canvas { width: 100%; height: 34px; margin: -2px 0 2px; border-bottom: 1px solid rgba(143, 214, 255, .12); }
.cd-transition { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; overflow: hidden; background: rgba(3, 8, 18, .9); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.cd-transition.on { opacity: 1; }
.cd-transition.out { opacity: 0; }
.cd-transition-grid { position: absolute; inset: 0; opacity: .22; background: linear-gradient(rgba(143, 214, 255, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 214, 255, .15) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.cd-transition-core { position: relative; width: 110px; height: 110px; border: 1px solid rgba(143, 214, 255, .44); border-radius: 50%; box-shadow: 0 0 34px rgba(76, 167, 255, .18), inset 0 0 24px rgba(179, 136, 255, .1); animation: codexCoreSpin 4s linear infinite; }
.cd-transition-core::before, .cd-transition-core::after { content: ''; position: absolute; inset: 18px; border: 1px dashed rgba(179, 136, 255, .5); border-radius: 50%; }
.cd-transition-core::after { inset: 37px; border-style: solid; border-color: rgba(143, 214, 255, .75); }
.cd-transition-core i, .cd-transition-core b, .cd-transition-core em { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: block; }
.cd-transition-core i { width: 1px; height: 92px; background: rgba(143, 214, 255, .5); }
.cd-transition-core b { width: 92px; height: 1px; background: rgba(143, 214, 255, .5); }
.cd-transition-core em { width: 13px; height: 13px; border: 2px solid #eef4ff; rotate: 45deg; box-shadow: 0 0 15px #8fd6ff; }
@keyframes codexCoreSpin { to { rotate: 360deg; } }
.cd-transition-copy { position: absolute; top: calc(50% + 78px); display: grid; justify-items: center; gap: 7px; color: rgba(143, 182, 220, .75); font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .16em; }
.cd-transition-copy strong { color: #eef4ff; font: 600 14px/1.2 "MiSans", system-ui, sans-serif; letter-spacing: .18em; }
.cd-transition-copy span { color: #7ee8c8; font-size: 9px; }
@media (prefers-reduced-motion: reduce) { .cd-transition-core { animation: none; } }

/* ---------- SORTIE 参考图响应式收口 ----------
   PC 保持三列任务卡；触屏/矮横屏优先保证标题、卡片和确认操作可达。
   规则放在文件末尾，覆盖早期 .ms-* 兼容样式，不改变其他界面。 */
@media (max-width: 1200px) and (min-width: 769px) {
  .ms-wrap { padding-inline: 28px; }
  .ms-header { grid-template-columns: 108px minmax(220px, 1fr) auto; }
  .ms-cards { gap: 14px; }
  .ms-card { padding-inline: 17px; }
  .ms-orbit-icon { height: 112px; }
  .ms-orbit-icon::before { width: 78px; height: 78px; }
  .ms-orbit-icon::after { width: 130px; }
  .ms-orbit-icon svg { width: 58px; height: 58px; }
  .ms-name { font-size: 17px; letter-spacing: .08em; }
  .ms-data-grid { gap: 4px; }
  .ms-data-grid small, .ms-data-grid strong { font-size: 7px; }
  .ms-status-panel { width: 205px; }
  .ms-support { width: 175px; }
  .ms-confirm { min-width: 310px; }
}

/* ================================================================
   ARCHIVE EXTRACTION · 主菜单档案入口过渡层
   与开局 .sf-loading 完全分离；只在点击“档案”后短暂出现。
   ================================================================ */
.sf-archive-extraction { position: absolute; inset: 0; display: block; overflow: hidden; isolation: isolate; color: #d8dcff; background: #020311; font-family: ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; }
.sf-archive-extraction::before { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .72; background: repeating-linear-gradient(0deg, rgba(113, 113, 214, .055) 0 1px, transparent 1px 3px); mix-blend-mode: screen; }
.sf-archive-extraction::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 1, 11, .48) 100%); }
.archive-extraction-dynamics { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: .94; pointer-events: none; mix-blend-mode: screen; }
.archive-extraction-axis { position: absolute; top: 49.5%; right: 0; left: 0; z-index: 2; display: grid; grid-template-columns: 1fr 8px 1fr; align-items: center; height: 10px; pointer-events: none; }
.archive-extraction-axis i { display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(130, 138, 255, .54) 18%, rgba(194, 184, 255, .54)); }
.archive-extraction-axis i:last-child { background: linear-gradient(90deg, rgba(194, 184, 255, .54), rgba(130, 138, 255, .54) 82%, transparent); }
.archive-extraction-axis b { display: block; width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid rgba(175, 168, 255, .78); background: #252157; box-shadow: 0 0 8px rgba(140, 124, 255, .52); }
.archive-extraction-center { position: absolute; top: 54.9%; left: 50%; z-index: 6; width: min(740px, 52vw); translate: -50% 0; text-align: center; }
.archive-extraction-center h1 { margin: 0; color: #eff0ff; font: 500 clamp(20px, 1.62vw, 30px)/1 "Arial Narrow", Bahnschrift, system-ui, "MiSans", sans-serif; letter-spacing: .34em; text-indent: .34em; text-shadow: 0 0 16px rgba(204, 198, 255, .26); }
.archive-extraction-center p { margin: 27px 0 0; color: #c2bfff; font: 500 clamp(12px, .91vw, 16px)/1 "MiSans", sans-serif; letter-spacing: .24em; text-indent: .24em; text-shadow: 0 0 12px rgba(130, 112, 255, .32); }
.archive-extraction-index { position: absolute; top: 20.6%; right: 7.1%; z-index: 6; width: min(410px, 25vw); color: rgba(125, 130, 194, .7); font: clamp(8px, .57vw, 11px)/1.55 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .025em; text-shadow: 0 0 7px rgba(65, 66, 161, .25); }
.archive-index-head { color: rgba(158, 161, 224, .65); letter-spacing: .08em; }
.archive-index-command { margin-top: 11px; color: rgba(104, 118, 191, .72); }
.archive-index-sectors { margin-top: 17px; }
.archive-index-sectors > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; white-space: nowrap; }
.archive-index-sectors span { min-width: 0; overflow: hidden; }
.archive-index-sectors b { color: rgba(158, 158, 223, .8); font-weight: 400; }
.archive-index-summary { margin-top: 14px; color: rgba(105, 113, 181, .72); }
.archive-index-summary > div { display: flex; gap: 4px; white-space: nowrap; }
.archive-index-summary i { flex: 1; overflow: hidden; color: rgba(72, 82, 148, .7); font-style: normal; }
.archive-index-summary b { color: rgba(166, 166, 232, .84); font-weight: 400; }
.archive-access-log,
.archive-hex-panel { position: absolute; left: 7.2%; z-index: 6; color: rgba(111, 119, 185, .72); font: clamp(8px, .57vw, 11px)/1.48 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .02em; text-shadow: 0 0 7px rgba(65, 66, 161, .22); }
.archive-access-log { top: 52.9%; width: min(370px, 25vw); }
.archive-hex-panel { top: 71.7%; width: min(430px, 28vw); }
.archive-access-log > div,
.archive-hex-panel > div { margin-bottom: 13px; color: rgba(144, 147, 211, .6); letter-spacing: .07em; }
.archive-access-log pre,
.archive-hex-stream { margin: 0; overflow: hidden; color: inherit; font: inherit; white-space: pre; }
.archive-hex-stream { color: rgba(94, 106, 174, .62); line-height: 1.46; }
.archive-progress-dock { position: absolute; top: 74.05%; left: 50%; z-index: 6; width: min(510px, 32vw); translate: -50% 0; }
.archive-progress-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.archive-percent { color: #d9d3ff; font: 500 clamp(13px, .95vw, 17px)/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; }
.archive-progress { position: relative; height: 11px; overflow: hidden; border: 1px solid rgba(119, 103, 226, .72); background: rgba(10, 9, 43, .7); box-shadow: 0 0 10px rgba(79, 55, 182, .2); }
.archive-progress-fill { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7a62d6, #c9a8ff); box-shadow: 0 0 13px rgba(167, 122, 255, .72); transition: width .16s ease-out; }
.archive-progress > b { position: absolute; inset: 0; opacity: .45; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(230, 213, 255, .7) 10px 12px, transparent 12px 15px); pointer-events: none; }
.archive-footer { position: absolute; top: 79.1%; right: 0; left: 0; z-index: 6; color: rgba(86, 91, 165, .66); font: 9px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .28em; text-align: center; text-indent: .28em; white-space: nowrap; }
@media (max-width: 1100px), (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .archive-extraction-index { right: 4%; width: min(390px, 31vw); }
  .archive-access-log, .archive-hex-panel { left: 4%; }
  .archive-access-log { width: 31vw; }
  .archive-hex-panel { width: 35vw; }
  .archive-progress-dock { width: min(510px, 40vw); }
}
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .archive-extraction-axis { top: 48%; }
  .archive-extraction-center { top: 54%; width: 84vw; }
  .archive-extraction-center h1 { font-size: clamp(15px, 3.1vw, 23px); letter-spacing: .2em; text-indent: .2em; }
  .archive-extraction-center p { margin-top: 14px; font-size: 9px; letter-spacing: .12em; text-indent: .12em; }
  .archive-extraction-index { top: 10%; right: 4%; width: 44vw; font-size: 6px; line-height: 1.35; }
  .archive-index-command { margin-top: 6px; }
  .archive-index-sectors { margin-top: 7px; }
  .archive-index-sectors > div:nth-child(n+7) { display: none; }
  .archive-index-summary { margin-top: 6px; }
  .archive-access-log { top: 55%; left: 4%; width: 44vw; font-size: 6px; }
  .archive-access-log > div, .archive-hex-panel > div { margin-bottom: 6px; }
  .archive-hex-panel { top: 74%; left: 4%; width: 44vw; font-size: 5px; }
  .archive-hex-stream { max-height: 42px; }
  .archive-progress-dock { top: 78%; width: 43vw; }
  .archive-progress { height: 7px; }
  .archive-percent { font-size: 10px; }
  .archive-footer { top: 87%; font-size: 6px; letter-spacing: .12em; text-indent: .12em; }
}

/* ================================================================
   ARCHIVE DETAIL · 参考图还原（PC）
   保留 codexUI 的数据/路由/滚动体，仅替换档案屏的空间组织：
   左侧分类导航 + 中央实时详情 + 右侧库存 + 底部终端状态栏。
   ================================================================ */
.cd-archive {
  --cd-bg: #020711;
  --cd-panel: rgba(4, 13, 30, .9);
  --cd-panel-soft: rgba(6, 18, 39, .72);
  --cd-line: rgba(93, 151, 237, .28);
  --cd-line-bright: rgba(103, 168, 255, .62);
  --cd-cyan: #8fd6ff;
  --cd-blue: #4d8dff;
  --cd-violet: #b77aff;
  --cd-green: #54e0ad;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr) 40px;
  gap: 12px;
  padding: 16px 20px 12px;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  color: #dce9ff;
  background:
    linear-gradient(rgba(48, 107, 186, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 107, 186, .03) 1px, transparent 1px),
    radial-gradient(circle at 48% 35%, rgba(31, 78, 153, .12), transparent 45%),
    var(--cd-bg);
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.cd-archive::before {
  content: '';
  position: absolute;
  inset: 15px 19px 11px;
  pointer-events: none;
  border: 1px solid rgba(80, 139, 235, .2);
  clip-path: polygon(0 2%, 2% 0, 98% 0, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0 98%);
}

.cd-topbar,
.cd-layout,
.cd-footer { position: relative; z-index: 1; min-width: 0; }
.cd-topbar { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: 36px; }
.cd-back {
  width: 116px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--cd-cyan);
  background: rgba(12, 33, 68, .58);
  border: 1px solid var(--cd-line-bright);
  clip-path: polygon(14px 0, 100% 0, 100% 78%, calc(100% - 14px) 100%, 0 100%, 0 26%);
  cursor: pointer;
  font: 600 14px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
  letter-spacing: .12em;
}
.cd-back span { font-size: 24px; line-height: 0; font-weight: 400; }
.cd-back:hover { color: #fff; background: rgba(47, 100, 190, .38); box-shadow: 0 0 22px rgba(71, 137, 255, .24); }
.cd-heading { display: flex; align-items: baseline; gap: 28px; min-width: 0; }
.cd-heading h1 { color: #f3f6ff; font: 500 clamp(26px, 2.2vw, 36px)/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .14em; }
.cd-heading span { overflow: hidden; color: #8497be; font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .3em; white-space: nowrap; }
.cd-record-id { display: inline-flex; align-items: center; gap: 9px; color: #7185ad; font: 10px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; white-space: nowrap; }
.cd-record-id b { color: #a3b9ea; font-weight: 500; }
.cd-record-id svg { color: var(--cd-blue); filter: drop-shadow(0 0 8px rgba(77, 141, 255, .7)); }

.cd-layout { display: grid; grid-template-columns: minmax(224px, 240px) minmax(600px, 1.7fr) minmax(420px, 1fr); gap: 18px; min-height: 0; }
.cd-sidebar { display: flex; flex-direction: column; min-height: 0; gap: 16px; }
.cd-tabs { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cd-tab {
  position: relative;
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  color: #91a4c9;
  text-align: left;
  background: linear-gradient(100deg, rgba(6, 18, 40, .94), rgba(6, 21, 46, .55));
  border: 1px solid rgba(76, 135, 224, .25);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 12px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.cd-tab::after { content: ''; position: absolute; right: 9px; bottom: 7px; width: 20px; height: 1px; background: rgba(112, 175, 255, .35); transform: skewX(-35deg); }
.cd-tab:hover { color: #e9f3ff; border-color: rgba(121, 174, 255, .62); transform: translateX(2px); }
.cd-tab.on { color: #f2f5ff; border-color: #a676ff; background: linear-gradient(100deg, rgba(45, 42, 111, .84), rgba(24, 41, 93, .76)); box-shadow: inset 3px 0 #b274ff, 0 0 18px rgba(124, 87, 255, .2); }
.cd-tab-icon { display: grid; place-items: center; color: currentColor; opacity: .86; }
.cd-tab-icon svg { width: 28px; height: 28px; filter: drop-shadow(0 0 5px currentColor); }
.cd-tab-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cd-tab-copy strong { overflow: hidden; font: 600 15px/1 "MiSans", "Segoe UI", sans-serif; letter-spacing: .08em; white-space: nowrap; text-overflow: ellipsis; }
.cd-tab-copy small { overflow: hidden; color: #8aa5d1; font: 9px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .1em; white-space: nowrap; text-overflow: ellipsis; }
.cd-tab em { align-self: start; padding-top: 4px; color: #8098c7; font: normal 10px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; }
.cd-tab.on .cd-tab-icon, .cd-tab.on .cd-tab-copy small, .cd-tab.on em { color: #bd9aff; }

.cd-access { margin-top: auto; min-height: 144px; padding: 13px 17px 11px; border-radius: 0; background: rgba(4, 15, 35, .86); border-color: var(--cd-line); }
.cd-access-title { padding-bottom: 12px; border-bottom: 1px solid rgba(94, 146, 226, .2); color: #879fd2; font: 10px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .12em; }
.cd-access-title span { float: right; color: #5c79ac; }
.cd-access-main { display: flex; align-items: center; gap: 13px; padding: 11px 0 8px; }
.cd-access-glyph { display: grid; place-items: center; color: var(--cd-blue); filter: drop-shadow(0 0 8px rgba(77, 141, 255, .6)); }
.cd-access-main strong { display: block; color: #ecf3ff; font: 600 24px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; }
.cd-access-main small { display: block; margin-top: 4px; color: #8193b7; font: 9px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .06em; }
.cd-access-track { height: 3px; margin: 0 3px 7px; background: #182c57; overflow: hidden; }
.cd-access-track i { display: block; width: 76%; height: 100%; background: linear-gradient(90deg, #316bff, #b373ff); box-shadow: 0 0 9px #4f86ff; }
.cd-access-exp { display: flex; justify-content: space-between; color: #6c8dc9; font: 9px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .06em; }
.cd-access-exp b { color: #558eff; font-weight: 400; }

.cd-main { display: grid; grid-template-rows: minmax(0, 1fr) 284px; gap: 8px; min-width: 0; min-height: 0; }
.cd-body { width: auto; max-width: none; max-height: none; min-height: 0; padding: 0; overflow: hidden; border-radius: 0; background: var(--cd-panel); border-color: var(--cd-line); box-shadow: 0 0 26px rgba(44, 102, 202, .12); }
.cd-body-content { width: 100%; height: 100%; min-height: 0; }
.cd-preview-panel { width: 100%; height: 100%; display: flex; flex-direction: column; }
.cd-panel-line { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 15px; border-bottom: 1px solid rgba(94, 146, 226, .22); color: #91b0e6; font: 11px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .1em; }
.cd-panel-line b { color: #b394ff; font-weight: 400; }
.cd-panel-line small { margin-left: auto; margin-right: 18px; color: #6584bb; font-size: 8px; letter-spacing: .08em; }
.cd-panel-line small i { color: var(--cd-green); font-style: normal; }
.cd-panel-line em { color: #6078ac; font: normal 11px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .32em; }
.cd-preview-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(350px, .87fr); flex: 1; min-height: 0; }
.cd-preview-stage { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 15px 15px 14px; border-right: 1px solid rgba(94, 146, 226, .2); background: radial-gradient(circle at 50% 65%, rgba(36, 99, 216, .14), transparent 38%), linear-gradient(rgba(65, 135, 235, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(65, 135, 235, .07) 1px, transparent 1px); background-size: auto, 34px 34px, 34px 34px; }
.cd-preview-stage::before { content: ''; position: absolute; inset: 55px 28px 52px; pointer-events: none; border: 1px solid rgba(83, 149, 255, .22); border-radius: 50%; transform: scaleY(.25); box-shadow: 0 0 40px rgba(50, 128, 255, .14); }
.cd-ship-heading { position: relative; z-index: 1; display: flex; gap: 11px; align-items: center; }
.cd-ship-mark { color: #5e9dff; filter: drop-shadow(0 0 7px rgba(77, 141, 255, .7)); }
.cd-ship-heading strong { display: block; color: #c6d7ff; font: 600 15px/1.2 ui-monospace, "MiSans", sans-serif; letter-spacing: .04em; }
.cd-ship-heading strong b { color: #d6e4ff; font-weight: 500; }
.cd-ship-heading small { display: block; margin-top: 5px; color: #7189b9; font: 9px/1 ui-monospace, "MiSans", sans-serif; letter-spacing: .08em; }
.cd-ship-stage { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex: 1; min-height: 0; }
.cd-ship-stage canvas { width: min(100%, 500px); height: min(100%, 355px); min-height: 200px; object-fit: contain; }
.cd-ship-arrow { width: 27px; height: 58px; color: #4f8fff; background: transparent; border: 0; cursor: pointer; font: 300 42px/1 ui-monospace, "MiSans", monospace; }
.cd-ship-arrow:hover { color: #d7e8ff; text-shadow: 0 0 13px #5f9eff; }
.cd-view-controls { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 13px; width: 215px; height: 31px; margin: 0 auto; color: #4e8fff; background: rgba(5, 19, 43, .88); border: 1px solid rgba(74, 137, 237, .3); font: 11px/1 ui-monospace, "MiSans", monospace; }
.cd-view-controls button { width: 24px; height: 24px; color: #4e8fff; border: 0; background: transparent; cursor: pointer; font-size: 15px; }
.cd-view-controls button:hover { color: #fff; }
.cd-view-controls b { color: #8ca7dc; font-size: 13px; font-weight: 500; }
.cd-overview { min-width: 0; padding: 0 10px 9px; overflow: hidden; }
.cd-subheading { display: flex; align-items: center; justify-content: space-between; min-height: 38px; color: #91b0e6; font: 11px/1 ui-monospace, "MiSans", monospace; letter-spacing: .1em; }
.cd-subheading b { color: #5f78ab; font-weight: 400; letter-spacing: .18em; }
.cd-data-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.cd-data-cell { min-width: 0; min-height: 49px; padding: 8px 8px 6px; background: rgba(7, 22, 47, .65); border: 1px solid rgba(84, 133, 209, .17); }
.cd-data-cell small, .cd-profile-block small, .cd-acq-block small { display: block; color: #718ab8; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .1em; }
.cd-data-cell strong { display: block; overflow: hidden; margin-top: 8px; color: #dce8ff; font: 12px/1 "MiSans", ui-monospace, sans-serif; letter-spacing: .03em; white-space: nowrap; text-overflow: ellipsis; }
.cd-profile-block { margin-top: 8px; padding: 10px; border: 1px solid rgba(84, 133, 209, .17); background: rgba(7, 22, 47, .45); }
.cd-profile-block p { margin-top: 8px; color: #a0b4d9; font: 11px/1.65 "MiSans", sans-serif; }
.cd-acq-block { margin-top: 8px; padding: 10px; border: 1px solid rgba(84, 133, 209, .17); background: rgba(7, 22, 47, .45); }
.cd-acq-block > div { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-top: 9px; }
.cd-acq-block span { display: flex; flex-direction: column; gap: 5px; overflow: hidden; color: #dce8ff; font: 9px/1 ui-monospace, "MiSans", sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.cd-acq-block span i { color: #718ab8; font: normal 8px/1 ui-monospace, "MiSans", monospace; }

.cd-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 8px; min-height: 0; }
.cd-system, .cd-loadout { min-width: 0; min-height: 0; padding: 0; overflow: hidden; border-radius: 0; background: var(--cd-panel); border-color: var(--cd-line); }
.cd-system-body { display: grid; grid-template-columns: 45% 55%; align-items: center; height: calc(100% - 67px); padding: 5px 10px 0; }
.cd-system-ship { display: grid; place-items: center; height: 100%; }
.cd-system-ship canvas { width: 100%; height: 100%; max-width: 240px; object-fit: contain; }
.cd-bars { display: flex; flex-direction: column; gap: 8px; padding: 5px 4px 0 6px; }
.cd-bar-row { display: grid; grid-template-columns: 1fr 31px; gap: 4px; color: #6e91d2; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .07em; }
.cd-bar-row b { color: #b9d1ff; font: 8px/1 ui-monospace, "MiSans", monospace; text-align: right; }
.cd-bar-row i { grid-column: 1 / -1; height: 5px; display: block; background: #182e5b; overflow: hidden; }
.cd-bar-row i em { display: block; height: 100%; background: repeating-linear-gradient(90deg, #387dff 0 5px, transparent 5px 7px); box-shadow: 0 0 7px rgba(76, 157, 255, .7); }
.cd-overall { display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 29px; padding: 0 17px; color: #6c89bb; font: 8px/1 ui-monospace, "MiSans", monospace; }
.cd-overall b { color: var(--cd-green); font: 9px/1 ui-monospace, "MiSans", monospace; letter-spacing: .08em; }
.cd-loadout-list { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; }
.cd-loadout-row { display: grid; grid-template-columns: 26px 112px minmax(0, 1fr) 35px; align-items: center; min-height: 29px; padding: 0 6px; color: #8ea7d5; background: rgba(9, 25, 52, .58); border: 1px solid rgba(84, 133, 209, .16); }
.cd-loadout-icon { display: grid; place-items: center; color: #80a9ff; }
.cd-loadout-icon svg { width: 19px; height: 19px; }
.cd-loadout-row small { color: #7f9ad0; font: 8px/1 ui-monospace, "MiSans", sans-serif; letter-spacing: .03em; }
.cd-loadout-row strong { overflow: hidden; color: #c9dcff; font: 10px/1 "MiSans", ui-monospace, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.cd-loadout-row > b { justify-self: end; padding: 4px 4px; color: #8bb2ff; background: rgba(37, 76, 151, .3); border: 1px solid rgba(83, 137, 237, .35); font: 8px/1 ui-monospace, "MiSans", monospace; }

.cd-inventory { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0 15px 12px; overflow: hidden; border-radius: 0; background: var(--cd-panel); border-color: var(--cd-line); }
.cd-inventory-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid rgba(94, 146, 226, .22); }
.cd-inventory-head > div { display: flex; align-items: baseline; gap: 20px; color: #91b0e6; font: 11px/1 ui-monospace, "MiSans", monospace; letter-spacing: .1em; }
.cd-inventory-head small { color: #e5ecff; font: 12px/1 ui-monospace, "MiSans", monospace; letter-spacing: 0; }
.cd-inventory-head button { width: 41px; height: 26px; color: #9ec7ff; background: rgba(42, 86, 171, .3); border: 1px solid rgba(105, 161, 255, .55); cursor: pointer; font-size: 20px; line-height: 20px; }
.cd-inventory-tabs { display: grid; grid-template-columns: repeat(var(--cd-filter-count, 6), minmax(0, 1fr)); gap: 4px; padding: 9px 0; }
.cd-inventory-tabs button, .cd-inventory-filters button, .cd-inventory-actions button { min-width: 0; color: #7f99ca; background: rgba(9, 25, 52, .52); border: 1px solid rgba(84, 133, 209, .17); cursor: pointer; font: 9px/1 ui-monospace, "MiSans", monospace; letter-spacing: .03em; }
.cd-inventory-tabs button { height: 26px; }
.cd-inventory-tabs button:hover, .cd-inventory-filters button:hover { color: #e7f0ff; border-color: var(--cd-line-bright); }
.cd-inventory-tabs button.on { color: #f2ecff; background: rgba(71, 44, 143, .52); border-color: #a875ff; box-shadow: inset 0 0 12px rgba(150, 102, 255, .16); }
.cd-inventory-filters { display: grid; grid-template-columns: 1fr 1fr 31px 31px; gap: 5px; padding-bottom: 9px; }
.cd-inventory-filters button { height: 27px; text-align: left; padding: 0 8px; }
.cd-inventory-filters button:nth-child(n+3) { padding: 0; text-align: center; }
.cd-inventory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 7px; flex: 1; min-height: 0; }
.cd-inventory-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 0; padding: 6px 8px 7px; color: #cfddfa; text-align: left; background: linear-gradient(155deg, rgba(17, 35, 73, .75), rgba(5, 15, 35, .8)); border: 1px solid rgba(88, 132, 205, .29); cursor: pointer; overflow: hidden; }
.cd-inventory-card:hover { border-color: #7faeff; box-shadow: 0 0 16px rgba(75, 135, 255, .2); }
.cd-inventory-card.on { border-color: #b27bff; box-shadow: inset 0 0 0 1px rgba(170, 117, 255, .45), 0 0 15px rgba(126, 80, 255, .16); }
.cd-inventory-card.locked { opacity: .52; }
.cd-inventory-card canvas { display: block; width: 100%; height: clamp(54px, 9vh, 88px); flex: 1 1 auto; min-height: 46px; }
.cd-inventory-card::before { content: '↗'; position: absolute; top: 3px; left: 3px; color: #a779ff; font: 14px/1 ui-monospace, "MiSans", monospace; }
.cd-inventory-name { display: block; overflow: hidden; max-width: 100%; color: #e1eaff; font: 11px/1.2 "MiSans", ui-monospace, sans-serif; letter-spacing: .04em; white-space: nowrap; text-overflow: ellipsis; }
.cd-inventory-card small { display: block; overflow: hidden; max-width: 100%; margin-top: 4px; color: #819bc8; font: 7px/1 ui-monospace, "MiSans", sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.cd-inventory-card > b { position: absolute; right: 7px; bottom: 20px; color: #76a4ff; font: 10px/1 ui-monospace, "MiSans", monospace; }
.cd-inventory-card time { display: block; margin-top: 6px; color: #7188b5; font: 7px/1 ui-monospace, "MiSans", monospace; align-self: flex-end; }
.cd-inventory-actions { display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px minmax(0, 1.15fr); gap: 7px; padding-top: 12px; }
.cd-inventory-actions button { height: 37px; color: #8aa9df; }
.cd-inventory-actions button:hover { color: #f4f7ff; border-color: #80adff; }
.cd-inventory-actions button.danger { color: #ee668c; border-color: rgba(238, 102, 140, .3); }

.cd-archive-placeholder { height: 100%; display: grid; place-content: center; justify-items: center; gap: 13px; color: #8ba8db; text-align: center; background: radial-gradient(circle, rgba(51, 103, 205, .13), transparent 48%); }
.cd-archive-placeholder svg { color: #6d9cff; filter: drop-shadow(0 0 12px rgba(81, 146, 255, .55)); }
.cd-archive-placeholder small, .cd-archive-placeholder b { color: #6a86be; font: 9px/1 ui-monospace, "MiSans", monospace; letter-spacing: .18em; }
.cd-archive-placeholder h2 { color: #e3edff; font: 500 25px/1 "MiSans", sans-serif; letter-spacing: .16em; }
.cd-archive-placeholder p { max-width: 360px; color: #8ba1ca; font: 12px/1.7 "MiSans", sans-serif; }
.cd-archive:not(.cd-detail-active) .cd-main { grid-template-rows: minmax(0, 1fr) 0; }
.cd-archive:not(.cd-detail-active) .cd-lower { display: none; }

.cd-footer { display: flex; align-items: center; gap: 20px; padding: 0 18px; border-top: 1px solid rgba(79, 132, 225, .28); border-bottom: 1px solid rgba(79, 132, 225, .22); color: #7189b7; font: 10px/1 ui-monospace, "MiSans", monospace; letter-spacing: .08em; }
.cd-footer-brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.cd-footer-brand span { color: #4f90ff; filter: drop-shadow(0 0 5px rgba(77, 141, 255, .6)); }
.cd-footer-brand b { color: #839bc7; font-weight: 500; }
.cd-footer-dashes { flex: 1; height: 5px; background: repeating-linear-gradient(110deg, #356de0 0 12px, transparent 12px 19px); opacity: .7; clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%); }
.cd-footer-dashes-right { max-width: 48px; flex: 0 0 48px; }
.cd-footer-meta { display: inline-flex; align-items: center; gap: 17px; white-space: nowrap; }
.cd-footer-meta i { width: 1px; height: 15px; background: rgba(116, 157, 230, .4); }
.cd-footer-meta b { color: #acbde4; font-weight: 400; }

@media (max-width: 1320px) and (min-width: 769px) {
  .cd-archive { padding-inline: 12px; }
  .cd-layout { grid-template-columns: 205px minmax(520px, 1.6fr) minmax(360px, 1fr); gap: 10px; }
  .cd-tab { min-height: 60px; grid-template-columns: 34px minmax(0, 1fr) 20px; padding-inline: 8px; }
  .cd-tab-copy strong { font-size: 12px; }
  .cd-tab-copy small { font-size: 7px; }
  .cd-preview-grid { grid-template-columns: 1fr; }
  .cd-overview { display: none; }
  .cd-preview-stage { border-right: 0; }
  .cd-loadout-row { grid-template-columns: 24px 92px minmax(0, 1fr) 32px; }
  .cd-inventory { padding-inline: 9px; }
  .cd-inventory-head > div { gap: 9px; font-size: 9px; }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .cd-archive { position: absolute; padding: 5px 6px; grid-template-rows: 35px minmax(0, 1fr) 24px; gap: 5px; }
  .cd-archive::before { inset: 3px; }
  .cd-topbar { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 7px; }
  .cd-back { width: 58px; height: 28px; gap: 3px; font-size: 8px; }
  .cd-back span { font-size: 16px; }
  .cd-heading { gap: 5px; }
  .cd-heading h1 { font-size: 19px; }
  .cd-heading span { display: none; }
  .cd-record-id { gap: 4px; font-size: 6px; }
  .cd-record-id svg { width: 19px; height: 19px; }
  .cd-layout { grid-template-columns: 126px minmax(0, 1fr); gap: 5px; }
  .cd-sidebar { gap: 5px; }
  .cd-tabs { gap: 3px; overflow: auto; }
  .cd-tab { min-height: 39px; grid-template-columns: 22px minmax(0, 1fr) 15px; gap: 3px; padding: 3px 4px; clip-path: none; }
  .cd-tab-icon svg { width: 17px; height: 17px; }
  .cd-tab-copy { gap: 2px; }
  .cd-tab-copy strong { font-size: 9px; letter-spacing: 0; }
  .cd-tab-copy small { font-size: 5px; letter-spacing: 0; }
  .cd-tab em { font-size: 7px; }
  .cd-access { min-height: 80px; padding: 5px; }
  .cd-access-title { padding-bottom: 4px; font-size: 6px; }
  .cd-access-main { gap: 4px; padding: 4px 0; }
  .cd-access-glyph svg { width: 24px; height: 24px; }
  .cd-access-main strong { font-size: 14px; }
  .cd-access-main small { margin-top: 2px; font-size: 5px; }
  .cd-access-exp { font-size: 5px; }
  .cd-main { grid-template-rows: minmax(0, 1fr) 117px; gap: 4px; }
  .cd-panel-line { min-height: 23px; padding-inline: 7px; font-size: 7px; }
  .cd-panel-line small { display: none; }
  .cd-preview-grid { grid-template-columns: 1.2fr .8fr; }
  .cd-preview-stage { padding: 5px; }
  .cd-ship-heading { gap: 4px; }
  .cd-ship-mark svg { width: 20px; height: 20px; }
  .cd-ship-heading strong { font-size: 8px; }
  .cd-ship-heading small { margin-top: 2px; font-size: 5px; }
  .cd-ship-arrow { width: 15px; font-size: 23px; }
  .cd-ship-stage canvas { min-height: 70px; height: 100%; }
  .cd-view-controls { width: 108px; height: 18px; gap: 3px; font-size: 6px; }
  .cd-view-controls button { width: 14px; height: 14px; font-size: 9px; }
  .cd-view-controls b { font-size: 7px; }
  .cd-overview { padding-inline: 4px; }
  .cd-subheading { min-height: 23px; font-size: 7px; }
  .cd-data-grid { gap: 2px; }
  .cd-data-cell { min-height: 31px; padding: 4px; }
  .cd-data-cell small, .cd-profile-block small, .cd-acq-block small { font-size: 5px; }
  .cd-data-cell strong { margin-top: 4px; font-size: 6px; }
  .cd-profile-block, .cd-acq-block { display: none; }
  .cd-lower { grid-template-columns: 1fr 1fr; gap: 4px; }
  .cd-system-body { height: calc(100% - 34px); padding: 0 3px; }
  .cd-bars { gap: 3px; padding: 0 3px; }
  .cd-bar-row { font-size: 5px; grid-template-columns: 1fr 21px; }
  .cd-bar-row b { font-size: 5px; }
  .cd-bar-row i { height: 2px; }
  .cd-overall { height: 11px; padding: 0 4px; gap: 3px; font-size: 5px; }
  .cd-overall b { font-size: 5px; }
  .cd-loadout-list { gap: 2px; padding: 3px; }
  .cd-loadout-row { grid-template-columns: 14px 48px minmax(0, 1fr) 22px; min-height: 18px; padding-inline: 2px; }
  .cd-loadout-icon svg { width: 12px; height: 12px; }
  .cd-loadout-row small, .cd-loadout-row strong, .cd-loadout-row > b { font-size: 5px; }
  .cd-loadout-row > b { padding: 2px; }
  .cd-inventory { display: none; }
  .cd-footer { gap: 5px; padding-inline: 4px; font-size: 6px; }
  .cd-footer-brand { gap: 3px; }
  .cd-footer-brand svg { width: 14px; height: 14px; }
  .cd-footer-dashes { display: none; }
  .cd-footer-meta { gap: 5px; margin-left: auto; font-size: 5px; }
  .cd-footer-meta span:first-child, .cd-footer-meta i:first-of-type { display: none; }
  .cd-archive:not(.cd-detail-active) .cd-main { grid-template-rows: minmax(0, 1fr); }
  .cd-archive:not(.cd-detail-active) .cd-lower { display: none; }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .ms-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-height: 100%;
    padding: calc(10px + var(--sa-t)) calc(10px + var(--sa-r)) calc(10px + var(--sa-b)) calc(10px + var(--sa-l));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .ms-wrap::after { display: none; }
  .ms-header { grid-template-columns: 78px minmax(0, 1fr); gap: 9px; min-height: 68px; }
  .ms-back { width: 72px; height: 34px; margin-top: 0; gap: 5px; font-size: 10px; }
  .ms-heading { gap: 3px; }
  .ms-kicker, .ms-instruction { font-size: 7px; letter-spacing: .1em; }
  .ms-heading h2 { font-size: clamp(16px, 4.6vw, 24px); letter-spacing: .1em; }
  .ms-command-meta { display: none; }
  .ms-main { flex: none; min-height: auto; }
  .ms-cards { width: 100%; height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .ms-card { min-height: 390px; padding: 8px 8px 14px; }
  .ms-card-topline { min-height: 13px; font-size: 6px; letter-spacing: .06em; }
  .ms-card-marker { margin-left: 2px; }
  .ms-card-signal { margin-right: 5px; transform: scale(.7); transform-origin: right center; }
  .ms-card-corner { width: 8px; height: 8px; }
  .ms-card-corner--tl { left: 6px; top: 6px; }
  .ms-card-corner--br { right: 6px; bottom: 6px; }
  .ms-orbit-icon { height: 76px; }
  .ms-orbit-icon::before { width: 54px; height: 54px; }
  .ms-orbit-icon::after { width: 90px; height: 30px; }
  .ms-orbit-icon svg { width: 42px; height: 42px; }
  .ms-sector-row { gap: 4px; min-height: 19px; font-size: 7px; letter-spacing: .04em; }
  .ms-sector-row em { padding: 2px 3px; font-size: 6px; }
  .ms-diamonds { font-size: 8px; }
  .ms-name { margin-top: 3px; font-size: clamp(10px, 1.8vw, 14px); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; }
  .ms-subname { margin-top: 3px; font-size: 10px; letter-spacing: .08em; }
  .ms-desc, .ms-region { margin-top: 5px; font-size: 6px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ms-region { margin-bottom: 7px; }
  .ms-threat-head { font-size: 7px; }
  .ms-threat-bar { height: 4px; margin: 4px 0 7px; }
  .ms-data-grid { gap: 2px; padding: 6px 0 7px; }
  .ms-data-grid > span { display: block; text-align: center; }
  .ms-data-icon { display: none; }
  .ms-data-grid small, .ms-data-grid strong { display: block; font-size: 5px; line-height: 1.25; }
  .ms-data-grid strong { margin-top: 2px; font-size: 5px; }
  .ms-objectives-head { margin: 6px 0 2px; font-size: 7px; letter-spacing: .04em; }
  .ms-objectives { min-height: 70px; font-size: 6px; line-height: 1.5; overflow: hidden; }
  .ms-objectives li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-objectives li::before { margin-right: 3px; }
  .ms-progress { left: 8px; bottom: 66px; font-size: 14px; }
  .ms-deploy { left: 8px; right: 8px; bottom: 12px; min-height: 31px; gap: 4px; }
  .ms-deploy b { font-size: 9px; letter-spacing: .06em; }
  .ms-deploy small { font-size: 6px; letter-spacing: .06em; }
  .ms-footer { flex: none; min-height: 76px; align-items: stretch; gap: 7px; padding-top: 10px; }
  .ms-footer-left { display: none; }
  .ms-confirm { min-width: 0; width: 100%; min-height: 58px; padding: 8px 14px; gap: 10px; }
  .ms-confirm-icon { font-size: 23px; }
  .ms-confirm span:last-child { gap: 4px; }
  .ms-confirm b { font-size: 11px; letter-spacing: .08em; }
  .ms-confirm small { font-size: 6px; letter-spacing: .05em; }
}

@media (orientation: landscape) and (max-height: 380px) and (pointer: coarse) {
  .ms-wrap { padding-top: 5px; padding-bottom: 5px; }
  .ms-header { min-height: 45px; }
  .ms-card { min-height: 275px; }
  .ms-orbit-icon { height: 52px; }
  .ms-orbit-icon::before { width: 39px; height: 39px; }
  .ms-orbit-icon::after { width: 68px; height: 24px; }
  .ms-orbit-icon svg { width: 29px; height: 29px; }
  .ms-objectives { min-height: 31px; max-height: 38px; }
  .ms-footer { min-height: 55px; padding-top: 6px; }
  .ms-confirm { min-height: 42px; }
}

/* ================================================================
   COMMANDER // ASCENSION
   指挥官升级与技能页：Reference image/stardust-upgrade-skills-reference-v1.png
   的 PC 基准实现。内容节点全部由 commandUI.js 实时生成，避免把数值做成
   一张不可交互的截图；右侧角色沿用用户确认的 RGBA 立绘。
   ================================================================ */
.command-wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  overflow: hidden;
  color: #d9e8ff;
  background-image:
    radial-gradient(ellipse at 72% 46%, rgba(14, 72, 140, .22), transparent 31%),
    linear-gradient(135deg, rgba(4, 13, 28, .94), rgba(2, 7, 17, .99)),
    url('../assets/ui/launcher/stardust-command-deck-v2-clean.webp'),
    url('../assets/ui/launcher/stardust-command-deck-v2-clean.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: 'Rajdhani', 'Bahnschrift SemiCondensed', 'Arial Narrow', "MiSans", monospace;
  letter-spacing: .08em;
  isolation: isolate;
}
.command-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .68;
  background-image:
    linear-gradient(rgba(43, 127, 207, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 127, 207, .075) 1px, transparent 1px),
    linear-gradient(rgba(43, 127, 207, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 127, 207, .028) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
  pointer-events: none;
}
.command-wrap::after {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: 8;
  border: 1px solid rgba(53, 142, 255, .38);
  clip-path: polygon(0 0, 3.5% 0, 3.7% 1%, 96% 1%, 96.3% 0, 100% 0, 100% 100%, 96.5% 100%, 96.2% 99%, 3.5% 99%, 3% 100%, 0 100%);
  pointer-events: none;
}
.command-noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .28;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(100, 180, 255, .025) 3px 4px);
  mix-blend-mode: screen;
}
.command-header {
  position: relative;
  z-index: 4;
  flex: 0 0 clamp(68px, 8vh, 92px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: 10px 24px 0;
  padding: 8px 20px;
  border: 1px solid rgba(68, 136, 208, .45);
  background: linear-gradient(90deg, rgba(4, 15, 32, .95), rgba(5, 19, 39, .58), rgba(4, 15, 32, .95));
  box-shadow: 0 0 22px rgba(13, 94, 189, .13), inset 0 -1px rgba(100, 179, 255, .12);
  clip-path: polygon(0 0, 12% 0, 12.6% 8%, 87.4% 8%, 88% 0, 100% 0, 100% 100%, 0 100%);
}
.command-header-telemetry,
.command-header-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6d8fb8;
  font-size: 10px;
  white-space: nowrap;
}
.command-header-telemetry i { width: 4px; height: 4px; border-radius: 50%; background: #168af5; box-shadow: 0 0 8px #168af5; }
.command-header-status { justify-content: flex-end; }
.command-header-status > b { color: #55d9ff; font-size: 19px; letter-spacing: .12em; }
.command-header-status strong { color: #64f1c1; font-size: 11px; }
.command-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #55f1bc; box-shadow: 0 0 12px #55f1bc; animation: commandOnline 1.7s ease-in-out infinite; }
.command-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.command-brand-mark { display: inline-flex; color: #dcecff; filter: drop-shadow(0 0 8px rgba(74, 166, 255, .85)); }
.command-brand-mark svg { width: 45px; height: 45px; }
.command-brand small { display: block; color: #55c8ff; font-size: 9px; text-align: left; letter-spacing: .2em; }
.command-brand h1 { margin: 2px 0 0; color: #f3f7ff; font-size: clamp(22px, 2.15vw, 38px); line-height: 1; letter-spacing: .075em; white-space: nowrap; text-shadow: 0 0 16px rgba(103, 190, 255, .5); }
.command-brand h1 b { color: #59c8ff; font-weight: 500; }

.command-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(320px, .93fr) minmax(430px, 1.12fr) minmax(360px, .88fr);
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  margin: 12px 24px 10px;
}
.command-panel {
  position: relative;
  z-index: 3;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(70, 139, 215, .64);
  background: linear-gradient(135deg, rgba(4, 17, 36, .94), rgba(3, 10, 24, .81));
  box-shadow: inset 0 0 24px rgba(13, 109, 218, .08), 0 0 10px rgba(0, 0, 0, .32);
  clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
}
.command-panel::before,
.command-panel::after { content: ''; position: absolute; width: 42px; height: 1px; background: #2caaff; opacity: .75; pointer-events: none; }
.command-panel::before { left: 19px; top: 15px; }
.command-panel::after { right: 19px; bottom: 15px; background: #6c4dff; }
.command-panel-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 20px 11px;
  border-bottom: 1px solid rgba(77, 137, 204, .35);
  color: #27a8ff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
}
.command-panel-title span { display: inline-flex; align-items: baseline; gap: 9px; }
.command-panel-title span small,
.command-section-title span small,
.command-points-readout span small,
.command-exp-line span small { color: #6e91b7; font-size: 9px; font-weight: 400; letter-spacing: .08em; }
.command-panel-title b { color: #587ca8; font-size: 8px; font-weight: 400; letter-spacing: .13em; }
.command-profile-panel { padding-bottom: 10px; }
.command-level-row { display: flex; align-items: baseline; gap: 9px; padding: 17px 25px 2px; }
.command-level-row span { color: #b9cce6; font-size: 28px; }
.command-level { color: #f0f6ff; font-size: clamp(58px, 5vw, 88px); line-height: .9; letter-spacing: .02em; text-shadow: 0 0 13px rgba(193, 227, 255, .38); }
.command-exp-line { display: flex; justify-content: space-between; gap: 10px; padding: 4px 26px 5px; color: #b0c5df; font-size: 13px; }
.command-exp-line span { display: inline-flex; align-items: baseline; gap: 8px; }
.command-exp-line b { color: #e8f1ff; font-weight: 500; }
.command-exp-track { height: 8px; margin: 0 26px 17px; border: 1px solid rgba(61, 149, 255, .5); background: #081528; }
.command-exp-fill { display: block; height: 100%; width: 54%; background: linear-gradient(90deg, #1178f4, #41ddff); box-shadow: 0 0 10px rgba(28, 160, 255, .85); transition: width .35s ease; }
.command-points-readout { display: flex; align-items: center; justify-content: space-between; margin: 0 18px 16px; padding: 9px 13px; border: 1px solid rgba(58, 129, 192, .48); background: rgba(8, 29, 52, .65); }
.command-points-readout span { display: flex; align-items: center; gap: 6px; color: #48d8ff; font-size: 15px; font-weight: 600; }
.command-points-readout span small { margin-left: 2px; }
.command-points-readout svg { color: #55dfff; filter: drop-shadow(0 0 5px rgba(48, 205, 255, .7)); }
.command-points-readout b { color: #f2f7ff; font-size: 24px; letter-spacing: .05em; }
.command-section-title { display: flex; justify-content: space-between; align-items: center; padding: 9px 22px 8px; border-top: 1px solid rgba(71, 127, 190, .35); border-bottom: 1px solid rgba(71, 127, 190, .28); color: #31bbff; font-size: 16px; font-weight: 600; }
.command-section-title span { display: inline-flex; align-items: baseline; gap: 8px; }
.command-section-title b { color: #5c7fa8; font-size: 8px; font-weight: 400; }
.command-attribute-row { position: relative; display: grid; grid-template-columns: 42px minmax(70px, 1fr) auto 92px 64px; align-items: center; gap: 9px; margin: 9px 14px; padding: 10px 8px; border: 1px solid rgba(83, 142, 210, .48); background: rgba(6, 25, 49, .73); animation: commandRise .38s both; animation-delay: var(--command-delay); }
.command-attribute-icon { display: grid; place-items: center; width: 36px; height: 36px; color: #37baff; border: 1px solid #1973c4; background: rgba(15, 67, 120, .5); clip-path: polygon(50% 0, 91% 23%, 91% 77%, 50% 100%, 9% 77%, 9% 23%); }
.command-attribute-copy strong { display: block; color: #edf5ff; font-size: 19px; letter-spacing: .04em; }
.command-attribute-copy small { display: block; color: #8eacce; font-size: 13px; line-height: 1.25; margin-top: 4px; }
.command-attribute-values { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.command-attribute-values b { color: #f4f7ff; font-size: 19px; }
.command-attribute-values span { color: #65bfff; font-size: 19px; }
.command-attribute-values em { color: #5ae5ff; font-style: normal; font-size: 19px; }
.command-attribute-meter,
.command-cooldown { display: flex; gap: 3px; }
.command-attribute-meter i { display: block; width: 7px; height: 12px; background: #1a2b3c; border: 1px solid rgba(98, 145, 183, .28); }
.command-attribute-meter i.is-on { background: #159ef5; box-shadow: 0 0 5px rgba(21, 158, 245, .5); }
.command-plus { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 42px; color: #dff5ff; border: 1px solid #1c8ced; background: linear-gradient(180deg, rgba(18, 101, 184, .85), rgba(8, 42, 89, .82)); cursor: pointer; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.command-plus:hover, .command-plus:focus-visible { color: white; background: #146cc5; box-shadow: 0 0 13px rgba(40, 159, 255, .55); outline: 1px solid #7ed6ff; outline-offset: 2px; }
.command-plus span { font-size: 30px; line-height: .78; }
.command-plus small { color: #96c8ef; font-size: 10px; margin-top: 4px; }

.command-tree-panel { display: flex; flex-direction: column; }
.command-tree-field { position: relative; flex: 0 0 58%; min-height: 250px; margin: 6px 20px 0; border: 1px solid rgba(39, 126, 218, .3); background: radial-gradient(circle at 50% 45%, rgba(20, 89, 163, .2), transparent 48%), repeating-linear-gradient(0deg, transparent 0 18px, rgba(52, 145, 226, .06) 18px 19px), repeating-linear-gradient(90deg, transparent 0 18px, rgba(52, 145, 226, .06) 18px 19px); }
.command-tree-field::before { content: '技能点路由 // 节点图'; position: absolute; left: 13px; bottom: 10px; color: #5a7fa8; font-size: 15px; letter-spacing: .08em; }
.command-tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.command-tree-lines line { stroke: #279ef3; stroke-width: .45; opacity: .8; filter: drop-shadow(0 0 2px rgba(39, 158, 243, .8)); }
.command-node { position: absolute; z-index: 2; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; color: #9dd8ff; border: 1px solid #238ee7; background: #071d3a; clip-path: polygon(50% 0, 88% 22%, 88% 78%, 50% 100%, 12% 78%, 12% 22%); transform: translate(-50%, -50%); cursor: pointer; transition: transform .2s, box-shadow .2s, color .2s; }
.command-node::before { content: ''; position: absolute; inset: 5px; border: 1px solid currentColor; opacity: .33; clip-path: inherit; }
.command-node svg { position: relative; width: 25px; height: 25px; }
.command-node:hover, .command-node:focus-visible { transform: translate(-50%, -50%) scale(1.12); outline: 1px solid #b4e7ff; outline-offset: 2px; }
.command-node.state-locked { color: #a47ff1; border-color: #8b46cc; background: #211348; opacity: .92; }
.command-node.state-locked svg { opacity: .45; }
.command-node.tone-gold { color: #fff0ae; border-color: #f0b52f; background: #49310a; box-shadow: 0 0 15px rgba(255, 191, 57, .48); }
.command-node.is-selected { box-shadow: 0 0 0 3px rgba(55, 170, 255, .15), 0 0 16px currentColor; }
.command-tree-orbit { position: absolute; left: 50%; top: 43%; width: 55%; height: 48%; border: 1px dashed rgba(72, 164, 246, .24); border-radius: 50%; transform: translate(-50%, -50%) rotate(-28deg); pointer-events: none; }
.command-tree-orbit.orbit-b { width: 30%; height: 70%; transform: translate(-50%, -50%) rotate(59deg); }
.command-node-info { flex: 1 1 auto; min-height: 0; margin: 8px 20px 16px; padding: 13px 18px; border: 1px solid rgba(167, 117, 37, .7); background: linear-gradient(135deg, rgba(38, 30, 13, .76), rgba(9, 21, 39, .88)); }
.command-info-kicker { color: #d4b35c; font-size: 13px; letter-spacing: .06em; }
.command-node-info h3 { margin: 6px 0 4px; color: #f3c54e; font-size: 22px; letter-spacing: .06em; }
.command-node-info p { margin: 0 0 10px; color: #c0cede; font-size: 15px; letter-spacing: .02em; line-height: 1.4; }
.command-info-stats { display: flex; justify-content: space-between; gap: 8px; color: #9ab0c8; font-size: 13px; }
.command-info-stats b { color: #4de8bf; margin-left: 4px; }
.command-node-buy { width: 100%; margin-top: 10px; padding: 7px; color: #f4d477; border: 1px solid #c49b35; background: rgba(106, 75, 18, .45); font-size: 15px; letter-spacing: .06em; cursor: pointer; }
.command-node-buy:hover, .command-node-buy:focus-visible { background: rgba(170, 120, 22, .55); outline: 1px solid #ffe39a; outline-offset: 2px; }
.command-node-buy:disabled { color: #7c8794; border-color: rgba(124, 135, 148, .35); background: rgba(21, 30, 43, .4); cursor: default; }

.command-skills-panel { padding-bottom: 12px; background: linear-gradient(135deg, rgba(4, 15, 33, .7), rgba(8, 20, 39, .38)); }
.command-skill-card { display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 8px 12px; margin: 9px 14px; padding: 10px; border: 1px solid rgba(60, 133, 209, .55); background: rgba(6, 24, 48, .73); animation: commandRise .38s both; animation-delay: var(--command-delay); }
.command-skill-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 70px; height: 70px; color: #36c2ff; border: 1px solid currentColor; background: radial-gradient(circle, rgba(12, 97, 178, .58), rgba(4, 20, 45, .72)); clip-path: polygon(10% 0, 90% 0, 100% 12%, 100% 88%, 90% 100%, 10% 100%, 0 88%, 0 12%); }
.command-skill-card.tone-violet .command-skill-icon { color: #bc72ff; background: radial-gradient(circle, rgba(105, 30, 176, .55), rgba(26, 8, 55, .76)); }
.command-skill-main { min-width: 0; }
.command-skill-main strong { display: block; overflow: hidden; color: #f0f4ff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.command-skill-main small { display: block; color: #7f9abc; font-size: 9px; margin: 2px 0 7px; }
.command-skill-main span { color: #a8bdd8; font-size: 10px; }
.command-cooldown { margin-top: 5px; }
.command-cooldown i { width: 8px; height: 7px; background: #263345; }
.command-cooldown i.is-on { background: #1ca8ef; box-shadow: 0 0 4px #1ca8ef; }
.command-skill-card.tone-violet .command-cooldown i.is-on { background: #bd5af4; box-shadow: 0 0 4px #bd5af4; }
.command-skill-action { grid-column: 2; width: 100%; padding: 5px 8px; color: #50f2dc; border: 1px solid #25d9c1; background: rgba(0, 101, 108, .26); font-size: 11px; letter-spacing: .1em; cursor: pointer; }
.command-skill-card.state-available .command-skill-action { color: #65aaff; border-color: #307ce9; background: rgba(25, 76, 173, .26); }
.command-skill-card.tone-violet .command-skill-action { color: #d177ff; border-color: #a13be7; background: rgba(92, 22, 148, .24); }
.command-skill-action:hover, .command-skill-action:focus-visible { filter: brightness(1.35); outline: 1px solid currentColor; outline-offset: 2px; }
.command-skill-action:disabled { cursor: default; opacity: .72; }
.command-passive-title { margin-top: 11px; }
.command-passive-card { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 9px; margin: 7px 14px; padding: 7px 10px; min-height: 47px; border: 1px solid rgba(58, 127, 202, .45); background: rgba(5, 22, 43, .75); }
.command-passive-icon { display: grid; place-items: center; width: 34px; height: 34px; color: #35bfff; border: 1px solid currentColor; clip-path: polygon(50% 0, 92% 22%, 92% 78%, 50% 100%, 8% 78%, 8% 22%); }
.command-passive-card.tone-violet .command-passive-icon { color: #b971ff; }
.command-passive-card strong { display: block; color: #edf4ff; font-size: 11px; }
.command-passive-card small { display: block; color: #8da0bc; font-size: 8px; margin-top: 2px; }
.command-passive-card em { display: block; margin-top: 3px; color: #42dbcc; font-size: 8px; font-style: normal; letter-spacing: .1em; }
.command-passive-card.state-available em { color: #5c9cff; }
.command-passive-card.state-locked em { color: #b05feb; }
.command-operator { position: absolute; z-index: 2; right: -2%; bottom: -1%; width: 29%; height: 93%; margin: 0; pointer-events: none; opacity: .98; filter: drop-shadow(0 0 24px rgba(38, 133, 255, .22)); }
.command-operator canvas { width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 1; filter: none; mix-blend-mode: normal; }
.command-operator figcaption { position: absolute; right: 10%; bottom: 2px; color: #76b2de; font-size: 8px; text-align: right; letter-spacing: .12em; }
.command-operator figcaption b, .command-operator figcaption span { display: block; }
.command-operator figcaption span { margin-top: 4px; color: #5be2bc; }

.command-footer { position: relative; z-index: 4; display: grid; grid-template-columns: 220px 330px 230px 1fr; align-items: center; gap: 12px; flex: 0 0 clamp(68px, 9vh, 96px); margin: 0 24px 10px; padding: 10px 0 0; border-top: 1px solid rgba(72, 137, 204, .48); }
.command-footer-btn { min-height: 54px; padding: 0 18px; color: #d8eaff; border: 1px solid #397ac1; background: linear-gradient(135deg, rgba(7, 34, 70, .92), rgba(5, 17, 37, .85)); font-size: 16px; font-weight: 700; letter-spacing: .1em; cursor: pointer; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.command-footer-btn span { margin-right: 8px; color: #7ec7ff; font-size: 24px; }
.command-footer-btn:hover, .command-footer-btn:focus-visible { color: #fff; border-color: #79c8ff; box-shadow: 0 0 15px rgba(51, 160, 255, .35); outline: 1px solid #9de2ff; outline-offset: 2px; }
.command-confirm { border-color: #168fe9; background: linear-gradient(135deg, rgba(12, 94, 179, .94), rgba(5, 39, 91, .9)); }
.command-confirm span { color: #c6edff; }
.command-reset { border-color: rgba(119, 148, 187, .72); }
.command-footer-status { display: flex; justify-content: flex-end; gap: clamp(12px, 2vw, 34px); min-width: 0; color: #7593b8; font-size: 8px; letter-spacing: .1em; }
.command-footer-status span { display: flex; flex-direction: column; gap: 5px; white-space: nowrap; }
.command-footer-status b { color: #45e0c0; font-size: 14px; letter-spacing: .06em; }
.command-footer-status span:nth-child(3) b { color: #49b9ff; }
.command-footer-status span:nth-child(4) b { color: #e0eaff; font-size: 13px; }
@keyframes commandRise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes commandOnline { 0%, 100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.18); } }

/* 档案页新增：成就 + 生涯统计聚合模块。 */
.archive-career-panel { min-height: 100%; padding: 14px; }
.archive-career-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; padding: 7px 8px 14px; border-bottom: 1px solid rgba(83, 145, 211, .38); }
.archive-career-heading small { color: #4dbbff; font-size: 9px; letter-spacing: .16em; }
.archive-career-heading h2 { margin: 4px 0 0; color: #edf5ff; font-size: 24px; letter-spacing: .08em; }
.archive-career-heading > span { color: #59dfbf; font-size: 9px; white-space: nowrap; }
.archive-career-tabs { display: flex; gap: 8px; padding: 12px 4px; }
.archive-career-tab { padding: 8px 15px; color: #7694b9; border: 1px solid rgba(66, 128, 192, .48); background: rgba(7, 25, 48, .72); cursor: pointer; font-size: 11px; letter-spacing: .08em; }
.archive-career-tab.on, .archive-career-tab:hover, .archive-career-tab:focus-visible { color: #e8f5ff; border-color: #39bfff; background: rgba(20, 92, 165, .45); outline: none; box-shadow: 0 0 10px rgba(40, 156, 255, .22); }
.archive-career-tab b { margin-left: 4px; color: #54e1bb; font-weight: 400; }
.archive-career-content { min-height: 0; }
.archive-career-content .achv-head { padding-left: 4px; padding-right: 4px; }

/* ================================================================
   COMMUNICATIONS / PILOT DOSSIER
   参考图 exec-22cec593... 的五列舰队档案。头像和蓝图是独立 Canvas，
   资料框、文本与扫描层保持 DOM/CSS，避免把整张参考图当运行时背景。
   ================================================================ */
.comms-wrap {
  --comms-bg: #020915;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr) 26px;
  gap: 10px;
  padding: 16px 26px 12px;
  overflow: hidden;
  color: #dceaff;
  background:
    linear-gradient(rgba(66, 120, 199, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 120, 199, .045) 1px, transparent 1px),
    radial-gradient(circle at 52% 42%, rgba(40, 106, 209, .14), transparent 54%),
    var(--comms-bg);
  background-size: 34px 34px, 34px 34px, auto, auto;
  font-family: ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
}
.comms-wrap::before {
  content: '';
  position: absolute;
  inset: 14px 23px 10px;
  pointer-events: none;
  border: 1px solid rgba(84, 142, 230, .34);
  clip-path: polygon(0 2%, 1.7% 0, 13% 0, 13.5% 2%, 72% 2%, 73% 0, 98.5% 0, 100% 2%, 100% 97%, 98.5% 100%, 1.5% 100%, 0 97%);
  box-shadow: inset 0 0 60px rgba(20, 76, 157, .08);
}
.comms-topbar, .comms-grid-shell, .comms-grid, .comms-footer { position: relative; z-index: 1; min-width: 0; }
.comms-topbar { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 22px; align-items: center; }
.comms-back {
  width: 108px; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  color: #87cfff; background: rgba(5, 23, 52, .72); border: 1px solid rgba(80, 157, 246, .64);
  clip-path: polygon(10px 0, 100% 0, 100% 76%, calc(100% - 10px) 100%, 0 100%, 0 25%);
  cursor: pointer; font: 600 11px/1 ui-monospace, "MiSans", monospace; letter-spacing: .12em;
}
.comms-back span { font-size: 19px; font-weight: 400; line-height: 0; }
.comms-back:hover, .comms-back:focus-visible { color: #fff; border-color: #a4e2ff; outline: 1px solid #a4e2ff; outline-offset: 3px; box-shadow: 0 0 18px rgba(55, 164, 255, .26); }
.comms-title { display: flex; align-items: baseline; gap: 19px; min-width: 0; }
.comms-title span { color: #e9f2ff; font: 500 clamp(20px, 1.3vw, 26px)/1 ui-monospace, "MiSans", monospace; letter-spacing: .22em; white-space: nowrap; }
.comms-title b { color: #7591c7; font: 10px/1 ui-monospace, "MiSans", monospace; letter-spacing: .24em; white-space: nowrap; }
.comms-command { display: flex; align-items: center; gap: 12px; color: #809ac5; font: 9px/1 ui-monospace, "MiSans", monospace; letter-spacing: .13em; white-space: nowrap; }
.comms-command i { width: 38px; height: 8px; display: block; border-top: 2px solid #5f9cff; border-bottom: 1px solid rgba(95, 156, 255, .45); transform: skewX(-30deg); }
.comms-command b { color: #5ee6c0; font-weight: 500; }
.comms-grid-shell { display: grid; grid-template-columns: clamp(34px, 4vw, 72px) minmax(0, 1fr) clamp(34px, 4vw, 72px); align-items: center; width: 100%; height: 100%; min-height: 0; }
.comms-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; width: 100%; height: min(100%, 840px); align-self: start; margin-top: 3px; }
.comms-page-nav { position: relative; z-index: 3; display: grid; place-items: center; align-self: center; justify-self: center; width: 48px; min-height: 112px; padding: 9px 4px; color: #5d9fda; border: 1px solid rgba(66, 133, 215, .4); background: linear-gradient(180deg, rgba(9, 37, 76, .72), rgba(3, 14, 34, .58)); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); cursor: pointer; transition: color .16s, border-color .16s, box-shadow .16s, transform .16s; }
.comms-page-nav span { display: block; color: #a8dcff; font: 400 35px/.8 "Segoe UI Symbol", "MiSans", sans-serif; text-shadow: 0 0 12px currentColor; }
.comms-page-nav b { writing-mode: vertical-rl; color: #739bd0; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .16em; }
.comms-page-nav i { display: block; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; opacity: .7; }
.comms-page-prev i { border-right-color: transparent; transform: rotate(-45deg); }
.comms-page-next i { border-left-color: transparent; transform: rotate(-45deg); }
.comms-page-nav:hover, .comms-page-nav:focus-visible { color: #e7f8ff; border-color: #5fcfff; outline: 1px solid rgba(111, 213, 255, .72); outline-offset: 3px; box-shadow: 0 0 24px rgba(54, 159, 255, .28), inset 0 0 18px rgba(58, 153, 255, .16); transform: translateY(-2px); }
.comms-page-nav:disabled { color: #315274; border-color: rgba(46, 82, 126, .34); cursor: wait; opacity: .62; transform: none; }
.comms-transition-signal { position: absolute; z-index: 4; inset: 50% 10% auto; display: flex; align-items: center; gap: 12px; opacity: 0; pointer-events: none; transform: translateY(-50%) scaleX(.78); transition: opacity .1s, transform .1s; }
.comms-transition-signal i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #61cfff 24%, #bd80ff 76%, transparent); box-shadow: 0 0 9px #4ea9ff; }
.comms-transition-signal b { color: #b7e9ff; font: 9px/1 ui-monospace, "MiSans", monospace; letter-spacing: .2em; text-shadow: 0 0 12px #62cfff; white-space: nowrap; }
.comms-wrap.comms-shift-next .comms-transition-signal, .comms-wrap.comms-shift-prev .comms-transition-signal { opacity: .95; transform: translateY(-50%) scaleX(1); }
.comms-wrap.comms-shift-next .comms-grid { animation: commsPageOutNext .125s ease-in both; }
.comms-wrap.comms-shift-prev .comms-grid { animation: commsPageOutPrev .125s ease-in both; }
.comms-wrap.comms-shift-arrive .comms-grid { animation: commsPageIn .33s cubic-bezier(.18,.82,.25,1) both; }
@keyframes commsPageOutNext { from { opacity: 1; transform: translateX(0) skewX(0); filter: blur(0); } to { opacity: .03; transform: translateX(-18px) skewX(-1.2deg); filter: blur(5px); } }
@keyframes commsPageOutPrev { from { opacity: 1; transform: translateX(0) skewX(0); filter: blur(0); } to { opacity: .03; transform: translateX(18px) skewX(1.2deg); filter: blur(5px); } }
@keyframes commsPageIn { from { opacity: .08; transform: translateX(0) scaleX(.985); filter: blur(5px) brightness(1.7); } 65% { opacity: .92; transform: translateX(0) scaleX(1.002); filter: blur(.4px) brightness(1.16); } to { opacity: 1; transform: none; filter: none; } }
.comms-card {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 200px 106px; min-width: 0; min-height: 0;
  overflow: hidden; border: 1px solid rgba(101, 151, 222, .52); background: linear-gradient(180deg, rgba(6, 23, 50, .76), rgba(2, 11, 28, .92));
  box-shadow: inset 0 0 28px rgba(35, 86, 162, .1), 0 0 11px rgba(17, 64, 126, .14);
  clip-path: polygon(0 8px, 8px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
}
.comms-card::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(91, 146, 224, .12); pointer-events: none; clip-path: polygon(0 7px, 7px 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.comms-card:hover { border-color: var(--comms-accent); box-shadow: inset 0 0 30px color-mix(in srgb, var(--comms-accent) 13%, transparent), 0 0 18px color-mix(in srgb, var(--comms-accent) 18%, transparent); }
.comms-portrait-panel { position: relative; min-height: 0; overflow: hidden; border-bottom: 1px solid rgba(93, 145, 218, .42); background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--comms-accent) 16%, transparent), transparent 45%), linear-gradient(rgba(94, 151, 233, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 151, 233, .065) 1px, transparent 1px); background-size: auto, 26px 26px, 26px 26px; }
.comms-portrait-panel::before { content: ''; position: absolute; inset: 24px 15px 10px; border: 1px solid color-mix(in srgb, var(--comms-accent) 34%, transparent); border-radius: 48% 48% 2% 2%; opacity: .65; pointer-events: none; }
.comms-pilot-canvas { position: absolute; inset: 35px 5px 3px; width: calc(100% - 10px); height: calc(100% - 38px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--comms-accent) 35%, transparent)); }
.comms-portrait-label { position: absolute; top: 11px; left: 14px; right: 14px; z-index: 2; display: flex; justify-content: space-between; color: #819dcc; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .13em; }
.comms-portrait-label b { color: var(--comms-accent); font-size: 13px; font-weight: 400; }
.comms-corner { position: absolute; z-index: 2; width: 19px; height: 19px; border-color: var(--comms-accent); opacity: .82; pointer-events: none; }
.comms-corner-tl { top: 8px; left: 8px; border-top: 2px solid; border-left: 2px solid; }
.comms-corner-tr { top: 8px; right: 8px; border-top: 2px solid; border-right: 2px solid; }
.comms-corner-bl { bottom: 8px; left: 8px; border-bottom: 2px solid; border-left: 2px solid; }
.comms-corner-br { right: 8px; bottom: 8px; border-right: 2px solid; border-bottom: 2px solid; }
.comms-pilot-scan { position: absolute; right: 12px; left: 12px; top: 20%; height: 1px; z-index: 2; background: linear-gradient(90deg, transparent, var(--comms-accent), transparent); opacity: .4; pointer-events: none; }
.comms-card-info { min-height: 0; padding: 14px 15px 8px; border-bottom: 1px solid rgba(93, 145, 218, .34); }
.comms-card-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.comms-class-glyph { flex: 0 0 42px; display: grid; place-items: center; width: 42px; height: 42px; color: var(--comms-accent); border: 1px solid color-mix(in srgb, var(--comms-accent) 72%, transparent); transform: rotate(45deg); font-size: 22px; text-shadow: 0 0 12px var(--comms-accent); }
.comms-class-glyph::first-letter { transform: rotate(-45deg); }
.comms-card-heading > div { min-width: 0; }
.comms-card-heading small { display: block; overflow: hidden; color: #718ab7; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .07em; white-space: nowrap; text-overflow: ellipsis; }
.comms-card-heading h2 { margin: 5px 0 3px; overflow: hidden; color: #e9f0ff; font: 600 clamp(18px, 1.15vw, 24px)/1 "MiSans", sans-serif; letter-spacing: .08em; white-space: nowrap; text-overflow: ellipsis; }
.comms-card-heading b { color: var(--comms-accent); font: 10px/1 ui-monospace, "MiSans", monospace; letter-spacing: .08em; }
.comms-voice-log { margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid rgba(93, 145, 218, .28); }
.comms-voice-log small { display: block; color: #5f7db1; font: 7px/1 ui-monospace, "MiSans", monospace; letter-spacing: .12em; }
.comms-voice-lines { display: grid; gap: 5px; margin: 7px 0 0; }
.comms-voice-line { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 5px; min-width: 0; }
.comms-voice-play { display: grid; place-items: center; width: 17px; height: 17px; padding: 0; border: 1px solid color-mix(in srgb, var(--comms-accent) 62%, transparent); color: var(--comms-accent); background: rgba(9, 27, 57, .46); font: 7px/1 ui-monospace, "MiSans", monospace; cursor: pointer; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
.comms-voice-play:hover, .comms-voice-play[data-playing="true"] { color: #051326; background: var(--comms-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--comms-accent) 40%, transparent); }
.comms-voice-play:focus-visible { outline: 1px solid #eff8ff; outline-offset: 2px; }
.comms-voice-line p { overflow: hidden; min-width: 0; margin: 0; color: #8ea3c9; font: 9px/1.35 "MiSans", sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.comms-ship-panel { min-height: 0; padding: 8px 10px 5px; background: rgba(1, 8, 21, .5); }
.comms-ship-meta { display: flex; justify-content: space-between; color: #657faa; font: 7px/1 ui-monospace, "MiSans", monospace; letter-spacing: .12em; }
.comms-ship-meta b { color: color-mix(in srgb, var(--comms-accent) 78%, #c3d7ff); font-weight: 400; }
.comms-ship-canvas { display: block; width: 100%; height: calc(100% - 17px); object-fit: contain; opacity: .92; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--comms-accent) 30%, transparent)); }
.comms-footer { display: flex; align-items: center; gap: 12px; padding: 0 12px; color: #6280b2; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .14em; }
.comms-footer i { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(89, 143, 226, .6) 0 5px, transparent 5px 12px); }
.comms-footer b { color: #5ee6c0; font-weight: 400; }
.archive-manual-shell { min-height: 100%; padding: 18px 22px 30px; background: linear-gradient(180deg, rgba(6, 27, 57, .28), transparent 34%), repeating-linear-gradient(0deg, rgba(86, 141, 226, .025) 0 1px, transparent 1px 4px); }
.archive-manual-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 4px 2px 16px; border-bottom: 1px solid rgba(94, 146, 226, .28); }
.archive-manual-head small { color: #6f9dd4; font: 9px/1 ui-monospace, "MiSans", monospace; letter-spacing: .16em; }
.archive-manual-head h2 { margin: 7px 0 0; color: #eef5ff; font: 500 25px/1 "MiSans", sans-serif; letter-spacing: .12em; }
.archive-manual-head > span { color: #5ee6c0; font: 8px/1.4 ui-monospace, "MiSans", monospace; letter-spacing: .08em; text-align: right; }
.archive-manual-content { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; padding: 17px 2px 8px; }
.archive-manual-content .hp-section { min-width: 0; padding: 14px 16px 15px; border: 1px solid rgba(78, 136, 221, .3); background: rgba(3, 15, 34, .68); clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.archive-manual-content .hp-section:first-child { grid-column: 1 / -1; }
.archive-manual-content .hp-title { margin-bottom: 12px; color: #81c9ff; font-size: 13px; letter-spacing: .2em; }
.archive-manual-content .hp-p { margin: 0; color: #b7c8e4; font-size: 11px; line-height: 1.7; }
.archive-manual-content .hp-key { font-size: 11px; border-bottom-color: rgba(91, 145, 224, .16); }
.archive-manual-content .hp-k { color: #ffd36b; }
.archive-manual-content .hp-v { color: #c4d8f8; }
.archive-manual-content .hp-ptext { font-size: 11px; }
.cd-archive.cd-manual-active .cd-layout { grid-template-columns: minmax(224px, 240px) minmax(0, 1fr); }
.cd-archive.cd-manual-active .cd-inventory { display: none; }
.cd-archive.cd-manual-active .cd-main { grid-template-rows: minmax(0, 1fr); }
.cd-archive.cd-manual-active .cd-lower { display: none; }

@media (max-width: 1400px) and (min-width: 769px) {
  .comms-wrap { padding-inline: 16px; }
  .comms-grid { gap: 6px; }
  .comms-card { grid-template-rows: minmax(0, 1fr) 182px 94px; }
  .comms-card-info { padding-inline: 10px; }
  .comms-card-heading h2 { font-size: 17px; }
  .comms-title { gap: 10px; }
  .comms-command { font-size: 7px; }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .comms-wrap { position: absolute; padding: 6px; grid-template-rows: 34px minmax(0, 1fr) 18px; gap: 5px; overflow: auto; }
  .comms-wrap::before { inset: 3px; }
  .comms-topbar { grid-template-columns: 58px minmax(0, 1fr); gap: 6px; }
  .comms-back { width: 58px; height: 27px; gap: 2px; font-size: 7px; }
  .comms-back span { font-size: 14px; }
  .comms-title { display: block; }
  .comms-title span { font-size: 12px; letter-spacing: .1em; }
  .comms-title b { display: block; margin-top: 2px; font-size: 6px; }
  .comms-command { display: none; }
  .comms-grid-shell { grid-template-columns: 30px minmax(0, 1fr) 30px; height: auto; align-items: start; }
  .comms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; height: auto; margin: 0; }
  .comms-page-nav { width: 25px; min-height: 84px; margin-top: 164px; padding: 5px 2px; }
  .comms-page-nav span { font-size: 24px; }
  .comms-page-nav b { display: none; }
  .comms-page-nav i { width: 12px; height: 12px; }
  .comms-transition-signal { inset: 42% 8%; }
  .comms-transition-signal b { font-size: 6px; }
  .comms-card { min-height: 410px; grid-template-rows: 220px 133px 57px; }
  .comms-card-heading h2 { font-size: 14px; }
  .comms-card-info { padding: 7px; }
  .comms-voice-lines { gap: 3px; margin-top: 5px; }
  .comms-voice-line { grid-template-columns: 14px minmax(0, 1fr); gap: 3px; }
  .comms-voice-play { width: 14px; height: 14px; font-size: 6px; }
  .comms-voice-line p { font-size: 8px; }
  .comms-class-glyph { flex-basis: 28px; width: 28px; height: 28px; font-size: 13px; }
  .comms-card-heading small, .comms-card-heading b, .comms-ship-meta, .comms-portrait-label { font-size: 6px; }
  .comms-footer { padding-inline: 3px; gap: 5px; font-size: 5px; }
  .archive-manual-content { grid-template-columns: 1fr; gap: 8px; }
  .archive-manual-content .hp-section:first-child { grid-column: auto; }
}

/* ================================================================
   局内 3 选 1 强化 → SORTIE 协议终端重构
   复用 modeSelect 的切角、扫描线与数据标签语言；颜色只随 state.mode 改变。
   仅作用于 .choice-bd，暂停界面仍由 pauseMenu 自己管理。
   ================================================================ */
.choice-bd {
  --choice-accent: #a55bff;
  --choice-rgb: 165, 91, 255;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(var(--choice-rgb), .11), transparent 48%),
    linear-gradient(180deg, rgba(1, 5, 17, .78), rgba(1, 4, 14, .92));
}

.choice-bd[data-mode="endless"] { --choice-accent: #21d9ff; --choice-rgb: 33, 217, 255; }
.choice-bd[data-mode="denial"] { --choice-accent: #ff4153; --choice-rgb: 255, 65, 83; }

.choice-bd::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .62;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(118, 169, 231, .045) 3px 4px),
    linear-gradient(rgba(var(--choice-rgb), .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--choice-rgb), .045) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  animation: choiceGridDrift 16s linear infinite;
}

.choice-bd::after {
  content: '';
  position: absolute;
  inset: 9% 6%;
  border: 1px solid rgba(var(--choice-rgb), .16);
  clip-path: polygon(0 13px, 13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px));
  pointer-events: none;
  opacity: .65;
}

@keyframes choiceGridDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(72px, 72px, 0); }
}

.choice-bd .choice-panel {
  position: relative;
  width: min(1000px, calc(100vw - 96px));
  max-width: none;
  max-height: calc(100vh - 110px);
  padding: 25px 30px 20px;
  display: flex;
  flex-direction: column;
  color: #eaf2ff;
  background:
    linear-gradient(180deg, rgba(6, 18, 43, .97), rgba(2, 9, 24, .98)),
    linear-gradient(90deg, rgba(var(--choice-rgb), .08), transparent 45%);
  border: 1px solid rgba(var(--choice-rgb), .66);
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(1, 14, 36, .95), 0 0 36px rgba(var(--choice-rgb), .18), inset 0 0 38px rgba(var(--choice-rgb), .08);
  clip-path: polygon(0 12px, 12px 0, calc(100% - 36px) 0, 100% 36px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 36px 100%, 0 calc(100% - 36px));
  overflow: hidden;
  animation: choicePanelIn .32s cubic-bezier(.18, .84, .25, 1.08) both;
}

.choice-bd .choice-panel::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(var(--choice-rgb), .13);
  clip-path: polygon(0 8px, 8px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 24px 100%, 0 calc(100% - 24px));
  pointer-events: none;
}

.choice-bd .choice-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 1px;
  background: var(--choice-accent);
  box-shadow: 0 0 16px var(--choice-accent);
  pointer-events: none;
}

@keyframes choicePanelIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.choice-bd .choice-topline,
.choice-bd .choice-context,
.choice-bd .choice-hint {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.choice-bd .choice-topline {
  justify-content: space-between;
  min-height: 18px;
  margin-bottom: 9px;
  color: #8398bd;
  font: 10px/1 ui-monospace, Consolas, "MiSans", monospace;
  letter-spacing: .17em;
}

.choice-bd .choice-kicker { color: var(--choice-accent); }
.choice-bd .choice-live { display: inline-flex; align-items: center; gap: 7px; color: #9eb0cc; font-size: 9px; letter-spacing: .1em; }
.choice-bd .choice-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--choice-accent); box-shadow: 0 0 9px var(--choice-accent); animation: choiceSignal 1.5s ease-in-out infinite; }

@keyframes choiceSignal {
  0%, 100% { opacity: .38; }
  50% { opacity: 1; }
}

.choice-bd .choice-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 0 2px 13px;
  color: #f0f5ff;
  text-align: left;
  text-shadow: 0 0 16px rgba(var(--choice-rgb), .32);
}

.choice-bd .choice-title strong {
  color: #eef5ff;
  font: 500 clamp(24px, 2vw, 34px)/1.05 "MiSans", "Segoe UI", sans-serif;
  letter-spacing: .16em;
}

.choice-bd .choice-title small {
  color: var(--choice-accent);
  font: 600 13px/1 ui-monospace, Consolas, "MiSans", monospace;
  letter-spacing: .14em;
  text-shadow: 0 0 10px rgba(var(--choice-rgb), .4);
}

.choice-bd .choice-context {
  gap: 10px;
  min-height: 27px;
  margin-bottom: 13px;
  padding: 6px 10px;
  color: #91a4c5;
  background: rgba(var(--choice-rgb), .055);
  border: 1px solid rgba(var(--choice-rgb), .2);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  font: 9px/1 ui-monospace, Consolas, "MiSans", monospace;
  letter-spacing: .14em;
}

.choice-bd .choice-context i {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--choice-accent), transparent);
}

.choice-bd .choice-context b { color: #d9e6fb; font-weight: 500; }
.choice-bd .choice-context em { margin-left: auto; color: var(--choice-accent); font-style: normal; font-size: 8px; letter-spacing: .1em; }

.choice-bd .choice-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.choice-bd .choice-card {
  position: relative;
  width: auto;
  min-width: 0;
  min-height: 294px;
  padding: 13px 15px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #eaf2ff;
  background: linear-gradient(180deg, rgba(9, 27, 58, .82), rgba(3, 12, 30, .93));
  border: 1px solid rgba(var(--choice-rgb), .35);
  border-radius: 0;
  box-shadow: inset 0 0 22px rgba(var(--choice-rgb), .045);
  clip-path: polygon(0 10px, 10px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 22px 100%, 0 calc(100% - 22px));
  cursor: pointer;
  text-align: center;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}

.choice-bd .choice-card::before {
  content: '';
  position: absolute;
  inset: 1px;
  pointer-events: none;
  opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(119, 171, 231, .035) 4px 5px);
  clip-path: inherit;
}

.choice-bd .choice-card::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--choice-accent), transparent);
  opacity: .42;
}

.choice-bd .choice-card:hover,
.choice-bd .choice-card:focus-visible {
  border-color: var(--choice-accent);
  background: linear-gradient(180deg, rgba(var(--choice-rgb), .2), rgba(3, 13, 33, .96));
  box-shadow: inset 0 0 28px rgba(var(--choice-rgb), .12), 0 0 18px rgba(var(--choice-rgb), .18);
  transform: translateY(-3px);
}

.choice-bd .choice-card:focus-visible {
  outline: 1px solid var(--choice-accent);
  outline-offset: 4px;
}

.choice-bd .choice-card-topline {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 17px;
  color: #7489ad;
  font: 9px/1 ui-monospace, Consolas, "MiSans", monospace;
  letter-spacing: .1em;
}

.choice-bd .choice-card-topline b { color: var(--choice-accent); font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.choice-bd .choice-card-topline small { overflow: hidden; max-width: 70%; text-overflow: ellipsis; white-space: nowrap; }
.choice-bd .choice-card-topline i { width: 22px; height: 3px; background: var(--choice-accent); box-shadow: -7px 0 rgba(var(--choice-rgb), .35); opacity: .8; }

.choice-bd .choice-icon {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  margin: 4px 0 2px;
  color: var(--choice-accent);
  border: 1px solid rgba(var(--choice-rgb), .55);
  background: radial-gradient(circle, rgba(var(--choice-rgb), .13), transparent 67%);
  clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
  box-shadow: 0 0 18px rgba(var(--choice-rgb), .14), inset 0 0 17px rgba(var(--choice-rgb), .1);
}

.choice-bd .choice-icon::after {
  content: '+';
  position: absolute;
  right: 7px;
  bottom: 4px;
  color: var(--choice-accent);
  font: 12px/1 ui-monospace, "MiSans", monospace;
  opacity: .75;
}

.choice-bd .choice-icon svg { width: 46px; height: 46px; filter: drop-shadow(0 0 7px var(--choice-accent)); }
.choice-bd .choice-name { position: relative; z-index: 1; min-height: 20px; color: #f0f5ff; font: 600 17px/1.2 "MiSans", "Segoe UI", sans-serif; letter-spacing: .1em; text-shadow: 0 0 10px rgba(var(--choice-rgb), .3); }
.choice-bd .choice-desc { position: relative; z-index: 1; min-height: 39px; max-width: 240px; color: #9aabc8; font: 11px/1.55 "MiSans", "Segoe UI", sans-serif; opacity: .92; }
.choice-bd .choice-fit { position: relative; z-index: 1; min-height: 17px; padding: 3px 9px; color: var(--choice-accent); background: rgba(var(--choice-rgb), .08); border: 1px solid rgba(var(--choice-rgb), .35); border-radius: 0; clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); font: 9px/1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .08em; opacity: 1; }

.choice-bd .choice-levels {
  position: relative;
  z-index: 1;
  width: 100%;
  justify-content: center;
  gap: 3px;
  margin-top: 2px;
}

.choice-bd .choice-dot { width: 13px; height: 4px; border-radius: 0; background: rgba(123, 153, 198, .16); clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
.choice-bd .choice-dot.on { background: var(--choice-accent); box-shadow: 0 0 6px rgba(var(--choice-rgb), .72); }
.choice-bd .choice-levels-txt { margin-left: 4px; color: #8da0c0; font: 10px/1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .08em; opacity: 1; }
.choice-bd .choice-select { position: relative; z-index: 1; margin-top: auto; padding-top: 8px; color: #7086aa; font: 8px/1 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .16em; }
.choice-bd .choice-select b { color: var(--choice-accent); font-weight: 500; }

.choice-bd .choice-hint {
  justify-content: space-between;
  gap: 16px;
  margin-top: 15px;
  padding: 9px 2px 0;
  color: #788baa;
  border-top: 1px solid rgba(var(--choice-rgb), .17);
  font: 9px/1 ui-monospace, Consolas, "MiSans", monospace;
  letter-spacing: .12em;
}

.choice-bd .choice-hint b { color: var(--choice-accent); font-weight: 400; }

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .choice-bd { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .choice-bd .choice-panel { width: min(620px, calc(100vw - 24px)); max-height: none; padding: 18px 14px 15px; }
  .choice-bd .choice-title { display: block; padding-bottom: 9px; }
  .choice-bd .choice-title strong { display: block; font-size: 22px; }
  .choice-bd .choice-title small { display: block; margin-top: 6px; font-size: 10px; }
  .choice-bd .choice-context em { display: none; }
  .choice-bd .choice-row { grid-template-columns: 1fr; gap: 9px; }
  .choice-bd .choice-card { min-height: 160px; padding: 10px 12px; }
  .choice-bd .choice-icon { width: 52px; height: 52px; }
  .choice-bd .choice-icon svg { width: 32px; height: 32px; }
  .choice-bd .choice-desc { min-height: 0; }
  .choice-bd .choice-hint { display: block; line-height: 1.6; }
  .choice-bd .choice-hint b { display: block; margin-top: 4px; }
}

/* ================================================================
   出击转场：复用 RESOURCE BOOTSTRAP 的真实加载层
   只换协议色/文案，不复制第二套 loading DOM；进度由 loadingUI 的实际任务完成数驱动。
   ================================================================ */
.sf-loading[data-variant="sortie"] {
  --loading-accent: #a55bff;
  --loading-accent-rgb: 165, 91, 255;
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--loading-accent-rgb), .16), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(var(--loading-accent-rgb), .12), transparent 48%),
    #020711;
}
.sf-loading[data-variant="sortie"][data-mode="endless"] { --loading-accent: #21d9ff; --loading-accent-rgb: 33, 217, 255; }
.sf-loading[data-variant="sortie"][data-mode="denial"] { --loading-accent: #ff4153; --loading-accent-rgb: 255, 65, 83; }
.sf-loading[data-variant="sortie"] .loading-frame,
.sf-loading[data-variant="sortie"] .loading-frame::before,
.sf-loading[data-variant="sortie"] .loading-frame::after,
.sf-loading[data-variant="sortie"] .loading-frame i { border-color: var(--loading-accent); }
.sf-loading[data-variant="sortie"] .loading-topline span,
.sf-loading[data-variant="sortie"] .loading-kicker,
.sf-loading[data-variant="sortie"] .loading-current,
.sf-loading[data-variant="sortie"] .loading-core-label span { color: var(--loading-accent); }
.sf-loading[data-variant="sortie"] .loading-terminal h1 { text-shadow: 0 0 18px rgba(var(--loading-accent-rgb), .42); }
.sf-loading[data-variant="sortie"] .loading-progress { border-color: rgba(var(--loading-accent-rgb), .68); box-shadow: 0 0 14px rgba(var(--loading-accent-rgb), .16); }
.sf-loading[data-variant="sortie"] .loading-progress > i { background: linear-gradient(90deg, color-mix(in srgb, var(--loading-accent) 48%, #098df8), var(--loading-accent)); box-shadow: 0 0 17px rgba(var(--loading-accent-rgb), .72); }
.sf-loading[data-variant="sortie"] .loading-loaded,
.sf-loading[data-variant="sortie"] .loading-stream em { color: var(--loading-accent); }
.sf-loading[data-variant="sortie"] .loading-stream { border-top-color: rgba(var(--loading-accent-rgb), .3); }
.sf-loading[data-variant="sortie"] .loading-side { border-color: rgba(var(--loading-accent-rgb), .32); }

@media (max-width: 1220px) {
  .command-header { margin-left: 14px; margin-right: 14px; }
  .command-content { grid-template-columns: minmax(290px, .9fr) minmax(370px, 1fr) minmax(300px, .82fr); margin-left: 14px; margin-right: 14px; }
  .command-footer { grid-template-columns: 175px 270px 180px 1fr; margin-left: 14px; margin-right: 14px; }
  .command-attribute-row { grid-template-columns: 36px minmax(60px, 1fr) auto 70px 54px; gap: 5px; }
  .command-attribute-values { gap: 2px; }
  .command-attribute-values b, .command-attribute-values em, .command-attribute-values span { font-size: 16px; }
  .command-attribute-meter i { width: 5px; }
  .command-plus { min-height: 38px; }
  .command-plus span { font-size: 25px; }
  .command-skill-card { grid-template-columns: 58px minmax(0, 1fr); }
  .command-skill-icon { width: 56px; height: 56px; }
  .command-skill-main strong { font-size: 12px; }
}

@media (min-width: 1221px) {
  /* 给右侧指挥官立绘留出独立舞台，面板比例更接近参考图的
     左侧档案 / 中央星图 / 右侧技能 + 角色四段层次。 */
  .command-content { padding-right: 18%; }
  .command-operator { right: -10%; width: 36%; }
  .command-operator figcaption { right: 42%; white-space: nowrap; }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .command-wrap { overflow: auto; }
  .command-header { flex: 0 0 56px; margin: 6px 8px 0; padding: 5px 9px; }
  .command-header-telemetry { display: none; }
  .command-header-status span:first-child { display: none; }
  .command-brand { gap: 6px; }
  .command-brand-mark svg { width: 28px; height: 28px; }
  .command-brand small { font-size: 6px; }
  .command-brand h1 { font-size: clamp(14px, 3.5vw, 23px); }
  .command-content { grid-template-columns: 1fr; flex: none; min-height: auto; margin: 8px; padding-right: 0; gap: 8px; }
  .command-panel { min-height: 360px; }
  .command-tree-panel { min-height: 530px; }
  .command-skills-panel { min-height: 620px; }
  .command-operator { right: -6%; width: 52%; height: 38%; opacity: .3; }
  .command-footer { grid-template-columns: 1fr 1fr; flex: none; margin: 0 8px 8px; padding-top: 8px; }
  .command-footer-btn { min-height: 44px; font-size: 12px; }
  .command-reset { grid-column: 1 / 2; }
  .command-footer-status { grid-column: 1 / -1; justify-content: space-between; padding: 4px 2px; }
  .command-footer-status span:nth-child(3), .command-footer-status span:nth-child(4) { display: none; }
}

/* 指挥页成长区重排：永久强化归入左侧属性，右侧只呈现全舰队技能库。 */
.command-profile-panel { overflow: hidden auto; scrollbar-width: none; -ms-overflow-style: none; }
.command-profile-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }
.command-permanent-row .command-attribute-icon svg { width: 24px; height: 24px; }
.command-permanent-row .command-attribute-copy small { overflow: visible; white-space: normal; }
.command-permanent-row.is-maxed { border-color: rgba(58, 209, 186, .5); }
.command-permanent-row.is-maxed .command-attribute-meter i.is-on { background: #1bc7aa; border-color: #5ce8c7; box-shadow: 0 0 5px rgba(48, 224, 187, .5); }
.command-permanent-row.is-maxed .command-plus { color: #58d4b8; border-color: rgba(57, 160, 149, .52); background: rgba(13, 62, 66, .42); cursor: default; }
.command-permanent-row.is-maxed .command-plus span { font-size: 20px; }
.command-growth-action { grid-column: 1 / -1; width: 100%; min-height: 25px; padding: 3px 4px; color: #59e7d1; border: 1px solid #1bbcae; background: rgba(0, 104, 108, .23); font-size: 10px; letter-spacing: .03em; cursor: pointer; }
.command-growth-action:hover, .command-growth-action:focus-visible { color: #fff; border-color: #8ffff0; background: rgba(0, 146, 148, .36); outline: 1px solid rgba(123, 255, 241, .78); outline-offset: 1px; }
.command-growth-action:disabled { color: #56b9a9; border-color: rgba(57, 160, 149, .42); background: rgba(13, 62, 66, .3); cursor: default; opacity: .85; }

.command-skills-panel { display: flex; flex-direction: column; min-height: 0; padding-bottom: 10px; }
.command-growth-note { flex: 0 0 auto; padding: 8px 17px 9px; color: #8eacca; font-size: 11px; letter-spacing: .02em; line-height: 1.35; white-space: normal; }
.command-skill-scroll-shell { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 8px; min-height: 0; flex: 1 1 auto; padding: 0 12px 12px 14px; }
.command-skill-library-viewport { min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.command-skill-library-viewport::-webkit-scrollbar { width: 0; height: 0; display: none; }
.command-skill-library-list { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 7px; padding: 1px 1px 14px 0; }
.command-class-skill-card { min-width: 0; min-height: 154px; padding: 9px; border: 1px solid color-mix(in srgb, var(--class-theme) 58%, #2879c7); background: linear-gradient(135deg, rgba(7, 30, 59, .92), rgba(4, 17, 37, .82)); animation: commandRise .34s both; animation-delay: var(--command-delay); }
.command-class-skill-head { position: relative; min-width: 0; padding: 0 0 6px; border-bottom: 1px solid rgba(76, 135, 200, .34); }
.command-class-skill-head::after { content: ''; position: absolute; right: 0; top: 3px; width: 13px; height: 1px; background: var(--class-theme); box-shadow: 0 4px 0 color-mix(in srgb, var(--class-theme) 60%, transparent); }
.command-class-skill-head span { display: block; color: #6f9bc4; font-size: 11px; letter-spacing: .03em; }
.command-class-skill-head strong { display: block; margin-top: 4px; overflow: hidden; color: #f0f7ff; font-size: 17px; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.command-class-skill-head small { display: block; margin-top: 3px; overflow: hidden; color: var(--class-theme); font-size: 11px; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.command-class-skill-list { display: grid; gap: 5px; padding-top: 6px; }
.command-class-skill-row { display: grid; grid-template-columns: 27px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 3px 7px; min-width: 0; padding: 6px; border: 1px solid rgba(57, 130, 207, .35); background: rgba(5, 23, 46, .68); }
.command-class-skill-row.is-passive { border-color: rgba(125, 79, 209, .46); }
.command-class-skill-row.is-owned { border-color: rgba(67, 224, 187, .5); }
.command-class-skill-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 26px; height: 26px; color: var(--class-theme); border: 1px solid currentColor; background: rgba(8, 77, 133, .5); clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0 86%, 0 14%); }
.command-class-skill-row.is-passive .command-class-skill-icon { color: #ba79ff; background: rgba(77, 30, 130, .48); }
.command-class-skill-icon svg { width: 19px; height: 19px; }
.command-class-skill-copy { min-width: 0; }
.command-class-skill-copy strong { display: block; overflow: hidden; color: #f1f6ff; font-size: 14px; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.command-class-skill-copy small { display: block; margin-top: 2px; overflow: hidden; color: #72c9f4; font-size: 11px; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.command-class-skill-row.is-passive .command-class-skill-copy small { color: #bd81ff; }
.command-class-skill-copy p { display: -webkit-box; overflow: hidden; margin: 3px 0 0; color: #b8c9dc; font-size: 12px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.command-class-skill-row .command-growth-action { grid-column: 2; min-height: 23px; font-size: 11px; }
.command-class-skill-row.is-owned .command-growth-action { color: #5ce8c7; border-color: rgba(67, 224, 187, .68); }

.command-skill-scrollbar { display: flex; flex-direction: column; align-items: center; min-height: 0; color: #4d9bda; }
.command-scroll-arrow { display: grid; place-items: center; width: 16px; height: 21px; padding: 0; color: #63cfff; border: 0; background: transparent; cursor: pointer; }
.command-scroll-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; }
.command-scroll-arrow:hover, .command-scroll-arrow:focus-visible { color: #fff; outline: 1px solid #56c9ff; outline-offset: 2px; }
.command-scroll-arrow:disabled { color: #294866; cursor: default; }
.command-scroll-track { position: relative; flex: 1 1 auto; width: 16px; min-height: 60px; margin: 4px 0; cursor: pointer; }
.command-scroll-track-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(57, 126, 193, .7); stroke-width: 1; pointer-events: none; }
.command-scroll-thumb { position: absolute; top: 0; left: 1px; display: block; width: 14px; min-height: 22px; color: #5de0ff; cursor: grab; filter: drop-shadow(0 0 4px rgba(65, 192, 255, .45)); }
.command-scroll-thumb:active { cursor: grabbing; }
.command-scroll-thumb svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; pointer-events: none; }
.command-skill-scrollbar.is-disabled { opacity: .48; }

/* 桌面 1920×1080 的左栏需要一次看完 3 项基础属性 + 6 项永久强化；
   保持中文正文可读的同时收紧行间距，避免把关键强化藏在滚动区底部。 */
@media (min-width: 1221px) {
  /* 1920×1080 基准需要一次看完 3 项基础属性 + 6 项永久强化；
     只压缩空白，不缩小中文正文，短视口仍可滚动查看完整列表。 */
  .command-profile-panel { overflow-y: auto; }
  .command-exp-track { margin-bottom: 12px; }
  .command-points-readout { margin-bottom: 10px; padding-top: 8px; padding-bottom: 8px; }
  .command-section-title { padding-top: 7px; padding-bottom: 6px; }
  .command-attribute-row { margin-top: 2px; margin-bottom: 2px; padding-top: 5px; padding-bottom: 5px; }
  .command-attribute-icon { width: 30px; height: 30px; }
  .command-attribute-copy strong { font-size: 17px; }
  .command-attribute-copy small { font-size: 12px; line-height: 1.2; }
  .command-attribute-values b, .command-attribute-values span, .command-attribute-values em { font-size: 17px; }
  .command-attribute-meter i { height: 10px; }
  .command-plus { min-height: 34px; }
  .command-plus span { font-size: 24px; }

  /* 技能库正文放大一级，牺牲少量首屏卡片数量换取实际可读性；滚动条保留。 */
  .command-growth-note { font-size: 12px; }
  .command-class-skill-head span { font-size: 12px; }
  .command-class-skill-head strong { font-size: 18px; }
  .command-class-skill-head small { font-size: 12px; }
  .command-class-skill-copy strong { font-size: 15px; }
  .command-class-skill-copy small { font-size: 12px; }
  .command-class-skill-copy p { font-size: 13px; line-height: 1.4; }
  .command-class-skill-row .command-growth-action { font-size: 12px; }
}

@media (max-width: 1220px) {
  .command-growth-note { padding-left: 12px; padding-right: 12px; }
  .command-skill-scroll-shell { padding-left: 10px; padding-right: 9px; }
  .command-class-skill-card { min-height: 128px; }
}

/* ================================================================
   舰队终端（shopUI.js）
   统一承载机体 / 装备 / 队友 / 武器库 / 作战补给。
   视觉语言沿用现有蓝紫终端 token，布局以 PC 16:9 为主并保留窄屏
   单列降级；不要把永久强化或技能旧页签重新放回这里。
   ================================================================ */
.fleet-wrap {
  align-items: center;
  justify-content: center;
  padding: calc(18px + var(--sa-t)) calc(18px + var(--sa-r)) calc(18px + var(--sa-b)) calc(18px + var(--sa-l));
  background:
    radial-gradient(circle at 52% 18%, rgba(48, 119, 214, .12), transparent 38%),
    linear-gradient(135deg, rgba(3, 12, 28, .72), rgba(4, 7, 18, .9));
}
.fleet-shell {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(96vw, 1640px);
  height: min(94vh, 1000px);
  min-width: 0;
  min-height: 0;
  padding: 18px 22px 14px;
  border: 1px solid rgba(83, 171, 255, .45);
  background:
    linear-gradient(rgba(70, 144, 224, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 144, 224, .035) 1px, transparent 1px),
    rgba(3, 11, 27, .88);
  background-size: 32px 32px, 32px 32px, auto;
  box-shadow: 0 0 50px rgba(28, 93, 189, .18), inset 0 0 34px rgba(31, 88, 174, .08);
  clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}
@media (min-width: 769px) {
  .fleet-wrap {
    padding: max(2px, var(--sa-t)) max(15px, var(--sa-r)) max(16px, var(--sa-b)) max(15px, var(--sa-l));
  }
  .fleet-shell {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
}
.fleet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(78, 166, 246, .26);
}
.fleet-head-left, .fleet-head-right, .fleet-heading, .fleet-detail-title, .fleet-tab-intro, .fleet-group-head,
.fleet-weapon-shop-top, .fleet-footer, .fleet-footer-actions, .fleet-meta, .fleet-section-head, .fleet-detail-topline,
.fleet-module-head, .fleet-stat, .fleet-wing-status {
  display: flex;
  align-items: center;
}
.fleet-head-left { gap: 18px; min-width: 0; }
.fleet-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: #8fd6ff;
  border: 1px solid rgba(78, 166, 246, .48);
  background: rgba(8, 33, 68, .65);
  font: inherit;
  font-size: 11px;
  letter-spacing: .18em;
  cursor: pointer;
}
.fleet-back:hover, .fleet-back:focus-visible { color: #fff; border-color: #69d7ff; outline: none; box-shadow: 0 0 16px rgba(63, 192, 255, .22); }
.fleet-heading { flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.fleet-kicker, .fleet-section-kicker {
  color: #4bbcf6;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.fleet-heading h1 {
  color: #f1f7ff;
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
}
.fleet-subtitle { color: #7797bb; font-size: 9px; letter-spacing: .22em; }
.fleet-head-right { flex: 0 0 auto; gap: 18px; }
.fleet-link-status { color: #69e5be; font-size: 10px; letter-spacing: .12em; white-space: nowrap; }
.fleet-link-status i, .fleet-live-pill i, .fleet-wing-status i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.fleet-balance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 142px;
  padding: 8px 12px;
  border: 1px solid rgba(108, 161, 235, .45);
  background: rgba(9, 27, 55, .82);
}
.fleet-star { display: inline-flex; width: 22px; color: #74d7ff; filter: drop-shadow(0 0 5px rgba(90, 209, 255, .55)); }
.fleet-star svg { width: 22px; height: 22px; }
.fleet-balance b { display: block; color: #fff; font-size: 16px; letter-spacing: .08em; }
.fleet-balance small { display: block; color: #6f9dcc; font-size: 7px; letter-spacing: .18em; }
.fleet-meta {
  gap: 20px;
  min-height: 30px;
  color: #607fa8;
  font-size: 9px;
  letter-spacing: .1em;
  border-bottom: 1px solid rgba(78, 166, 246, .16);
}
.fleet-meta b { color: #92b2d6; font-weight: 500; }
.fleet-meta strong { color: #d8edff; font-weight: 500; }
.fleet-meta-spacer { flex: 1; }
.fleet-tabs { display: flex; gap: 8px; padding: 12px 0; }
.fleet-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 18px;
  color: #7d9bbd;
  border: 1px solid rgba(72, 141, 214, .35);
  background: rgba(7, 25, 52, .72);
  font: inherit;
  font-size: 11px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.fleet-tab:hover, .fleet-tab:focus-visible, .fleet-tab.on { color: #eef8ff; border-color: #65c9ff; background: rgba(22, 79, 142, .58); outline: none; box-shadow: inset 0 -2px 0 #6bd9ff, 0 0 14px rgba(62, 164, 255, .14); }
.fleet-tab-mark { display: inline-flex; width: 18px; height: 18px; color: #57caff; }
.fleet-tab-mark svg { width: 18px; height: 18px; }
.fleet-wrap .fleet-body { width: 100%; max-width: none; height: 100%; max-height: none; min-height: 0; padding: 0; overflow: hidden; border-color: rgba(75, 151, 231, .34); border-radius: 2px; background: rgba(3, 13, 31, .72); }
.fleet-body-content { display: block; min-height: 100%; padding: 14px; }
.fleet-frame-layout { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(430px, 1.65fr) minmax(260px, .9fr); gap: 12px; min-height: 610px; }
.fleet-frame-list, .fleet-frame-detail, .fleet-portrait-panel { min-width: 0; min-height: 0; border-radius: 2px; background: rgba(6, 21, 45, .72); }
.fleet-wingman-layout { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(430px, 1.65fr) minmax(260px, .9fr); gap: 12px; min-height: 610px; }
.fleet-frame-list { overflow: hidden; }
.fleet-section-head { justify-content: space-between; gap: 8px; min-height: 50px; padding: 10px 12px; border-bottom: 1px solid rgba(80, 163, 242, .22); }
.fleet-section-head strong { margin-left: auto; color: #edf7ff; font-size: 14px; font-weight: 500; letter-spacing: .1em; }
.fleet-section-head em { color: #6d9fca; font-size: 8px; font-style: normal; letter-spacing: .12em; white-space: nowrap; }
.fleet-frame-filter-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  padding: 6px 7px 5px;
  border-bottom: 1px solid rgba(80, 163, 242, .18);
}
.fleet-frame-filter-tabs button {
  min-width: 0;
  min-height: 39px;
  padding: 4px 2px;
  color: #6e8eaf;
  border: 1px solid rgba(72, 141, 214, .25);
  background: rgba(7, 25, 52, .62);
  font: inherit;
  font-size: 7px;
  letter-spacing: .04em;
  cursor: pointer;
}
.fleet-frame-filter-tabs button small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #56799f;
  font-size: 7px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fleet-frame-filter-tabs button:hover,
.fleet-frame-filter-tabs button:focus-visible,
.fleet-frame-filter-tabs button[aria-pressed="true"] {
  color: #f0eaff;
  border-color: #b388ff;
  background: rgba(102, 58, 181, .34);
  outline: none;
  box-shadow: inset 0 -2px 0 #c29dff, 0 0 10px rgba(179, 136, 255, .14);
}
.fleet-frame-filter-tabs button[aria-pressed="true"] small { color: #d0b9ff; }
.fleet-frame-list { display: flex; flex-direction: column; }
.fleet-frame-list-content { display: grid; flex: 1 1 auto; min-height: 0; gap: 4px; padding: 7px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(86, 174, 255, .65) rgba(5, 22, 48, .52); }
.fleet-frame-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 68px;
  padding: 9px 8px;
  color: #9bb8d9;
  border: 1px solid transparent;
  border-left: 2px solid var(--frame-accent, #4fc3f7);
  background: rgba(9, 30, 58, .42);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fleet-frame-row:hover, .fleet-frame-row:focus-visible { color: #f3faff; border-color: rgba(78, 179, 255, .55); outline: none; background: rgba(19, 72, 125, .55); }
.fleet-frame-row.sel { color: #fff; border-color: var(--frame-accent, #4fc3f7); background: linear-gradient(90deg, color-mix(in srgb, var(--frame-accent, #4fc3f7) 15%, transparent), rgba(11, 54, 99, .74)); box-shadow: inset 0 0 18px color-mix(in srgb, var(--frame-accent, #4fc3f7) 12%, transparent); }
.fleet-frame-row.locked { opacity: .62; }
.fleet-frame-sigil { display: inline-flex; width: 21px; height: 21px; color: var(--frame-accent, #4fc3f7); }
.fleet-frame-sigil svg { width: 21px; height: 21px; }
.fleet-frame-row-copy { min-width: 0; }
.fleet-frame-row-copy b, .fleet-frame-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-frame-row-copy b { font-size: 12px; font-weight: 500; }
.fleet-frame-row-copy small { margin-top: 2px; color: #6e8eaf; font-size: 8px; letter-spacing: .03em; }
.fleet-frame-state { color: var(--frame-accent, #4fc3f7); font-size: 8px; letter-spacing: .1em; }
.fleet-frame-detail { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 14px; }
.fleet-detail-topline, .fleet-module-head { justify-content: space-between; gap: 10px; }
.fleet-live-pill { color: #e7a5c4; font-size: 8px; letter-spacing: .16em; }
.fleet-live-pill.on { color: #6be4bd; }
.fleet-detail-title { justify-content: space-between; gap: 12px; }
.fleet-detail-title h2 { font-size: clamp(22px, 1.7vw, 30px); font-weight: 500; letter-spacing: .12em; }
.fleet-detail-title p { margin-top: 4px; color: #7897b8; font-size: 10px; }
.fleet-detail-price { color: #66c9fb; font-size: 9px; letter-spacing: .12em; text-align: right; }
.fleet-frame-visual { position: relative; min-height: 142px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--frame-accent, #4fc3f7) 45%, transparent); background: radial-gradient(ellipse at 50% 48%, color-mix(in srgb, var(--frame-accent, #4fc3f7) 13%, transparent), rgba(3, 14, 33, .8)); }
.fleet-frame-visual::before, .fleet-frame-visual::after { position: absolute; content: ""; pointer-events: none; }
.fleet-frame-visual::before { inset: 0; background: linear-gradient(90deg, transparent 49.8%, rgba(111, 201, 255, .14) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgba(111, 201, 255, .1) 50%, transparent 50.2%); background-size: 36px 36px; opacity: .65; }
.fleet-frame-visual::after { inset: 9px; border: 1px solid rgba(142, 211, 255, .16); clip-path: polygon(0 0, 30px 0, 30px 1px, 0 1px, 0 30px, 1px 30px, 1px 0, 100% 0, 100% 30px, calc(100% - 1px) 30px, calc(100% - 1px) 1px, calc(100% - 30px) 1px, calc(100% - 30px) 0); }
.fleet-frame-visual canvas { position: relative; z-index: 1; display: block; width: 100%; height: 142px; }
.fleet-skin-module { display: grid; gap: 6px; padding: 7px 8px; border: 1px solid rgba(80, 163, 242, .24); background: rgba(4, 18, 40, .5); }
.fleet-skin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.fleet-skin-head b, .fleet-skin-head small { display: block; }
.fleet-skin-head b { color: #8edbff; font-size: 8px; letter-spacing: .13em; }
.fleet-skin-head small { margin-top: 3px; color: #6687a9; font-size: 8px; }
.fleet-skin-head em { flex: 0 0 auto; color: #65d9bb; font: normal 7px ui-monospace, "MiSans", monospace; letter-spacing: .08em; }
.fleet-skin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 5px; }
.fleet-skin-option { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; min-height: 52px; padding: 3px 5px; color: #b9d9ef; border: 1px solid rgba(91, 157, 224, .25); background: rgba(8, 28, 57, .58); text-align: left; cursor: pointer; }
.fleet-skin-option:hover, .fleet-skin-option:focus-visible { border-color: #6bd7ff; outline: 1px solid rgba(107, 215, 255, .35); outline-offset: 1px; }
.fleet-skin-option.selected { border-color: #6be4bd; box-shadow: inset 0 0 0 1px rgba(107, 228, 189, .18); }
.fleet-skin-option canvas { display: block; width: 52px; height: 42px; }
.fleet-skin-copy { display: grid; min-width: 0; gap: 2px; }
.fleet-skin-copy b, .fleet-skin-copy small, .fleet-skin-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-skin-copy b { color: #e8f7ff; font-size: 9px; font-weight: 500; }
.fleet-skin-copy small { color: #7095b7; font-size: 7px; }
.fleet-skin-copy em { color: #63d9bd; font: normal 7px ui-monospace, "MiSans", monospace; letter-spacing: .08em; }
.fleet-visual-grid { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent 0 48%, rgba(114, 196, 255, .1) 50%, transparent 52%); }
.fleet-visual-label { position: absolute; z-index: 3; left: 10px; bottom: 8px; color: #6f9fc4; font-size: 8px; letter-spacing: .16em; }
.fleet-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fleet-stat { position: relative; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 8px 9px; border: 1px solid rgba(70, 139, 211, .24); background: rgba(8, 28, 56, .58); }
.fleet-stat span { color: #6d9bc4; font-size: 7px; letter-spacing: .1em; }
.fleet-stat b { overflow: hidden; max-width: 100%; color: #eaf5ff; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fleet-stat small { overflow: hidden; max-width: 100%; color: #8eb0d0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.fleet-stat i { display: block; width: 100%; height: 3px; background: rgba(75, 145, 215, .2); }
.fleet-stat i em { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 8px rgba(88, 190, 255, .55); }
.fleet-unlock-protocol {
  display: grid;
  gap: 4px;
  padding: 8px 9px 9px;
  border: 1px solid rgba(179, 136, 255, .58);
  border-left: 2px solid #b388ff;
  background: linear-gradient(100deg, rgba(59, 36, 116, .38), rgba(24, 23, 67, .38));
}
.fleet-unlock-protocol.verified {
  border-color: rgba(92, 226, 194, .54);
  border-left-color: #5ee2c2;
  background: linear-gradient(100deg, rgba(20, 78, 94, .34), rgba(15, 37, 70, .34));
}
.fleet-unlock-protocol-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fleet-unlock-protocol-head span { display: grid; gap: 3px; }
.fleet-unlock-protocol-head b { color: #e7dcff; font-size: 9px; letter-spacing: .14em; }
.fleet-unlock-protocol.verified .fleet-unlock-protocol-head b { color: #c6fff0; }
.fleet-unlock-protocol-head small { color: #8e7ab8; font-size: 7px; letter-spacing: .1em; }
.fleet-unlock-protocol.verified .fleet-unlock-protocol-head small { color: #66bcae; }
.fleet-unlock-protocol-head em { color: #c2a7ff; font-size: 7px; font-style: normal; letter-spacing: .12em; }
.fleet-unlock-protocol.verified .fleet-unlock-protocol-head em { color: #66e7c3; }
.fleet-unlock-protocol > strong { color: #eef5ff; font-size: 11px; font-weight: 500; }
.fleet-unlock-protocol > p { min-height: 14px; color: #9aaed0; font-size: 8px; line-height: 1.4; }
.fleet-unlock-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.fleet-unlock-progress > i { display: block; height: 3px; background: rgba(79, 98, 161, .44); }
.fleet-unlock-progress > i em { display: block; height: 100%; background: #b388ff; box-shadow: 0 0 8px rgba(179, 136, 255, .65); }
.fleet-unlock-protocol.verified .fleet-unlock-progress > i em { background: #b388ff; }
.fleet-unlock-progress small { color: #c0a9ed; font-size: 7px; letter-spacing: .08em; white-space: nowrap; }
.fleet-unlock-protocol.verified .fleet-unlock-progress small { color: #70e2c1; }
.fleet-module-head { padding: 2px 0; border-bottom: 1px solid rgba(80, 163, 242, .2); }
.fleet-module-head b, .fleet-module-head small { display: block; }
.fleet-module-head b { color: #edf7ff; font-size: 10px; letter-spacing: .14em; }
.fleet-module-head small { margin-top: 3px; color: #6e8eaf; font-size: 8px; }
.fleet-module-head em { color: #64c9f5; font-size: 8px; font-style: normal; }
.fleet-loadout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fleet-loadout-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; padding: 6px; color: #aac5e0; border: 1px solid rgba(70, 139, 211, .3); border-left: 2px solid var(--weapon-accent, #4fc3f7); background: rgba(8, 28, 56, .6); font: inherit; text-align: left; cursor: pointer; }
.fleet-loadout-card:hover, .fleet-loadout-card:focus-visible, .fleet-loadout-card.sel { color: #fff; border-color: var(--weapon-accent, #4fc3f7); outline: none; background: rgba(19, 72, 125, .56); }
.fleet-loadout-card.locked { opacity: .55; }
.fleet-loadout-icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; }
.fleet-loadout-icon svg { width: 30px; height: 30px; }
.fleet-loadout-copy { min-width: 0; }
.fleet-loadout-copy b, .fleet-loadout-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-loadout-copy b { color: inherit; font-size: 10px; font-weight: 500; }
.fleet-loadout-copy small { margin-top: 2px; color: #7799bb; font-size: 7px; }
.fleet-loadout-state { color: var(--weapon-accent, #4fc3f7); font-size: 7px; letter-spacing: .08em; }
.fleet-equipped-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fleet-equipped-slot {
  position: relative; display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-width: 0; min-height: 68px; padding: 8px; color: #aac5e0; border: 1px solid color-mix(in srgb, var(--weapon-accent, #4fc3f7) 42%, transparent);
  border-left: 2px solid var(--weapon-accent, #4fc3f7); background: linear-gradient(135deg, rgba(11, 43, 78, .78), rgba(5, 18, 41, .72));
  font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.fleet-equipped-slot:hover, .fleet-equipped-slot:focus-visible { color: #fff; border-color: var(--weapon-accent, #4fc3f7); outline: none; background: rgba(19, 72, 125, .64); box-shadow: 0 0 14px color-mix(in srgb, var(--weapon-accent, #4fc3f7) 18%, transparent); }
.fleet-equipped-slot.empty { border-style: dashed; opacity: .78; }
.fleet-equipped-index { display: grid; place-items: center; width: 20px; height: 20px; color: var(--weapon-accent, #4fc3f7); border: 1px solid currentColor; font: 11px/1 ui-monospace, Consolas, "MiSans", monospace; }
.fleet-equipped-icon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--weapon-accent, #4fc3f7); }
.fleet-equipped-icon svg { width: 32px; height: 32px; }
.fleet-equipped-icon .raster-icon-canvas { display: block; width: 34px !important; height: 34px !important; }
.fleet-equipped-copy { display: grid; min-width: 0; gap: 3px; }
.fleet-equipped-copy b, .fleet-equipped-copy strong, .fleet-equipped-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-equipped-copy b { color: #75a5cc; font-size: 7px; letter-spacing: .12em; font-weight: 500; }
.fleet-equipped-copy strong { color: #eff8ff; font-size: 10px; font-weight: 500; }
.fleet-equipped-copy small { color: #7897b8; font-size: 7px; }
.fleet-equipped-state { color: var(--weapon-accent, #4fc3f7); font-size: 7px; letter-spacing: .08em; }
.fleet-warehouse-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0 6px; border-bottom: 1px solid rgba(80, 163, 242, .2); }
.fleet-warehouse-head b, .fleet-warehouse-head small { display: block; }
.fleet-warehouse-head b { color: #edf7ff; font-size: 10px; letter-spacing: .14em; }
.fleet-warehouse-head small { margin-top: 3px; color: #6e8eaf; font-size: 8px; }
.fleet-warehouse-head em { color: #64c9f5; font-size: 8px; font-style: normal; }
.fleet-weapon-warehouse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fleet-warehouse-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; padding: 6px; color: #aac5e0; border: 1px solid rgba(70, 139, 211, .3); border-left: 2px solid var(--weapon-accent, #4fc3f7); background: rgba(8, 28, 56, .6); font: inherit; text-align: left; cursor: pointer; }
.fleet-warehouse-card:hover, .fleet-warehouse-card:focus-visible { color: #fff; border-color: var(--weapon-accent, #4fc3f7); outline: none; background: rgba(19, 72, 125, .56); }
.fleet-warehouse-card.equipped { background: linear-gradient(90deg, color-mix(in srgb, var(--weapon-accent, #4fc3f7) 12%, transparent), rgba(8, 28, 56, .6)); }
.fleet-detail-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.fleet-frame-layout .fleet-detail-actions,
.fleet-wingman-layout .fleet-detail-actions { margin-top: clamp(36px, 5vh, 58px); }
.fleet-primary-action { min-width: 190px; padding: 9px 14px; color: #dff5ff; border-color: #55c9ff; background: linear-gradient(90deg, rgba(21, 97, 167, .72), rgba(50, 48, 132, .66)); }
.fleet-action-note { color: #6e8eaf; font-size: 8px; }
.fleet-wingman { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 12px; }
.fleet-wingman-graphic { position: relative; display: grid; place-items: center; height: 178px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--frame-accent, #4fc3f7) 43%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--frame-accent, #4fc3f7) 15%, transparent), rgba(4, 16, 37, .82)); }
.fleet-wing-orbit { position: absolute; width: 112px; height: 44px; border: 1px solid var(--frame-accent, #4fc3f7); border-radius: 50%; transform: rotate(-24deg); opacity: .55; box-shadow: 0 0 18px color-mix(in srgb, var(--frame-accent, #4fc3f7) 35%, transparent); }
.fleet-wing-core { z-index: 1; display: inline-flex; width: 38px; height: 38px; color: var(--frame-accent, #4fc3f7); }
.fleet-wing-core svg { width: 38px; height: 38px; }
.fleet-wingman-graphic small { position: absolute; bottom: 12px; color: #6f9fc4; font-size: 8px; letter-spacing: .14em; }
.fleet-select-label, .fleet-filter { display: flex; flex-direction: column; gap: 5px; color: #73a0c7; font-size: 9px; letter-spacing: .1em; }
.fleet-select-label select, .fleet-filter select { width: 100%; min-height: 34px; padding: 6px 8px; color: #dceeff; border: 1px solid rgba(83, 164, 239, .38); background: #081b38; font: inherit; font-size: 11px; }
.fleet-select-label select:focus-visible, .fleet-filter select:focus-visible { outline: 1px solid #67d6ff; outline-offset: 2px; }
.fleet-wing-info { padding: 10px; color: #7897b8; border-left: 2px solid #4fc3f7; background: rgba(15, 53, 91, .36); font-size: 9px; line-height: 1.55; }
.fleet-wing-status { justify-content: space-between; margin-top: auto; padding-top: 10px; color: #5e9ac2; border-top: 1px solid rgba(80, 163, 242, .2); font-size: 8px; letter-spacing: .12em; }
.fleet-wing-status span { color: #6be4bd; }
.fleet-wing-status b { color: #e9f7ff; font-weight: 500; }
.fleet-portrait-panel { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 12px; }
.fleet-portrait-reserve { position: relative; display: grid; place-items: center; width: min(100%, 384px); aspect-ratio: 9 / 16; align-self: center; min-height: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--frame-accent, #4fc3f7) 43%, transparent); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--frame-accent, #4fc3f7) 14%, transparent), rgba(4, 16, 37, .84)); }
.fleet-portrait-reserve::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, transparent 49.8%, rgba(111, 201, 255, .12) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgba(111, 201, 255, .08) 50%, transparent 50.2%); background-size: 36px 36px; opacity: .72; }
.fleet-portrait-reserve::after { position: absolute; inset: 12px; content: ""; pointer-events: none; border: 1px solid rgba(142, 211, 255, .16); clip-path: polygon(0 0, 34px 0, 34px 1px, 0 1px, 0 34px, 1px 34px, 1px 0, 100% 0, 100% 34px, calc(100% - 1px) 34px, calc(100% - 1px) 1px, calc(100% - 34px) 1px, calc(100% - 34px) 0); }
.fleet-portrait-bracket { position: absolute; z-index: 1; width: 24px; height: 24px; border-color: var(--frame-accent, #4fc3f7); opacity: .82; }
.fleet-portrait-bracket-tl { top: 24px; left: 24px; border-top: 1px solid; border-left: 1px solid; }
.fleet-portrait-bracket-br { right: 24px; bottom: 24px; border-right: 1px solid; border-bottom: 1px solid; }
.fleet-portrait-core { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; color: var(--frame-accent, #4fc3f7); border: 1px solid color-mix(in srgb, var(--frame-accent, #4fc3f7) 62%, transparent); border-radius: 50%; box-shadow: 0 0 26px color-mix(in srgb, var(--frame-accent, #4fc3f7) 28%, transparent), inset 0 0 18px color-mix(in srgb, var(--frame-accent, #4fc3f7) 12%, transparent); }
.fleet-portrait-core::before { position: absolute; inset: -12px; content: ""; border: 1px dashed color-mix(in srgb, var(--frame-accent, #4fc3f7) 42%, transparent); border-radius: 50%; transform: rotate(-18deg); }
.fleet-portrait-core svg { width: 42px; height: 42px; }
.fleet-pilot-portrait { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--frame-accent, #4fc3f7) 28%, transparent)); transition: opacity .22s ease, filter .22s ease; }
.fleet-pilot-portrait.is-ready { opacity: 1; }
.fleet-portrait-reserve.comms-portrait-panel { background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--comms-accent, #4fc3f7) 16%, transparent), transparent 45%), linear-gradient(rgba(94, 151, 233, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 151, 233, .065) 1px, transparent 1px); background-size: auto, 26px 26px, 26px 26px; }
.fleet-portrait-reserve.comms-portrait-panel::before { inset: 24px 15px 10px; border: 1px solid color-mix(in srgb, var(--comms-accent, #4fc3f7) 34%, transparent); border-radius: 48% 48% 2% 2%; opacity: .65; }
.fleet-portrait-reserve.comms-portrait-panel .fleet-pilot-portrait { inset: 35px 5px 3px; width: calc(100% - 10px); height: calc(100% - 38px); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--comms-accent, #4fc3f7) 35%, transparent)); }
.fleet-portrait-reserve.comms-portrait-panel .comms-pilot-scan { top: 20%; animation: fleetPortraitScan 3.2s linear infinite; }
@keyframes fleetPortraitScan { from { translate: 0 -12px; opacity: .08; } 48% { opacity: .62; } to { translate: 0 270px; opacity: .08; } }
.fleet-portrait-copy { position: absolute; z-index: 2; right: 14px; bottom: 14px; left: 14px; display: grid; gap: 4px; padding: 7px 9px; text-align: center; background: linear-gradient(180deg, rgba(3, 15, 34, .2), rgba(3, 15, 34, .9)); }
.fleet-portrait-copy b { color: #eff9ff; font-size: 14px; font-weight: 500; letter-spacing: .12em; text-shadow: 0 0 12px color-mix(in srgb, var(--frame-accent, #4fc3f7) 38%, transparent); }
.fleet-portrait-copy small, .fleet-portrait-link { color: #8bb6d5; font-size: 8px; letter-spacing: .14em; }
.fleet-portrait-copy em { color: var(--frame-accent, #4fc3f7); font-size: 7px; font-style: normal; letter-spacing: .16em; }
.fleet-portrait-link { position: absolute; z-index: 1; bottom: 20px; }
.fleet-portrait-info { padding: 10px; color: #7897b8; border-left: 2px solid #4fc3f7; background: rgba(15, 53, 91, .36); font-size: 9px; line-height: 1.55; }
.fleet-secondary-action { flex: 0 0 auto; min-height: 34px; padding: 7px 10px; color: #9ebbd7; border-color: rgba(111, 194, 255, .3); font-size: 9px; }
.fleet-secondary-action:disabled { opacity: .48; cursor: not-allowed; }

.fleet-tab-intro { justify-content: space-between; gap: 18px; margin-bottom: 10px; padding: 3px 2px 12px; border-bottom: 1px solid rgba(80, 163, 242, .25); }
.fleet-tab-intro h2 { margin-top: 5px; color: #f1f7ff; font-size: 24px; font-weight: 500; letter-spacing: .12em; }
.fleet-tab-intro p { margin-top: 5px; color: #7897b8; font-size: 10px; }
.fleet-frame-shop { display: grid; gap: 14px; min-height: 610px; padding-bottom: 10px; }
.fleet-shop-intro { margin-bottom: 0; }
.fleet-shop-summary { display: inline-flex; align-items: center; gap: 14px; padding: 8px 12px; border: 1px solid rgba(92, 159, 233, .35); background: rgba(9, 28, 58, .62); }
.fleet-shop-summary span { display: grid; gap: 2px; text-align: center; }
.fleet-shop-summary b { color: #f0f8ff; font-size: 17px; font-weight: 500; }
.fleet-shop-summary small { color: #7097bf; font-size: 8px; letter-spacing: .08em; }
.fleet-shop-summary i { width: 1px; height: 28px; background: rgba(119, 177, 239, .32); }
.fleet-shop-groups { display: grid; gap: 16px; }
.fleet-shop-group { border-top: 2px solid #4fc3f7; background: rgba(6, 23, 49, .55); }
.fleet-shop-group-special { border-top-color: #b388ff; }
.fleet-shop-group-starter { border-top-color: #69e4bf; }
.fleet-shop-group-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 8px 12px; border-bottom: 1px solid rgba(80, 163, 242, .2); }
.fleet-shop-group-head b, .fleet-shop-group-head strong, .fleet-shop-group-head small { display: block; }
.fleet-shop-group-head b { color: #69cfff; font-size: 8px; letter-spacing: .16em; }
.fleet-shop-group-special .fleet-shop-group-head b { color: #bd9bff; }
.fleet-shop-group-starter .fleet-shop-group-head b { color: #73e8c2; }
.fleet-shop-group-head strong { margin-top: 3px; color: #edf7ff; font-size: 15px; font-weight: 500; letter-spacing: .08em; }
.fleet-shop-group-head small { margin-top: 3px; color: #6e8eaf; font-size: 8px; }
.fleet-shop-group-head em { color: #72cafa; font-size: 8px; font-style: normal; letter-spacing: .12em; }
.fleet-shop-group-special .fleet-shop-group-head em { color: #c09cff; }
.fleet-shop-group-starter .fleet-shop-group-head em { color: #70e3bd; }
.fleet-shop-frame-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 9px; }
.fleet-shop-frame-card { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 10px; min-width: 0; padding: 8px; border: 1px solid rgba(75, 148, 223, .3); border-left: 2px solid var(--frame-accent, #4fc3f7); background: linear-gradient(135deg, rgba(9, 34, 68, .78), rgba(5, 18, 40, .76)); }
.fleet-shop-frame-card.source-achievement { border-left-color: #b388ff; }
.fleet-shop-frame-card.source-starter { border-left-color: #69e4bf; }
.fleet-shop-frame-card.owned { background: linear-gradient(135deg, rgba(13, 57, 76, .72), rgba(5, 23, 43, .76)); }
.fleet-shop-frame-visual { position: relative; min-width: 0; min-height: 76px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--frame-accent, #4fc3f7) 42%, transparent); background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--frame-accent, #4fc3f7) 16%, transparent), rgba(3, 15, 34, .84)); }
.fleet-shop-frame-visual::before { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(90deg, transparent 49.7%, rgba(111, 201, 255, .13) 50%, transparent 50.3%), linear-gradient(0deg, transparent 49.7%, rgba(111, 201, 255, .1) 50%, transparent 50.3%); background-size: 28px 28px; }
.fleet-shop-frame-visual canvas { position: relative; z-index: 1; display: block; width: 100%; height: 76px; }
.fleet-shop-frame-visual > span { position: absolute; z-index: 2; right: 6px; bottom: 5px; color: #6c9bc1; font-size: 7px; letter-spacing: .1em; }
.fleet-shop-frame-copy { display: grid; min-width: 0; align-content: start; gap: 4px; }
.fleet-shop-frame-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fleet-shop-frame-title b { overflow: hidden; color: #f0f8ff; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fleet-shop-frame-title em { flex: 0 0 auto; color: #67e1bd; font-size: 7px; font-style: normal; letter-spacing: .08em; }
.fleet-shop-frame-card:not(.owned) .fleet-shop-frame-title em { color: #829fc1; }
.fleet-shop-frame-card.source-purchase:not(.owned) .fleet-shop-frame-title em { color: #ffd166; }
.fleet-shop-frame-copy > small { overflow: hidden; color: #7897b8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.fleet-shop-frame-requirement { display: grid; gap: 3px; margin-top: 4px; padding: 6px 7px; border: 1px solid rgba(91, 144, 213, .22); background: rgba(3, 16, 37, .56); }
.fleet-shop-frame-requirement b { color: #79cfff; font-size: 7px; letter-spacing: .08em; }
.fleet-shop-frame-card.source-achievement .fleet-shop-frame-requirement b { color: #c2a6ff; }
.fleet-shop-frame-card.source-starter .fleet-shop-frame-requirement b { color: #79e4be; }
.fleet-shop-frame-requirement strong, .fleet-shop-frame-requirement span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-shop-frame-requirement strong { color: #e8f4ff; font-size: 10px; font-weight: 500; }
.fleet-shop-frame-requirement span { color: #7195b7; font-size: 7px; }
.fleet-shop-frame-requirement i { display: block; height: 3px; background: rgba(72, 132, 204, .22); }
.fleet-shop-frame-requirement i em { display: block; height: 100%; background: #55c8ff; box-shadow: 0 0 8px rgba(85, 200, 255, .45); }
.fleet-shop-frame-card.source-achievement .fleet-shop-frame-requirement i em { background: #b388ff; box-shadow: 0 0 8px rgba(179, 136, 255, .45); }
.fleet-shop-frame-card.source-starter .fleet-shop-frame-requirement i em { background: #69e4bf; box-shadow: 0 0 8px rgba(105, 228, 191, .4); }
.fleet-shop-frame-requirement small { color: #7fa4c8; font-size: 7px; letter-spacing: .06em; }
.fleet-shop-frame-action { min-height: 30px; margin-top: 3px; padding: 5px 8px; color: #dff5ff; border-color: rgba(101, 198, 255, .5); font-size: 9px; }
.fleet-shop-frame-action.purchase { color: #fff0be; border-color: rgba(255, 209, 102, .7); background: rgba(116, 77, 21, .44); }
.fleet-shop-frame-action.condition { color: #bbabd8; border-color: rgba(155, 121, 255, .35); background: rgba(49, 33, 91, .3); cursor: not-allowed; opacity: .82; }
.fleet-shop-frame-action.owned { color: #7be6c3; border-color: rgba(105, 228, 191, .5); background: rgba(14, 73, 70, .32); }
.fleet-shop-frame-action:disabled { cursor: not-allowed; }
.fleet-filter { flex: 0 0 220px; }
.fleet-armory-summary { display: flex; gap: 24px; padding: 4px 2px 12px; color: #6c9ac2; font-size: 8px; letter-spacing: .12em; }
.fleet-armory-summary b { color: #e9f7ff; font-size: 13px; font-weight: 500; }
.fleet-armory-groups { display: grid; gap: 15px; }
.fleet-armory-group { border-top: 2px solid var(--frame-accent, #4fc3f7); background: rgba(7, 24, 49, .45); }
.fleet-group-head { justify-content: space-between; min-height: 42px; padding: 7px 10px; border-bottom: 1px solid rgba(79, 153, 224, .2); }
.fleet-group-head b, .fleet-group-head small { display: block; }
.fleet-group-head b { color: #f0f8ff; font-size: 14px; font-weight: 500; }
.fleet-group-head small { margin-top: 3px; color: #6c92b6; font-size: 8px; letter-spacing: .08em; }
.fleet-group-head em { color: var(--frame-accent, #4fc3f7); font-size: 8px; font-style: normal; letter-spacing: .12em; }
.fleet-weapon-shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 8px; }
.fleet-weapon-shop-card { min-width: 0; padding: 9px; border: 1px solid rgba(74, 147, 222, .32); background: linear-gradient(135deg, rgba(10, 35, 68, .76), rgba(5, 18, 41, .7)); }
.fleet-weapon-shop-card:hover, .fleet-weapon-shop-card.owned { border-color: rgba(101, 200, 255, .65); }
.fleet-weapon-shop-top { gap: 8px; min-width: 0; }
.fleet-weapon-shop-icon { display: inline-flex; flex: 0 0 43px; width: 43px; height: 43px; align-items: center; justify-content: center; border: 1px solid currentColor; background: rgba(7, 21, 45, .8); }
.fleet-weapon-shop-icon svg { width: 40px; height: 40px; }
.fleet-weapon-shop-top > span:nth-child(2) { min-width: 0; flex: 1; }
.fleet-weapon-shop-top b, .fleet-weapon-shop-top small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-weapon-shop-top b { color: #eef8ff; font-size: 11px; font-weight: 500; }
.fleet-weapon-shop-top small { margin-top: 3px; color: #7698bc; font-size: 8px; }
.fleet-weapon-shop-top > strong { flex: 0 0 auto; color: #65d3ff; font-size: 11px; font-weight: 500; }
.fleet-weapon-shop-top > strong i { font-style: normal; color: #b78cff; }
.fleet-weapon-shop-stats { display: flex; gap: 11px; margin-top: 8px; color: #6f9bc2; font-size: 8px; }
.fleet-weapon-shop-stats b { color: #dbeeff; font-weight: 500; }
.fleet-weapon-shop-card p { min-height: 30px; margin: 7px 0; overflow: hidden; color: #7897b8; font-size: 8px; line-height: 1.45; }
.fleet-buy-btn { width: 100%; min-height: 31px; padding: 5px 7px; color: #dff5ff; border-color: rgba(111, 194, 255, .5); font-size: 9px; letter-spacing: .08em; }
.fleet-buy-btn.equip { color: #69e4bf; border-color: rgba(72, 210, 164, .52); }
.fleet-buy-btn.poor { color: #f19ba4; border-color: rgba(241, 112, 130, .5); }
.fleet-supply-callout { display: grid; grid-template-columns: 32px auto; grid-template-rows: 1fr 1fr; column-gap: 9px; align-items: center; padding: 9px 13px; color: #cba8ff; border: 1px solid rgba(173, 116, 255, .45); background: rgba(51, 24, 92, .36); }
.fleet-supply-callout span { grid-row: 1 / span 2; display: inline-flex; width: 28px; height: 28px; }
.fleet-supply-callout svg { width: 28px; height: 28px; }
.fleet-supply-callout b { font-size: 10px; letter-spacing: .12em; }
.fleet-supply-callout small { color: #9e88c4; font-size: 8px; }
.fleet-supply-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.fleet-supply-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid rgba(99, 115, 212, .32); background: rgba(22, 16, 60, .48); }
.fleet-supply-card:hover, .fleet-supply-card.owned { border-color: rgba(179, 136, 255, .7); }
.fleet-supply-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: #bd91ff; border: 1px solid currentColor; background: rgba(62, 34, 113, .45); }
.fleet-supply-icon svg { width: 28px; height: 28px; }
.fleet-supply-copy { min-width: 0; }
.fleet-supply-copy b, .fleet-supply-copy small, .fleet-supply-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-supply-copy b { color: #f1eaff; font-size: 11px; font-weight: 500; }
.fleet-supply-copy small { margin-top: 4px; color: #b4a5d1; font-size: 9px; }
.fleet-supply-copy em { margin-top: 5px; color: #8877ae; font-size: 7px; font-style: normal; letter-spacing: .08em; }
.fleet-footer { justify-content: space-between; gap: 16px; min-height: 48px; padding-top: 12px; }
.fleet-footer-note { color: #5f82a9; font-size: 8px; letter-spacing: .08em; }
.fleet-footer-note b { color: #82b5dd; font-weight: 500; }
.fleet-footer-actions { gap: 8px; }
.fleet-footer .btn { min-height: 34px; padding: 7px 15px; font-size: 10px; }
.fleet-deploy { color: #e9f7ff; border-color: #5dc9ff !important; background: rgba(17, 81, 139, .58) !important; }
.fleet-confirm { z-index: 40; }
.fleet-confirm .modal { width: min(480px, calc(100vw - 40px)); }
.fleet-confirm .modal-actions { flex-wrap: wrap; }
.fleet-confirm .modal-actions .btn { min-width: 128px; }
.fleet-confirm .fleet-modal-disabled { color: #6f7892; border-color: rgba(111, 120, 146, .24); cursor: not-allowed; opacity: .55; }
.fleet-toasts { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: grid; gap: 7px; }

@media (max-width: 1100px) {
  .fleet-shell { width: 98vw; padding-inline: 14px; }
  .fleet-frame-layout { grid-template-columns: 210px minmax(350px, 1fr) 230px; gap: 8px; }
  .fleet-wingman-layout { grid-template-columns: 210px minmax(350px, 1fr) 230px; gap: 8px; }
  .fleet-frame-row-copy small { display: none; }
  .fleet-weapon-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fleet-shop-frame-card { grid-template-columns: 140px minmax(0, 1fr); }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .fleet-wrap { align-items: stretch; justify-content: stretch; padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); }
  .fleet-shell { width: 100%; height: 100%; padding: 8px; clip-path: none; }
  .fleet-head { gap: 8px; padding-bottom: 8px; }
  .fleet-head-left { gap: 8px; }
  .fleet-back { padding: 7px 8px; font-size: 9px; }
  .fleet-kicker { font-size: 7px; }
  .fleet-heading h1 { font-size: 20px; }
  .fleet-subtitle, .fleet-link-status, .fleet-footer-note { display: none; }
  .fleet-head-right { gap: 6px; }
  .fleet-balance { min-width: 108px; padding: 5px 7px; }
  .fleet-balance b { font-size: 13px; }
  .fleet-meta { gap: 8px; overflow: hidden; font-size: 7px; white-space: nowrap; }
  .fleet-meta-spacer, .fleet-meta > span:first-child { display: none; }
  .fleet-tabs { gap: 4px; padding: 7px 0; }
  .fleet-tab { flex: 1; justify-content: center; min-height: 34px; padding: 5px 4px; font-size: 9px; letter-spacing: .04em; }
  .fleet-tab-mark { display: none; }
  .fleet-body-content { padding: 7px; }
  .fleet-frame-layout { display: grid; grid-template-columns: 1fr; gap: 7px; min-height: 0; }
  .fleet-wingman-layout { display: grid; grid-template-columns: 1fr; gap: 7px; min-height: 0; }
  .fleet-frame-list { order: 0; max-height: 164px; }
  .fleet-frame-list-content { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
  .fleet-frame-row { min-height: 34px; grid-template-columns: 23px minmax(0, 1fr) auto; padding: 4px; }
  .fleet-frame-sigil, .fleet-frame-sigil svg { width: 17px; height: 17px; }
  .fleet-frame-row-copy b { font-size: 9px; }
  .fleet-frame-state { font-size: 6px; }
  .fleet-frame-detail { order: 1; padding: 9px; }
  .fleet-portrait-panel { order: 2; padding: 0 9px 9px; }
  .fleet-portrait-reserve { min-height: 180px; }
  .fleet-wingman-graphic { height: 92px; }
  .fleet-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .fleet-stat:last-child { grid-column: 1 / -1; }
  .fleet-loadout-grid, .fleet-equipped-grid, .fleet-weapon-warehouse { grid-template-columns: 1fr; }
  .fleet-frame-layout .fleet-detail-actions,
  .fleet-wingman-layout .fleet-detail-actions { margin-top: 0; }
  .fleet-tab-intro { align-items: flex-start; flex-direction: column; gap: 9px; }
  .fleet-tab-intro h2 { font-size: 20px; }
  .fleet-shop-frame-grid { grid-template-columns: 1fr; }
  .fleet-shop-frame-card { grid-template-columns: 150px minmax(0, 1fr); }
  .fleet-filter { width: 100%; flex-basis: auto; }
  .fleet-armory-summary { gap: 9px; font-size: 7px; }
  .fleet-weapon-shop-grid, .fleet-supply-grid { grid-template-columns: 1fr; }
  .fleet-supply-card { grid-template-columns: 30px minmax(0, 1fr); }
  .fleet-supply-card .fleet-buy-btn { grid-column: 1 / -1; }
  .fleet-footer { justify-content: center; min-height: 42px; padding-top: 7px; }
  .fleet-footer-actions { width: 100%; }
.fleet-footer .btn { flex: 1; }
}

/* ================================================================
   战前准备终端 v2 · 参照 Battle Prep reference
   只作用于 prep 屏幕；战斗暂停层与其它屏幕不在本批范围。
   ================================================================ */
#app > .screen > .prep-viewport {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; gap: 0; overflow: hidden;
}

#prep-wrap.prep-shell {
  position: relative; isolation: isolate; display: grid;
  grid-template-rows: 60px minmax(158px, 1.05fr) minmax(155px, 1.25fr) auto auto 48px;
  gap: 7px; width: min(1780px, calc(100vw - 36px)); height: min(940px, calc(100vh - 26px));
  min-height: 720px; padding: 10px 14px 12px; margin: 0; overflow: hidden;
  color: #e7f5ff;
  background: radial-gradient(circle at 10% 34%, rgba(33, 128, 224, .13), transparent 25%), radial-gradient(circle at 87% 23%, rgba(27, 90, 190, .12), transparent 27%), linear-gradient(180deg, rgba(2, 10, 20, .96), rgba(1, 8, 16, .98));
  border: 1px solid rgba(65, 163, 230, .52);
  box-shadow: 0 0 0 1px rgba(6, 32, 64, .9), 0 0 42px rgba(22, 109, 203, .18), inset 0 0 42px rgba(13, 66, 122, .14);
  clip-path: polygon(0 14px, 14px 14px, 29px 0, calc(100% - 29px) 0, calc(100% - 14px) 14px, 100% 14px, 100% calc(100% - 13px), calc(100% - 16px) calc(100% - 13px), calc(100% - 29px) 100%, 29px 100%, 16px calc(100% - 13px), 0 calc(100% - 13px));
  will-change: transform;
}
#prep-wrap.prep-shell::before, #prep-wrap.prep-shell::after { content: ""; position: absolute; inset: 8px 10px; pointer-events: none; z-index: -1; }
#prep-wrap.prep-shell::before { opacity: .36; background-image: linear-gradient(rgba(38, 137, 202, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 137, 202, .08) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, #000, transparent 28%, transparent 72%, #000); }
#prep-wrap.prep-shell::after { border: 1px solid rgba(52, 140, 209, .18); clip-path: polygon(0 14px, 14px 14px, 14px 0, calc(100% - 14px) 0, calc(100% - 14px) 14px, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 14px calc(100% - 14px), 0 calc(100% - 14px)); }

.prep-topbar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; min-width: 0; padding: 0 16px; border-bottom: 1px solid rgba(50, 147, 218, .4); }
.prep-topbar::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -2px; height: 3px; background: #2caeff; box-shadow: 0 0 16px #2caeff; opacity: .8; }
.prep-brand { display: flex; align-items: center; gap: 10px; color: #8edcff; min-width: 0; }
.prep-brand-mark { display: inline-grid; place-items: center; width: 31px; height: 31px; color: #5bcaff; border: 1px solid currentColor; transform: rotate(45deg); font-size: 16px; box-shadow: 0 0 13px rgba(42, 177, 255, .35); }
.prep-brand b, .prep-brand small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prep-brand b { font: 600 11px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .15em; }
.prep-brand small { margin-top: 4px; color: #487ea8; font: 8px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; }
.prep-heading { text-align: center; }.prep-heading span, .prep-heading small { display: block; }
.prep-heading span { color: #eff9ff; font-size: clamp(23px, 2vw, 34px); font-weight: 600; letter-spacing: .22em; text-shadow: 0 0 18px rgba(93, 205, 255, .45); }
.prep-heading small { margin-top: 2px; color: #7dcdf6; font: 11px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .35em; }
.prep-core-status { justify-self: end; min-width: 170px; color: #70a5ca; font: 9px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; text-align: right; }
.prep-core-status span, .prep-core-status b, .prep-core-status em { display: block; }.prep-core-status span { color: #548ab3; }
.prep-core-status i { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: #69f0ae; box-shadow: 0 0 10px #69f0ae; animation: prepOnlinePulse 1.8s ease-in-out infinite; }
.prep-core-status b { margin-top: 5px; color: #a8dffb; font-size: 11px; font-weight: 500; }.prep-core-status em { margin-top: 3px; color: #345a7e; font-size: 8px; font-style: normal; }
@keyframes prepOnlinePulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

.prep-body { display: grid; grid-template-columns: minmax(225px, .9fr) minmax(360px, 1.55fr) minmax(235px, .95fr); gap: 8px; min-height: 0; }
.prep-mode-campaign .prep-body { grid-template-areas: "tactical class weapons"; }.prep-mode-endless .prep-body, .prep-mode-denial .prep-body { grid-template-areas: "class weapons tactical"; }
.prep-class { grid-area: class; position: relative; display: flex; align-items: center; min-width: 0; width: auto; min-height: 0; padding: 15px 18px; overflow: hidden; border-color: rgba(58, 156, 222, .58); border-radius: 0; background: linear-gradient(135deg, rgba(7, 24, 43, .86), rgba(2, 10, 20, .7)); }
.prep-class::after { content: ""; position: absolute; right: -26px; top: 12px; width: 120px; height: 120px; border: 1px solid rgba(67, 182, 255, .22); border-radius: 50%; box-shadow: 0 0 0 12px rgba(34, 132, 211, .04), 0 0 0 26px rgba(34, 132, 211, .035); }
.prep-class-orbit { position: relative; flex: 0 0 88px; width: 88px; height: 88px; opacity: .9; }.prep-class-svg { display: block; width: 100%; height: 100%; stroke: currentColor; }
.prep-class-preview { display: block; width: 100%; height: 100%; }
.prep-class-copy { min-width: 0; margin-left: 10px; }.prep-cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(18px, 1.5vw, 25px); font-weight: 600; letter-spacing: .12em; text-shadow: 0 0 14px currentColor; }
.prep-ctag { margin: 4px 0 9px; color: #93b3c9; font-size: 11px; line-height: 1.35; }.prep-cstat, .prep-cskill { color: #e3eff7; font-size: 12px; line-height: 1.55; }
.prep-cskill { display: flex; align-items: center; gap: 6px; color: #b9d7eb; }.prep-cskill span { display: inline-flex; color: #59caff; }.prep-tiny-svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.2; }

.prep-weapons { grid-area: weapons; width: auto; min-width: 0; min-height: 0; padding: 13px 15px; border-color: rgba(58, 156, 222, .58); border-radius: 0; background: linear-gradient(180deg, rgba(7, 22, 39, .9), rgba(2, 11, 22, .74)); }
.prep-wtitle { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; color: #a0e4ff; font-size: 13px; letter-spacing: .12em; }.prep-wtitle small { color: #4d8ab2; font: 8px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; }
.prep-wlist { overflow: hidden; }.prep-wlist-content { gap: 7px; }.prep-wrow { grid-template-columns: 39px minmax(0, 1fr) auto; min-height: 51px; padding: 7px 10px; border: 1px solid rgba(72, 144, 200, .38); border-radius: 0; background: rgba(7, 24, 42, .72); }
.prep-wrow.sel { border-color: #2eafff; background: rgba(24, 106, 171, .2); box-shadow: inset 0 0 18px rgba(32, 155, 235, .1), 0 0 12px rgba(32, 155, 235, .12); }.prep-wrow:hover { border-color: rgba(87, 201, 255, .85); background: rgba(27, 102, 167, .25); }
.prep-wicon { width: 34px; height: 34px; border-radius: 0; border-color: currentColor; background: rgba(7, 30, 55, .7); }.prep-wname { font-size: 13px; }.prep-wdesc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #799db9; }.prep-wstate { color: #3fc6ff; font-size: 9px; letter-spacing: .12em; }.prep-wrow-empty .prep-wstate { color: #8296aa; }

.prep-tactical { grid-area: tactical; position: relative; min-width: 0; min-height: 0; padding: 10px 12px; overflow: hidden; border-color: rgba(50, 143, 215, .46); border-radius: 0; background: rgba(3, 14, 28, .8); }
.prep-tactical-head, .prep-tactical-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #6da8cb; font: 9px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; }.prep-tactical-head small { color: #355f81; font-size: 8px; }
.prep-tactical-screen { position: relative; height: calc(100% - 36px); min-height: 95px; margin: 6px 0 4px; border: 1px solid rgba(45, 135, 211, .25); background: #020b17; }.prep-tactical-screen canvas { display: block; width: 100%; height: 100%; }.prep-tactical-scan { position: absolute; left: 7px; top: 6px; color: rgba(102, 205, 255, .72); font: 8px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .1em; }
.prep-tactical-foot { color: #41789e; letter-spacing: .04em; }.prep-tactical-foot b { color: #91d9f8; font-weight: 400; }

.prep-chapters, .prep-levels, .prep-diff { width: auto; min-width: 0; min-height: 0; margin-top: 0; padding: 10px 13px; border-radius: 0; border-color: rgba(50, 143, 215, .48); background: rgba(3, 15, 28, .78); }
.prep-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 21px; }.prep-section-head .prep-wtitle { margin: 0; }
.prep-editor-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 25px; padding: 4px 9px; border-radius: 0; color: #86d8ff; font-size: 9px; letter-spacing: .08em; }.prep-editor-btn small { color: #4c87ae; font: 7px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .08em; }
.prep-chgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; height: calc(100% - 24px); margin-top: 6px; }.prep-mode-denial .prep-chgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.prep-mode-denial #prep-chapters[data-map-count="5"] .prep-chgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.prep-ch { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; width: auto; padding: 7px 8px; gap: 3px; text-align: left; border: 1px solid rgba(54, 128, 185, .5); border-radius: 0; background: linear-gradient(155deg, rgba(8, 30, 52, .8), rgba(2, 12, 24, .88)); clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.prep-ch:hover { border-color: #70d5ff; background: rgba(14, 57, 91, .8); }.prep-ch.sel { border-color: #28b5ff; background: linear-gradient(155deg, rgba(11, 87, 142, .58), rgba(3, 31, 58, .9)); box-shadow: inset 0 0 18px rgba(29, 166, 255, .2), 0 0 14px rgba(30, 170, 255, .25); }.prep-ch.locked { opacity: .42; }
.prep-card-index { color: #6da5c7; font: 11px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .08em; }.prep-ch.sel .prep-card-index { color: #bceeff; }
.prep-chart { position: relative; display: block; width: 100%; height: auto; min-height: 62px; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(68, 160, 225, .26); border-radius: 0; background: #020b16; }.prep-chart img.chapter-art-raster { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.prep-chinfo { min-width: 0; justify-content: flex-end; gap: 3px; }.prep-chname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c2efff; font-size: 13px; letter-spacing: .06em; }.prep-chdesc { display: -webkit-box; overflow: hidden; color: #86aabe; font-size: 10px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.prep-chprog { color: #ffd565; font: 9px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .06em; }.prep-chart-lock { background: #020912; }.prep-map-canvas { display: block; width: 100%; height: 100%; }.prep-map-overlay { position: absolute; right: 5px; top: 4px; z-index: 1; color: rgba(128, 222, 255, .78); font: 7px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .08em; pointer-events: none; }

.prep-lvgrid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; height: calc(100% - 24px); margin-top: 6px; }.prep-lv { display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; min-width: 0; min-height: 43px; gap: 4px; padding: 4px 8px; border: 1px solid rgba(59, 123, 174, .48); border-radius: 0; color: #d5eaf7; background: rgba(5, 22, 39, .85); text-align: left; }.prep-lv:hover { border-color: #67ceff; }.prep-lv.sel { border-color: #2db8ff; color: #fff; background: rgba(23, 110, 173, .46); box-shadow: inset 0 0 13px rgba(41, 183, 255, .19), 0 0 10px rgba(38, 175, 255, .18); }.prep-lv.locked { opacity: .38; }.prep-lv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; letter-spacing: .02em; }
.prep-sci-icon { display: block; width: 100%; height: 100%; color: currentColor; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }.prep-sci-icon text { fill: currentColor; stroke: none; font: 7px ui-monospace, Consolas, "MiSans", monospace; }.prep-level-icon { color: rgba(128, 190, 225, var(--icon-alpha, .9)); }.prep-lv.sel .prep-level-icon { color: #9ceaff; filter: drop-shadow(0 0 5px rgba(64, 191, 255, .6)); }

.prep-diffgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; height: calc(100% - 24px); margin-top: 6px; }.prep-diffbtn { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; min-height: 61px; padding: 7px 11px; text-align: left; border: 1px solid rgba(63, 125, 178, .5); border-radius: 0; background: rgba(4, 19, 34, .86); }.prep-diffbtn:hover { border-color: currentColor; background: rgba(12, 56, 91, .8); }.prep-diffbtn.sel { border-color: currentColor; box-shadow: inset 0 0 18px color-mix(in srgb, currentColor 13%, transparent), 0 0 12px color-mix(in srgb, currentColor 27%, transparent); }
.prep-mode-denial #prep-levels .prep-diffgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.prep-diff-icon { display: block; width: 37px; height: 37px; color: #66cfff; }.prep-diff-copy { min-width: 0; }.prep-diffname, .prep-diffdesc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.prep-diffname { color: #bdeeff; font-size: 14px; letter-spacing: .09em; }.prep-diffdesc { margin-top: 4px; color: #8ca7b9; font-size: 9px; line-height: 1.3; }
.prep-diff-easy { color: #69e0ae; }.prep-diff-normal { color: #56c7ff; }.prep-diff-hard { color: #bd8dff; }.prep-diff-nightmare { color: #ffb74e; }.prep-diffbtn.sel .prep-diffname { color: currentColor; }

.prep-bottom { display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; gap: 9px; min-height: 0; padding: 0 18px; border-top: 1px solid rgba(54, 141, 207, .34); }.prep-bottom-note { overflow: hidden; color: #3e769c; font: 8px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }.prep-bottom .btn { min-width: 145px; min-height: 40px; padding: 7px 26px; border-radius: 0; font-size: 14px; }.prep-bottom .btn small { display: block; margin-top: 2px; color: #6e9fbe; font: 8px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .16em; }
.prep-go { color: #e3f8ff; border-color: #32b8ff; background: linear-gradient(180deg, rgba(22, 125, 195, .72), rgba(10, 63, 119, .72)); box-shadow: inset 0 0 16px rgba(68, 211, 255, .23), 0 0 17px rgba(34, 173, 255, .22); }.prep-go:hover { background: linear-gradient(180deg, rgba(42, 167, 234, .86), rgba(15, 81, 150, .86)); }.prep-back { color: #c0d0dc; border-color: rgba(82, 123, 157, .62); background: rgba(5, 19, 32, .8); }.prep-back:hover { color: #e9f7ff; background: rgba(22, 58, 87, .8); }
.prep-go:focus-visible, .prep-back:focus-visible, .prep-ch:focus-visible, .prep-lv:focus-visible, .prep-diffbtn:focus-visible, .prep-editor-btn:focus-visible { outline: 1px solid #d4f4ff; outline-offset: 3px; }

@media (max-width: 1300px) and (min-width: 769px) {
  #prep-wrap.prep-shell { width: calc(100vw - 20px); min-height: 650px; grid-template-rows: 56px minmax(145px, 1fr) minmax(142px, 1.05fr) auto auto 44px; gap: 5px; padding-inline: 9px; }
  .prep-body { grid-template-columns: minmax(190px, .85fr) minmax(300px, 1.45fr) minmax(190px, .85fr); gap: 5px; }
  .prep-class { padding-inline: 12px; }.prep-class-orbit { flex-basis: 68px; width: 68px; height: 68px; }.prep-class-copy { margin-left: 5px; }.prep-cname { font-size: 18px; }.prep-cstat, .prep-cskill { font-size: 10px; }
  .prep-chgrid { gap: 4px; }.prep-ch { padding-inline: 5px; }.prep-chdesc { font-size: 9px; }.prep-chname { font-size: 11px; }.prep-lvgrid { gap: 3px; }.prep-lv { grid-template-columns: 25px minmax(0, 1fr); padding-inline: 4px; }.prep-diffbtn { grid-template-columns: 32px minmax(0, 1fr); gap: 4px; padding-inline: 6px; }.prep-diff-icon { width: 30px; height: 30px; }.prep-diffname { font-size: 11px; }.prep-diffdesc { font-size: 8px; }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #app > .screen > .prep-viewport { align-items: flex-start; justify-content: flex-start; overflow: auto; padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); touch-action: pan-y; }
  #prep-wrap.prep-shell { width: 100%; height: auto; min-height: 100%; min-width: 0; padding: 8px; clip-path: none; overflow: visible; grid-template-rows: auto auto auto auto auto auto; }
  .prep-topbar { min-height: 46px; grid-template-columns: 1fr auto; padding-inline: 5px; }.prep-heading { grid-column: 1 / -1; grid-row: 1; }.prep-heading span { font-size: 20px; }.prep-heading small { font-size: 8px; }.prep-brand { grid-column: 1; grid-row: 1; align-self: center; opacity: .6; }.prep-brand b { font-size: 7px; }.prep-brand small { display: none; }.prep-brand-mark { width: 22px; height: 22px; font-size: 11px; }.prep-core-status { grid-column: 2; grid-row: 1; min-width: 0; font-size: 7px; opacity: .7; }.prep-core-status b, .prep-core-status em { display: none; }
  /* 战前页移动 reflow：保留 PC 的六大区块（机体/武器/战术/章节/关卡/难度），
     改为左右两列——左列机体编成、右列任务选择（chapters/levels/diff 三个
     直接子级通过 grid-area 拼进同一列），压缩内边距让章节与难度首屏可达；
     底部出击/返回仍固定可达。列内容过高时各自内部滚动兜底。 */
  #app > .screen > .prep-viewport { align-items: stretch; justify-content: stretch; overflow: hidden; padding: max(6px, var(--sa-t)) max(8px, var(--sa-r)) max(6px, var(--sa-b)) max(8px, var(--sa-l)); touch-action: none; }
  #prep-wrap.prep-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    padding: 8px 8px 56px;
    clip-path: none;
    overflow: hidden;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    /* 中段单轨 1fr 跨三行（body/chapters/levels/diff 同轨分片）；
       右列三面板在各自行内以 flex+内部滚动消化高度（见下方规则） */
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "topbar topbar"
      "body chapters"
      "body levels"
      "body diff"
      "bottom bottom";
    gap: 5px 6px;
    will-change: auto;
  }
  #app > .screen > .prep-viewport { will-change: auto; }
  #prep-wrap.prep-shell > .prep-topbar { grid-area: topbar; }
  #prep-wrap.prep-shell > .prep-body {
    grid-area: body;
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "class" "weapons" "tactical";
    align-items: stretch;
    gap: 5px;
    overflow-y: auto;
    touch-action: pan-y;
  }
  #prep-wrap.prep-shell > .prep-chapters,
  #prep-wrap.prep-shell > .prep-levels,
  #prep-wrap.prep-shell > .prep-diff {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }
  #prep-wrap.prep-shell > .prep-chapters { grid-area: chapters; flex: 1.3 1 0; margin-top: 0; }
  #prep-wrap.prep-shell > .prep-levels { grid-area: levels; flex: 1.1 1 0; margin-top: 0; }
  #prep-wrap.prep-shell > .prep-diff { grid-area: diff; flex: 1.1 1 0; margin-top: 0; }
  /* endless / 未选模式形态：levels 隐藏时把它的轨道让给 chapters+diff
     （levels 由 JS 内联 display:none，data-hidden 由 prepUI 同步；
     行模板必须给满 5 行对应 grid-template-areas 的轨道数） */
  #prep-wrap.prep-shell:has(> .prep-levels[data-hidden]) {
    grid-template-rows: auto minmax(0, 1.55fr) 0fr minmax(0, 1.45fr) auto;
  }
  #prep-wrap.prep-shell .prep-chapters .prep-section-head,
  #prep-wrap.prep-shell .prep-levels .prep-section-head,
  #prep-wrap.prep-shell .prep-diff .prep-section-head { flex: 0 0 auto; }
  #prep-wrap.prep-shell .prep-chgrid,
  #prep-wrap.prep-shell .prep-lvgrid,
  #prep-wrap.prep-shell .prep-diffgrid { flex: 1 1 0; min-height: 0; overflow-y: auto; touch-action: pan-y; }
  #prep-wrap.prep-shell > .prep-bottom {
    grid-area: bottom;
    position: fixed;
    left: max(8px, var(--sa-l));
    right: max(8px, var(--sa-r));
    bottom: max(8px, var(--sa-b));
    height: 47px;
    min-height: 47px;
    box-sizing: border-box;
    z-index: 3;
    background: linear-gradient(180deg, rgba(2, 8, 20, .86), rgba(2, 8, 20, .98));
  }
  .prep-body, .prep-mode-campaign .prep-body, .prep-mode-endless .prep-body, .prep-mode-denial .prep-body { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "class" "weapons" "tactical"; gap: 5px; }
  .prep-class, .prep-weapons, .prep-tactical { min-height: 0; }.prep-class { padding: 8px 9px; }.prep-class-orbit { flex-basis: 52px; width: 52px; height: 52px; }.prep-cname { font-size: 15px; }.prep-cstat, .prep-cskill { font-size: 9px; }.prep-weapons { min-height: 0; }.prep-tactical { min-height: 0; }.prep-tactical-screen { min-height: 70px; }
  .prep-chapters, .prep-levels, .prep-diff { min-height: 0; padding: 7px; }.prep-chgrid, .prep-mode-denial .prep-chgrid, .prep-mode-denial #prep-chapters[data-map-count="5"] .prep-chgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }.prep-ch { min-height: 96px; }.prep-chart { min-height: 54px; }.prep-lvgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }.prep-diffgrid, .prep-mode-denial #prep-levels .prep-diffgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }.prep-diffbtn { min-height: 44px; }.prep-bottom { grid-template-columns: 1fr 1fr; padding: 7px 0 0; }.prep-bottom-note { display: none; }.prep-bottom .btn { min-width: 0; min-height: 40px; }
}

/* ================================================================
   地图编辑器 // AEGIS PROTOCOL FACILITY CONSTRUCTION TERMINAL
   视觉重制：红色神盾协议终端、切角面板与 DOM/SVG 科幻滚动条。
   这里的滚动内容不产生 layout scroll，避免任何浏览器原生滚动条。
   ================================================================ */
#app > .screen.me-root {
  --me-bg: #02050b; --me-panel: rgba(5, 9, 17, .96); --me-panel-2: rgba(8, 13, 23, .98);
  --me-red: #ff4153; --me-red-bright: #ff8994; --me-red-rgb: 255, 65, 83;
  --me-cyan: #7fc9ff; --me-gold: #ffd54f; --me-muted: #8090a8;
  position: relative; isolation: isolate; height: 100%; min-height: 0; max-height: 100%; color: #f3f6ff;
  background: radial-gradient(circle at 50% 42%, rgba(65, 12, 28, .18), transparent 42%), #02050b;
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, "MiSans", monospace;
}
#app > .screen.me-root::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .58; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 65, 83, .025) 3px 4px), linear-gradient(rgba(255, 65, 83, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 65, 83, .025) 1px, transparent 1px); background-size: auto, 64px 64px, 64px 64px; }
#app > .screen.me-root .me-header, #app > .screen.me-root .me-main { position: relative; z-index: 1; }
#app > .screen.me-root .me-header { display: flex; align-items: center; min-height: 72px; gap: 10px; padding: 9px 16px; border-bottom: 1px solid rgba(var(--me-red-rgb), .5); background: linear-gradient(180deg, rgba(8, 12, 21, .98), rgba(3, 6, 12, .96)); box-shadow: 0 8px 25px rgba(0, 0, 0, .34), inset 0 -1px rgba(255, 137, 148, .18); }
#app > .screen.me-root .me-header::after { content: ""; position: absolute; left: 16px; bottom: -2px; width: 160px; height: 2px; background: var(--me-red); box-shadow: 0 0 14px rgba(var(--me-red-rgb), .8); }
#app > .screen.me-root .me-back, #app > .screen.me-root .me-header .btn { min-height: 34px; border: 1px solid rgba(var(--me-red-rgb), .42); border-radius: 0; color: #ffe9ec; background: linear-gradient(135deg, rgba(var(--me-red-rgb), .13), rgba(9, 15, 26, .88)); box-shadow: inset 0 0 12px rgba(var(--me-red-rgb), .04); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); letter-spacing: .06em; }
#app > .screen.me-root .me-back { flex: 0 0 auto; color: var(--me-red-bright); }
#app > .screen.me-root .me-back:hover, #app > .screen.me-root .me-back:focus-visible, #app > .screen.me-root .me-header .btn:hover, #app > .screen.me-root .me-header .btn:focus-visible { border-color: var(--me-red); background: rgba(var(--me-red-rgb), .22); }
#app > .screen.me-root .me-title { display: flex; flex: 0 1 250px; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 180px; margin: 0 4px 0 2px; color: #fff6f7; font-size: 20px; font-weight: 500; letter-spacing: .2em; line-height: 1.05; text-shadow: 0 0 16px rgba(var(--me-red-rgb), .5); }
#app > .screen.me-root .me-title small { color: var(--me-red-bright); font-size: 9px; font-weight: 400; letter-spacing: .12em; white-space: nowrap; }
#app > .screen.me-root .me-header-readout { display: flex; flex: 1 1 150px; flex-direction: column; gap: 4px; min-width: 120px; color: var(--me-muted); font-size: 9px; letter-spacing: .1em; line-height: 1.2; }
#app > .screen.me-root .me-header-readout b { color: #d5dbe6; font-size: 10px; font-weight: 500; letter-spacing: .16em; }
#app > .screen.me-root .me-header-readout span::before { content: "// "; color: var(--me-red); }
#app > .screen.me-root .me-header label { color: #aeb9c9; font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
#app > .screen.me-root .me-header input[type=text], #app > .screen.me-root .me-header input[type=number] { height: 32px; box-sizing: border-box; border: 1px solid rgba(143, 160, 190, .27); border-radius: 0; color: #fff; background: #040811; outline: none; }
#app > .screen.me-root .me-header input:focus-visible { border-color: var(--me-red); box-shadow: 0 0 10px rgba(var(--me-red-rgb), .25); }
#app > .screen.me-root .me-main { flex: 1 1 0; height: 0; min-height: 0; display: flex; }
#app > .screen.me-root .me-tools, #app > .screen.me-root .me-side { display: flex; flex-direction: row; min-height: 0; overflow: hidden !important; overscroll-behavior: none; scrollbar-width: none; background: linear-gradient(180deg, rgba(5, 9, 17, .96), rgba(2, 5, 11, .98)); }
#app > .screen.me-root .me-tools::-webkit-scrollbar, #app > .screen.me-root .me-side::-webkit-scrollbar, #app > .screen.me-root .me-scroll-viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }
#app > .screen.me-root .me-tools { width: 236px; border-right: 1px solid rgba(var(--me-red-rgb), .42); }
#app > .screen.me-root .me-side { width: 302px; border-left: 1px solid rgba(var(--me-red-rgb), .42); }
#app > .screen.me-root .me-scroll-viewport { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden !important; scrollbar-width: none; }
#app > .screen.me-root .me-tools-content, #app > .screen.me-root .me-side-content { width: 100%; box-sizing: border-box; will-change: translate; }
#app > .screen.me-root .me-tools-content { gap: 7px; padding: 13px 11px 28px; }
#app > .screen.me-root .me-side-content { gap: 11px; padding: 13px 13px 32px; }
#app > .screen.me-root .me-tool-title { display: flex; align-items: center; gap: 7px; min-height: 18px; margin-top: 8px; color: var(--me-red-bright); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
#app > .screen.me-root .me-tool-title::before { content: ""; width: 13px; height: 7px; border-left: 2px solid var(--me-red); border-top: 1px solid var(--me-red); box-shadow: 0 0 8px rgba(var(--me-red-rgb), .55); }
#app > .screen.me-root .me-tool-btn, #app > .screen.me-root .me-size-btn { border: 1px solid rgba(126, 147, 178, .27); border-radius: 0; color: #d9e0ed; background: linear-gradient(135deg, rgba(22, 29, 43, .82), rgba(8, 13, 23, .88)); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); }
#app > .screen.me-root .me-tool-btn:hover, #app > .screen.me-root .me-tool-btn:focus-visible, #app > .screen.me-root .me-tool-btn.sel, #app > .screen.me-root .me-size-btn:hover, #app > .screen.me-root .me-size-btn:focus-visible, #app > .screen.me-root .me-size-btn.sel { border-color: var(--me-red); color: #fff; background: rgba(var(--me-red-rgb), .18); box-shadow: inset 0 0 15px rgba(var(--me-red-rgb), .08), 0 0 10px rgba(var(--me-red-rgb), .14); }
#app > .screen.me-root .me-tool-btn small, #app > .screen.me-root .me-dim, #app > .screen.me-root .me-size-label { color: #7f8ba0; }
#app > .screen.me-root .me-size-row { padding: 4px 0; }
#app > .screen.me-root .me-stage-wrap { position: relative; min-width: 0; min-height: 0; padding: 11px; background: radial-gradient(circle at 50% 50%, rgba(34, 9, 20, .18), transparent 62%); }
#app > .screen.me-root .me-stage-wrap::before { content: ""; position: absolute; inset: 11px; pointer-events: none; border: 1px solid rgba(var(--me-red-rgb), .24); clip-path: polygon(0 0, 20px 0, 20px 1px, calc(100% - 20px) 1px, calc(100% - 20px) 0, 100% 0, 100% 20px, calc(100% - 1px) 20px, calc(100% - 1px) calc(100% - 20px), 100% calc(100% - 20px), 100% 100%, calc(100% - 20px) 100%, calc(100% - 20px) calc(100% - 1px), 20px calc(100% - 1px), 20px 100%, 0 100%, 0 calc(100% - 20px), 1px calc(100% - 20px), 1px 20px, 0 20px); }
#app > .screen.me-root .me-stage-kicker { position: absolute; top: 17px; left: 25px; right: 25px; z-index: 2; display: flex; justify-content: space-between; pointer-events: none; color: rgba(255, 137, 148, .72); font-size: 9px; letter-spacing: .14em; }
#app > .screen.me-root .me-stage-kicker b { color: rgba(190, 201, 219, .58); font-weight: 400; }
#app > .screen.me-root #me-stage { position: relative; z-index: 1; border: 1px solid rgba(var(--me-red-rgb), .34); border-radius: 0; background: #03070e; box-shadow: inset 0 0 38px rgba(var(--me-red-rgb), .06), 0 0 18px rgba(0, 0, 0, .42); }
#app > .screen.me-root .me-hover-tip { left: 25px; bottom: 22px; z-index: 2; border: 1px solid rgba(var(--me-red-rgb), .28); border-radius: 0; color: #a7b5c9; background: rgba(3, 7, 14, .84); font-size: 10px; letter-spacing: .04em; box-shadow: 0 0 10px rgba(var(--me-red-rgb), .08); }
#app > .screen.me-root .me-scrollbar { flex: 0 0 22px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 3px; border-left: 1px solid rgba(var(--me-red-rgb), .16); background: rgba(9, 12, 20, .72); }
#app > .screen.me-root .me-scroll-step { display: grid; place-items: center; width: 17px; height: 19px; padding: 0; border: 1px solid rgba(var(--me-red-rgb), .38); border-radius: 0; color: var(--me-red-bright); background: rgba(var(--me-red-rgb), .08); cursor: pointer; }
#app > .screen.me-root .me-scroll-step:hover:not(:disabled), #app > .screen.me-root .me-scroll-step:focus-visible { border-color: var(--me-red); background: rgba(var(--me-red-rgb), .24); outline: 1px solid var(--me-red); outline-offset: 2px; }
#app > .screen.me-root .me-scroll-step:disabled { cursor: default; opacity: .28; }
#app > .screen.me-root .me-scroll-step svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }
#app > .screen.me-root .me-scroll-track { position: relative; flex: 1 1 auto; width: 16px; min-height: 36px; border: 1px solid rgba(var(--me-red-rgb), .31); border-radius: 0; background: repeating-linear-gradient(0deg, rgba(var(--me-red-rgb), .025) 0 5px, rgba(var(--me-red-rgb), .07) 5px 6px), rgba(2, 5, 11, .88); cursor: pointer; outline: none; }
#app > .screen.me-root .me-scroll-track::before { content: ""; position: absolute; inset: 5px 7px; border-left: 1px solid rgba(var(--me-red-rgb), .35); border-right: 1px solid rgba(var(--me-red-rgb), .16); pointer-events: none; }
#app > .screen.me-root .me-scroll-track:focus-visible { border-color: var(--me-red); box-shadow: 0 0 10px rgba(var(--me-red-rgb), .28); }
#app > .screen.me-root .me-scroll-thumb { position: absolute; top: 0; left: 0; width: 16px; min-height: 24px; padding: 0; border: 1px solid var(--me-red); border-radius: 0; color: var(--me-red-bright); background: linear-gradient(180deg, rgba(255, 137, 148, .28), rgba(var(--me-red-rgb), .12)); box-shadow: inset 0 0 8px rgba(var(--me-red-rgb), .24), 0 0 9px rgba(var(--me-red-rgb), .2); cursor: grab; }
#app > .screen.me-root .me-scroll-thumb:hover, #app > .screen.me-root .me-scroll-thumb.is-dragging { background: linear-gradient(180deg, rgba(255, 137, 148, .5), rgba(var(--me-red-rgb), .24)); box-shadow: inset 0 0 10px rgba(255, 255, 255, .12), 0 0 13px rgba(var(--me-red-rgb), .42); cursor: grabbing; }
#app > .screen.me-root .me-scroll-thumb:disabled { opacity: .25; cursor: default; }
#app > .screen.me-root .me-scroll-thumb svg { display: block; width: 14px; height: 100%; min-height: 24px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: square; }
#app > .screen.me-root .me-side .btn.primary { border-color: var(--me-red); color: #fff0f2; background: linear-gradient(135deg, rgba(var(--me-red-rgb), .38), rgba(var(--me-red-rgb), .12)); }
#app > .screen.me-root .me-side .btn.primary:hover, #app > .screen.me-root .me-side .btn.primary:focus-visible { background: rgba(var(--me-red-rgb), .52); }
#app > .screen.me-root .me-hint { color: #7e8ba0; font-size: 10px; line-height: 1.65; }
#app > .screen.me-root .me-map-row { border-color: rgba(var(--me-red-rgb), .25); border-radius: 0; background: rgba(15, 19, 29, .82); }
#app > .screen.me-root .me-map-row button { border-color: rgba(var(--me-red-rgb), .34); border-radius: 0; color: #dce6f3; }
#app > .screen.me-root .me-map-row button:hover, #app > .screen.me-root .me-map-row button:focus-visible { border-color: var(--me-red); color: #fff; }
#app > .screen.me-root #me-check-result { color: #aeb9c9; }
#app > .screen.me-root #me-check-result .ok { color: #ff9b83; }
#app > .screen.me-root #me-check-result .bad { color: var(--me-red-bright); }
#app > .screen.me-root button:focus-visible { outline: 1px solid var(--me-red); outline-offset: 2px; }

/* 手机抽屉沿用独立 CSS translate；内容仍由 SVG 滚动条/触摸拖动管理。 */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #app > .screen.me-root .me-tools, #app > .screen.me-root .me-side { overflow: hidden !important; touch-action: none; }
  #app > .screen.me-root .me-scroll-viewport { overflow: hidden !important; touch-action: none; }
  #app > .screen.me-root .me-scrollbar { display: flex; }
  #app > .screen.me-root .me-tools-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 10px 8px 56px; }
  #app > .screen.me-root .me-side-content { padding: 10px 8px 56px; }
  #app > .screen.me-root .me-tools, #app > .screen.me-root .me-side { width: 285px; }
  #app > .screen.me-root .me-title { min-width: 92px; font-size: 12px; letter-spacing: .1em; }
  #app > .screen.me-root .me-title small { font-size: 7px; letter-spacing: .05em; }
  #app > .screen.me-root .me-header-readout { display: none; }
  #app > .screen.me-root .me-stage-kicker { font-size: 7px; }
}

/* ================================================================
   防卫作战 // AEGIS 建筑部署终端
   建筑菜单改为右上横向长条；内容只通过自绘 SVG 横向滚动条移动，
   不产生浏览器原生滚动条。地图 Canvas 的红色全息层见 modeDenial.js。
   ================================================================ */
html.sf-battle-active .denial-build {
  position: fixed;
  top: calc(142px + var(--sa-t));
  right: calc(18px + var(--sa-r));
  bottom: auto;
  width: min(780px, calc(100vw - 390px));
  height: 460px;
  box-sizing: border-box;
  padding: 10px 12px 9px;
  gap: 7px;
  border: 1px solid rgba(255, 65, 83, .72);
  border-radius: 0;
  background: radial-gradient(circle at 80% 0%, rgba(255, 65, 83, .13), transparent 46%), linear-gradient(180deg, rgba(7, 10, 18, .97), rgba(2, 5, 11, .96));
  box-shadow: 0 0 0 1px rgba(255, 65, 83, .16), 0 0 34px rgba(255, 65, 83, .18), inset 0 0 26px rgba(255, 65, 83, .06);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px, 12px 0);
  overflow: hidden;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html.sf-battle-active .denial-build::before { content: ""; position: absolute; inset: 4px; pointer-events: none; border: 1px solid rgba(255, 137, 148, .14); clip-path: polygon(0 0, 30px 0, 30px 1px, calc(100% - 30px) 1px, calc(100% - 30px) 0, 100% 0, 100% 30px, calc(100% - 1px) 30px, calc(100% - 1px) calc(100% - 30px), 100% calc(100% - 30px), 100% 100%, calc(100% - 30px) 100%, calc(100% - 30px) calc(100% - 1px), 30px calc(100% - 1px), 30px 100%, 0 100%, 0 calc(100% - 30px), 1px calc(100% - 30px), 1px 30px, 0 30px); }
html.sf-battle-active .denial-build-title { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; min-height: 29px; padding: 0 3px 7px; border-bottom: 1px solid rgba(255, 65, 83, .36); color: #ffd9de; font-size: 12px; letter-spacing: .09em; }
html.sf-battle-active .denial-build-title span { color: #ff8994; font-size: 9px; letter-spacing: .16em; }
html.sf-battle-active .denial-build-title b { color: #fff2f4; font-weight: 500; letter-spacing: .12em; }
html.sf-battle-active .denial-build-title small { color: #8e9aaf; font-size: 9px; letter-spacing: .03em; white-space: nowrap; }
html.sf-battle-active .denial-build-list { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; max-height: none; gap: 5px; overflow: hidden !important; scrollbar-width: none; }
html.sf-battle-active .denial-build-list::-webkit-scrollbar,
html.sf-battle-active .denial-build-list-viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }
html.sf-battle-active .denial-build-list-viewport { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden !important; scrollbar-width: none; touch-action: none; }
html.sf-battle-active .denial-build-list-content { display: flex; flex-direction: row; align-items: stretch; gap: 9px; width: max-content; min-width: 100%; height: 100%; padding: 0 2px 2px; box-sizing: border-box; will-change: translate; }
html.sf-battle-active .db-group { display: flex; flex: 0 0 272px; flex-direction: column; min-width: 0; min-height: 0; padding: 5px 6px 4px; border: 1px solid rgba(255, 65, 83, .24); background: linear-gradient(180deg, rgba(21, 13, 25, .72), rgba(7, 11, 19, .84)); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
html.sf-battle-active .db-cat { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 17px; margin: 0 0 5px; padding: 0 1px 4px; border: 0; border-bottom: 1px solid rgba(255, 65, 83, .28); color: #ff8994; font-size: 10px; letter-spacing: .16em; }
html.sf-battle-active .db-cat i { color: #637187; font-size: 8px; font-style: normal; letter-spacing: .06em; }
html.sf-battle-active .db-group-grid { display: grid; flex: 0 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(72px, auto); align-content: start; gap: 5px; min-height: 0; }
html.sf-battle-active .denial-build-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: start; min-width: 0; min-height: 72px; padding: 7px 8px; border: 1px solid rgba(127, 201, 255, .24); border-radius: 0; color: #e6edf8; background: linear-gradient(135deg, rgba(19, 28, 45, .92), rgba(6, 12, 22, .9)); clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%); }
html.sf-battle-active .denial-build-btn:hover, html.sf-battle-active .denial-build-btn:focus-visible, html.sf-battle-active .denial-build-btn.sel { border-color: #ff4153; color: #fff; background: linear-gradient(135deg, rgba(255, 65, 83, .24), rgba(37, 16, 29, .88)); box-shadow: inset 0 0 13px rgba(255, 65, 83, .1), 0 0 10px rgba(255, 65, 83, .2); }
html.sf-battle-active .denial-build-btn .db-name { min-width: 0; overflow: visible; color: #f1f3fa; font-size: 10px; font-weight: 600; line-height: 1.25; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
html.sf-battle-active .denial-build-btn .db-size { margin-left: 3px; color: #91a0b7; font-size: 8px; }
html.sf-battle-active .denial-build-btn .db-cost { color: #ffd54f; font-size: 9px; white-space: nowrap; }
html.sf-battle-active .denial-build-btn .db-desc { display: block; grid-column: 1 / -1; overflow: visible; margin-top: 4px; color: #a0aec2; font-size: 8px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
html.sf-battle-active .denial-build-scrollbar { display: flex; flex: 0 0 18px; align-items: center; gap: 5px; min-height: 18px; padding: 0 3px; border-top: 1px solid rgba(255, 65, 83, .18); }
html.sf-battle-active .denial-build-scroll-step { display: grid; flex: 0 0 18px; place-items: center; width: 18px; height: 16px; padding: 0; border: 1px solid rgba(255, 65, 83, .38); border-radius: 0; color: #ff8994; background: rgba(255, 65, 83, .08); cursor: pointer; }
html.sf-battle-active .denial-build-scroll-step:hover:not(:disabled), html.sf-battle-active .denial-build-scroll-step:focus-visible { border-color: #ff4153; background: rgba(255, 65, 83, .25); outline: 1px solid #ff4153; outline-offset: 2px; }
html.sf-battle-active .denial-build-scroll-step:disabled { cursor: default; opacity: .28; }
html.sf-battle-active .denial-build-scroll-step svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
html.sf-battle-active .denial-build-scroll-track { position: relative; flex: 1 1 auto; height: 14px; min-width: 80px; border: 1px solid rgba(255, 65, 83, .32); border-radius: 0; background: repeating-linear-gradient(90deg, rgba(255, 65, 83, .025) 0 8px, rgba(255, 65, 83, .08) 8px 9px), rgba(2, 5, 11, .9); cursor: pointer; outline: none; }
html.sf-battle-active .denial-build-scroll-track:focus-visible { border-color: #ff4153; box-shadow: 0 0 10px rgba(255, 65, 83, .3); }
html.sf-battle-active .denial-build-scroll-thumb { position: absolute; top: -1px; left: 0; width: 60px; height: 14px; min-width: 42px; padding: 0; border: 1px solid #ff4153; border-radius: 0; color: #ff8994; background: linear-gradient(90deg, rgba(255, 137, 148, .4), rgba(255, 65, 83, .13)); box-shadow: inset 0 0 8px rgba(255, 65, 83, .25), 0 0 9px rgba(255, 65, 83, .22); cursor: grab; }
html.sf-battle-active .denial-build-scroll-thumb:hover, html.sf-battle-active .denial-build-scroll-thumb.is-dragging { background: linear-gradient(90deg, rgba(255, 137, 148, .62), rgba(255, 65, 83, .28)); box-shadow: 0 0 13px rgba(255, 65, 83, .42); cursor: grabbing; }
html.sf-battle-active .denial-build-scroll-thumb:disabled { opacity: .25; cursor: default; }
html.sf-battle-active .denial-build-scroll-thumb svg { display: block; width: 100%; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: square; }
html.sf-battle-active .denial-build-energy { position: absolute; right: 27px; bottom: 13px; z-index: 2; color: #ffd54f; font-size: 10px; letter-spacing: .08em; pointer-events: none; }
html.sf-battle-active .denial-wrap .denial-buildbtn {
  color: #ffd9de;
  border-color: rgba(255, 65, 83, .62);
  border-radius: 0;
  background: linear-gradient(135deg, rgba(255, 65, 83, .2), rgba(45, 10, 24, .72));
  box-shadow: inset 0 0 12px rgba(255, 65, 83, .06);
}
html.sf-battle-active .denial-wrap .denial-buildbtn:hover,
html.sf-battle-active .denial-wrap .denial-buildbtn:focus-visible {
  color: #fff2f4;
  border-color: #ff4153;
  background: linear-gradient(135deg, rgba(255, 65, 83, .38), rgba(75, 14, 30, .84));
  box-shadow: 0 0 12px rgba(255, 65, 83, .22);
}

@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html.sf-battle-active .denial-build { top: calc(58px + var(--sa-t)); right: calc(8px + var(--sa-r)); left: calc(8px + var(--sa-l)); width: auto; height: 350px; }
  html.sf-battle-active .denial-build-title { grid-template-columns: 1fr auto; gap: 5px; }
  html.sf-battle-active .denial-build-title small { display: none; }
  html.sf-battle-active .db-group { flex-basis: 268px; }
}

/* ================================================================
   ARCHIVE RECLASSIFICATION // PERSONNEL + INTELLIGENCE + DEBRIEF
   “舰队手册”现在承载通讯页同源的驾驶员档案；原 FIELD MANUAL 内容
   改写为“情报文档”；强化回收到“回收物资”；成就与统计并入“作战记录”。
   ================================================================ */
.cd-archive.cd-document-active .cd-layout { grid-template-columns: minmax(224px, 240px) minmax(0, 1fr); }
.cd-archive.cd-document-active .cd-inventory { display: none; }
.cd-archive.cd-document-active .cd-main { grid-template-rows: minmax(0, 1fr); }
.cd-archive.cd-document-active .cd-lower { display: none; }
.archive-doc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 8px 4px 18px; border-bottom: 1px solid rgba(95, 150, 232, .3); }
.archive-doc-head small { color: #62a7e7; font: 9px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .19em; }
.archive-doc-head h2 { margin: 9px 0 7px; color: #edf5ff; font: 500 28px/1 "MiSans", sans-serif; letter-spacing: .16em; }
.archive-doc-head p { margin: 0; color: #8ca8d1; font: 11px/1.65 "MiSans", sans-serif; letter-spacing: .04em; }
.archive-doc-stamp { display: grid; flex: 0 0 auto; gap: 6px; min-width: 225px; padding: 10px 13px; color: #6c8fc6; border: 1px solid rgba(83, 144, 224, .28); background: linear-gradient(135deg, rgba(16, 43, 83, .5), rgba(5, 14, 31, .72)); clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); font: 8px/1.2 ui-monospace, "MiSans", monospace; letter-spacing: .08em; }
.archive-doc-stamp b { color: #c69aff; font-size: 13px; font-weight: 500; letter-spacing: .16em; }
.archive-doc-stamp span { color: #91b5e9; }
.archive-doc-stamp i { color: #56dfb0; font-style: normal; }
.archive-intel-shell, .archive-relic-shell, .archive-operation-shell, .archive-pilot-shell, .archive-starmap-shell { min-height: 100%; padding: 20px 24px 36px; box-sizing: border-box; background: linear-gradient(180deg, rgba(8, 29, 61, .3), transparent 28%), repeating-linear-gradient(0deg, rgba(92, 150, 226, .025) 0 1px, transparent 1px 4px); }
.archive-starmap-shell { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(105, 164, 255, .66) rgba(9, 22, 47, .72); }
.archive-starmap-shell::-webkit-scrollbar { width: 6px; }
.archive-starmap-shell::-webkit-scrollbar-track { background: rgba(9, 22, 47, .72); }
.archive-starmap-shell::-webkit-scrollbar-thumb { background: rgba(105, 164, 255, .66); }
.archive-intel-abstract { position: relative; display: grid; gap: 10px; margin-top: 17px; padding: 18px 21px 15px; border: 1px solid rgba(106, 168, 247, .42); background: radial-gradient(circle at 87% 25%, rgba(114, 108, 255, .15), transparent 31%), linear-gradient(110deg, rgba(16, 45, 91, .64), rgba(5, 15, 36, .82)); clip-path: polygon(0 10px, 10px 0, 82% 0, calc(82% + 14px) 10px, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.archive-intel-abstract > span { color: #76bfff; font: 9px/1 ui-monospace, "MiSans", monospace; letter-spacing: .17em; }
.archive-intel-abstract strong { color: #e7f2ff; font: 500 20px/1.35 "MiSans", sans-serif; letter-spacing: .08em; }
.archive-intel-abstract p { max-width: 820px; margin: 0; color: #afc5e8; font: 12px/1.75 "MiSans", sans-serif; }
.archive-intel-abstract > div { display: flex; justify-content: space-between; gap: 20px; color: #6787ba; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .1em; }
.archive-intel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 15px; }
.archive-intel-section { min-width: 0; padding: 15px 17px 17px; border: 1px solid rgba(83, 143, 225, .3); background: rgba(3, 13, 31, .72); clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.archive-intel-section-wide { grid-column: 1 / -1; }
.archive-intel-section > header, .archive-operation-block > header { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(80, 141, 222, .22); }
.archive-intel-section > header span, .archive-operation-block > header span { color: #568ed1; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .15em; }
.archive-intel-section > header b, .archive-operation-block > header b { color: #cfe1ff; font: 500 13px/1 "MiSans", sans-serif; letter-spacing: .12em; }
.archive-intel-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding-top: 12px; }
.archive-intel-controls > div { display: grid; gap: 5px; min-height: 58px; padding: 8px 9px; border-left: 2px solid #4d8dff; background: rgba(12, 32, 66, .54); }
.archive-intel-controls b { color: #8bd0ff; font: 10px/1.2 "MiSans", sans-serif; }
.archive-intel-controls span { color: #9eafd0; font: 10px/1.45 "MiSans", sans-serif; }
.archive-intel-anomalies { display: grid; gap: 8px; padding-top: 12px; }
.archive-intel-anomalies > div { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 8px; background: rgba(9, 27, 56, .52); }
.archive-intel-anomalies i { width: 12px; height: 12px; border: 1px solid var(--intel-force); border-radius: 50%; box-shadow: 0 0 9px var(--intel-force); }
.archive-intel-anomalies span { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; }
.archive-intel-anomalies b { color: #dceaff; font: 11px/1 "MiSans", sans-serif; }
.archive-intel-anomalies small { color: #6d90c5; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .08em; }
.archive-intel-anomalies em { grid-column: 1 / -1; color: #a8bbdb; font: normal 10px/1.45 "MiSans", sans-serif; }
.archive-intel-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 12px; }
.archive-intel-modes > div { min-height: 108px; padding: 11px; border-top: 2px solid #a55bff; background: linear-gradient(155deg, rgba(47, 38, 92, .55), rgba(9, 16, 38, .7)); }
.archive-intel-modes > div:nth-child(2) { border-top-color: #21d9ff; background: linear-gradient(155deg, rgba(24, 66, 89, .5), rgba(9, 16, 38, .7)); }
.archive-intel-modes > div:nth-child(3) { border-top-color: #ff4153; background: linear-gradient(155deg, rgba(83, 28, 46, .46), rgba(9, 16, 38, .7)); }
.archive-intel-modes b { display: block; color: #aabce7; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .12em; }
.archive-intel-modes strong { display: block; margin-top: 8px; color: #f0f5ff; font: 500 14px/1 "MiSans", sans-serif; }
.archive-intel-modes p, .archive-intel-note, .archive-intel-columns p { color: #aabbd9; font: 10px/1.65 "MiSans", sans-serif; }
.archive-intel-modes p { margin: 8px 0 0; }
.archive-intel-note { margin: 13px 2px 0; padding-top: 10px; border-top: 1px dashed rgba(94, 146, 226, .22); }
.archive-intel-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 12px; }
.archive-intel-columns p { margin: 0; padding-left: 10px; border-left: 2px solid rgba(96, 166, 247, .55); }
.archive-intel-columns p b { color: #89d0ff; font-family: ui-monospace, "MiSans", monospace; }
.archive-intel-signature { display: flex; justify-content: space-between; margin-top: 17px; padding-top: 11px; border-top: 1px solid rgba(83, 143, 225, .22); color: #5f83b7; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .13em; }
.archive-intel-signature b { color: #73d7c0; font-weight: 400; }
.archive-relic-summary, .archive-operation-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 12px 15px; color: #9eb8df; border: 1px solid rgba(78, 140, 222, .29); background: rgba(8, 25, 54, .6); font: 11px/1.4 "MiSans", sans-serif; }
.archive-relic-summary b, .archive-operation-banner span { color: #6d9edd; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .13em; }
.archive-relic-summary strong, .archive-operation-banner b { color: #63dfbd; font: 9px/1 ui-monospace, "MiSans", monospace; letter-spacing: .08em; white-space: nowrap; }
.archive-relic-ledger { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 0 3px; color: #6d8dbd; font: 8px/1.3 ui-monospace, "MiSans", monospace; letter-spacing: .1em; }
.archive-relic-ledger b { color: #d9e2ef; font-weight: 400; }
.archive-relic-ledger i { margin-left: auto; color: #7183a1; font-style: normal; }
.archive-relic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.archive-relic-card { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 5px 10px; min-height: 148px; padding: 12px; border: 1px solid rgba(91, 148, 229, .3); background: linear-gradient(145deg, rgba(17, 38, 76, .76), rgba(4, 13, 30, .86)); clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.archive-relic-card:hover { border-color: #87c8ff; box-shadow: 0 0 15px rgba(73, 145, 255, .18); }
.archive-relic-card.locked { opacity: .48; }
.archive-relic-card.unrecorded { border-color: rgba(205, 216, 228, .5); background: linear-gradient(145deg, rgba(105, 116, 130, .38), rgba(24, 31, 43, .84)); filter: grayscale(.92) saturate(.24); }
.archive-relic-card.unrecorded:hover { border-color: #e2e9f0; box-shadow: 0 0 15px rgba(213, 223, 233, .16); }
.archive-relic-index { grid-column: 1 / -1; color: #658bc0; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .1em; }
.archive-relic-icon { display: grid; place-items: center; width: 39px; height: 39px; color: #8ccfff; border: 1px solid rgba(106, 179, 255, .42); background: rgba(26, 70, 137, .28); }
.archive-relic-icon svg { width: 28px; height: 28px; }
.archive-relic-card h3 { align-self: center; margin: 0; color: #e4efff; font: 600 13px/1.25 "MiSans", sans-serif; }
.archive-relic-card p { grid-column: 1 / -1; margin: 3px 0 0; color: #a4b9db; font: 10px/1.55 "MiSans", sans-serif; }
.archive-relic-card footer { display: flex; grid-column: 1 / -1; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(83, 143, 225, .2); color: #708db9; font: 8px/1 ui-monospace, "MiSans", monospace; }
.archive-relic-card footer b { color: #66dbbb; font-weight: 400; }
.archive-relic-card footer span b { color: #bcd1f4; }
.archive-relic-card.unrecorded .archive-relic-index,
.archive-relic-card.unrecorded .archive-relic-icon,
.archive-relic-card.unrecorded h3,
.archive-relic-card.unrecorded p,
.archive-relic-card.unrecorded footer,
.archive-relic-card.unrecorded footer b,
.archive-relic-card.unrecorded footer span b { color: #dbe2e9; border-color: rgba(216, 225, 234, .54); }
.archive-relic-card.unrecorded .archive-relic-icon { background: rgba(205, 216, 228, .12); }
.archive-operation-banner { margin-top: 15px; }
.archive-operation-banner strong { color: #e4efff; font: 500 14px/1 "MiSans", sans-serif; }
.archive-operation-block { margin-top: 14px; padding: 15px 17px 18px; border: 1px solid rgba(83, 143, 225, .3); background: rgba(3, 13, 31, .72); clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.archive-achievement-stream, .archive-stats-stream { padding-top: 12px; }
.archive-achievement-stream .achv-head { padding: 3px 0 12px; }
.archive-achievement-stream .achv-sec-title { color: #7fc6ff; }
.archive-achievement-stream .achv-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.archive-achievement-stream .achv-card { min-height: 136px; padding: 8px; background: rgba(8, 25, 53, .68); }
.archive-achievement-stream .achv-card .achv-badge { width: 46px; height: 46px; margin-bottom: 5px; }
.archive-achievement-stream .achv-card .cd-cname { font-size: 15px; line-height: 1.25; }
.archive-achievement-stream .achv-card .cd-text { font-size: 11px; line-height: 1.45; }
.archive-achievement-stream .achv-card .achv-got,
.archive-achievement-stream .achv-card .achv-reward,
.archive-achievement-stream .achv-card .achv-bar-num { font-size: 11px; }
.archive-stats-stream .achv-stats-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.archive-stats-stream .achv-stat-card { min-height: 86px; padding: 10px; background: linear-gradient(150deg, rgba(13, 39, 78, .78), rgba(4, 14, 32, .8)); }
.archive-stats-stream .achv-stat-v { font-size: 18px; }
.archive-stats-stream .achv-stat-k { font-size: 9px; }
.archive-skill-overview { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 2px 0 9px; padding: 13px 16px 12px; border: 1px solid rgba(93, 158, 235, .32); background: radial-gradient(circle at 80% 25%, rgba(93, 110, 255, .15), transparent 32%), linear-gradient(110deg, rgba(12, 38, 79, .7), rgba(3, 13, 30, .84)); clip-path: polygon(0 8px, 8px 0, 74% 0, calc(74% + 13px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.archive-skill-overview-copy { min-width: 0; }
.archive-skill-overview-copy > small { color: #70b4f1; font: 9px/1 ui-monospace, "MiSans", monospace; letter-spacing: .16em; }
.archive-skill-overview-copy h2 { margin: 8px 0 5px; color: #f1f7ff; font: 500 22px/1.1 "MiSans", sans-serif; letter-spacing: .14em; }
.archive-skill-overview-copy p { max-width: 800px; margin: 0; color: #b0c6e6; font: 12px/1.65 "MiSans", sans-serif; }
.archive-skill-overview-stats { display: grid; grid-template-columns: repeat(3, minmax(74px, 1fr)); flex: 0 0 310px; gap: 7px; }
.archive-skill-overview-stats > div { display: grid; gap: 5px; min-height: 48px; align-content: center; padding: 7px 9px; border-left: 2px solid #5ab7ff; background: rgba(16, 49, 97, .45); }
.archive-skill-overview-stats b { color: #f0f7ff; font: 600 21px/1 ui-monospace, "MiSans", monospace; }
.archive-skill-overview-stats span { color: #77a4d5; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .1em; }
.archive-skill-progress { margin-bottom: 6px; }
.archive-skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.archive-skill-card { align-items: stretch; min-height: 0; padding: 13px 14px 14px; text-align: left; border-color: rgba(84, 150, 235, .38); background: linear-gradient(145deg, rgba(10, 31, 65, .82), rgba(3, 12, 29, .9)); }
.archive-skill-card-head { display: flex; justify-content: space-between; gap: 12px; color: #7198cb; font: 9px/1 ui-monospace, "MiSans", monospace; letter-spacing: .12em; }
.archive-skill-card-head b { color: #64dfbf; font-weight: 400; }
.archive-skill-card.locked .archive-skill-card-head b { color: #7685a0; }
.archive-skill-card-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-width: 0; margin: 7px 0 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(89, 147, 226, .24); }
.archive-skill-card-title > div { min-width: 0; }
.archive-skill-card .cd-cname { margin: 0; color: #dcecff; font-size: 20px; line-height: 1.15; letter-spacing: .1em; text-align: left; }
.archive-skill-card-title small { display: block; overflow: hidden; margin-top: 5px; color: #8eadd1; font: 11px/1.35 "MiSans", sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.archive-skill-card-title > b { flex: 0 0 auto; color: #6ec9ff; font: 600 15px/1 ui-monospace, "MiSans", monospace; letter-spacing: .04em; }
.archive-skill-card-title > b span { display: block; margin-top: 4px; color: #6086b8; font-size: 7px; font-weight: 400; letter-spacing: .13em; text-align: right; }
.archive-skill-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.archive-skill-entry { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 8px; min-width: 0; min-height: 88px; padding: 8px; border: 1px solid rgba(89, 147, 226, .2); background: linear-gradient(135deg, rgba(14, 43, 84, .58), rgba(4, 17, 39, .68)); }
.archive-skill-entry:hover { border-color: rgba(117, 195, 255, .72); background: rgba(21, 65, 119, .56); }
.archive-skill-entry.locked { opacity: .58; }
.archive-skill-entry-icon { display: grid; place-items: center; width: 36px; height: 36px; color: var(--skill-accent); border: 1px solid color-mix(in srgb, var(--skill-accent) 55%, transparent); background: radial-gradient(circle, rgba(31, 126, 236, .25), rgba(5, 18, 42, .64)); clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.archive-skill-entry-icon svg { display: block; width: 30px; height: 30px; }
.archive-skill-entry-copy { min-width: 0; }
.archive-skill-entry-name { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.archive-skill-entry-name > span { flex: 0 0 auto; color: #70caff; font: 600 10px/1 ui-monospace, "MiSans", monospace; letter-spacing: .03em; }
.archive-skill-entry-name > b { min-width: 0; color: #edf5ff; font: 600 13px/1.3 "MiSans", sans-serif; overflow-wrap: anywhere; }
.archive-skill-entry-name > em { flex: 0 0 auto; margin-left: auto; color: #6a9dcc; font: normal 7px/1 ui-monospace, "MiSans", monospace; letter-spacing: .08em; }
.archive-skill-entry-copy p { margin: 5px 0 0; color: #b6c9e5; font: 11.5px/1.55 "MiSans", sans-serif; overflow-wrap: anywhere; }
.archive-skill-locked { grid-column: 1 / -1; padding-top: 12px; color: #7185aa; font: 10px/1.5 "MiSans", sans-serif; text-align: center; }
.archive-starmap-brief { display: grid; grid-template-columns: minmax(0, 1fr) 235px; gap: 16px; margin-top: 17px; padding: 16px 18px; border: 1px solid rgba(78, 148, 232, .36); background: radial-gradient(circle at 82% 40%, rgba(85, 100, 255, .14), transparent 31%), linear-gradient(110deg, rgba(10, 34, 72, .72), rgba(3, 13, 31, .84)); clip-path: polygon(0 9px, 9px 0, 78% 0, calc(78% + 13px) 9px, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.archive-starmap-brief span, .archive-starmap-readout b, .archive-starmap-readout span { color: #6da8e7; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .14em; }
.archive-starmap-brief strong { display: block; margin-top: 10px; color: #edf6ff; font: 500 18px/1.35 "MiSans", sans-serif; letter-spacing: .08em; }
.archive-starmap-brief p { max-width: 760px; margin: 8px 0 0; color: #a9bddc; font: 11px/1.7 "MiSans", sans-serif; }
.archive-starmap-readout { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 13px; border-left: 1px solid rgba(90, 153, 232, .28); }
.archive-starmap-readout-glyph { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(98, 207, 255, .22); background: radial-gradient(circle, rgba(25, 83, 124, .42), rgba(3, 15, 34, .22)); clip-path: polygon(0 5px, 5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%); }
.archive-starmap-debris-svg { display: block; width: 38px; height: 38px; overflow: visible; }
.archive-starmap-readout > div:last-child { min-width: 0; }
.archive-starmap-readout strong { margin: 0; color: #5fe2bc; font: 10px/1 ui-monospace, "MiSans", monospace; letter-spacing: .12em; }
.archive-starmap-readout i { display: block; height: 3px; background: linear-gradient(90deg, #1b9fff, #713bff); opacity: .8; }
.archive-starmap-readout i:nth-of-type(2) { width: 78%; }
.archive-starmap-readout i:nth-of-type(3) { width: 54%; }
.archive-starmap-chapter-section { margin-top: 14px; padding: 15px 17px 18px; border: 1px solid rgba(83, 143, 225, .3); background: rgba(3, 13, 31, .72); clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.archive-starmap-chapter-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(80, 141, 222, .22); }
.archive-starmap-chapter-section > header span { color: #568ed1; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .15em; }
.archive-starmap-chapter-section > header b { color: #cfe1ff; font: 500 13px/1 "MiSans", sans-serif; letter-spacing: .12em; }
.archive-starmap-chapter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 12px; }
.archive-starmap-chapter-card { min-width: 0; overflow: hidden; border: 1px solid rgba(82, 148, 227, .34); background: linear-gradient(155deg, rgba(12, 34, 69, .8), rgba(3, 12, 28, .92)); clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.archive-starmap-chapter-head { display: grid; gap: 6px; min-width: 0; padding: 10px 11px 9px; border-bottom: 1px solid rgba(86, 146, 226, .2); }
.archive-starmap-chapter-head span { color: #6b9ed9; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .12em; }
.archive-starmap-chapter-head b { overflow: hidden; color: #e7f2ff; font: 500 15px/1.2 "MiSans", sans-serif; letter-spacing: .08em; white-space: nowrap; text-overflow: ellipsis; }
.archive-starmap-chapter-head small { color: #5edbb9; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .08em; }
.archive-starmap-chapter-art { position: relative; height: 142px; overflow: hidden; border-bottom: 1px solid rgba(86, 146, 226, .2); background: linear-gradient(145deg, rgba(8, 26, 54, .9), rgba(2, 10, 24, .95)); }
.archive-starmap-chapter-art::before { content: ''; position: absolute; inset: 10px; z-index: 2; pointer-events: none; border: 1px solid rgba(113, 187, 255, .3); clip-path: polygon(0 10px, 10px 0, 70% 0, calc(70% + 10px) 7px, 100% 7px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.archive-starmap-chapter-art-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82) brightness(.8) contrast(1.04); transition: filter .25s ease, transform .35s ease; }
.archive-starmap-chapter-card:hover .archive-starmap-chapter-art-img { filter: saturate(1) brightness(.98) contrast(1.06); transform: scale(1.035); }
.archive-starmap-chapter-art > span { display: grid; height: 100%; place-items: center; color: #7189b0; font: 9px/1 ui-monospace, "MiSans", monospace; letter-spacing: .12em; }
.archive-starmap-chapter-art i { position: absolute; z-index: 3; right: 16px; left: 16px; top: 34%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, #70c9ff, transparent); opacity: .55; animation: archiveStarmapScan 3.8s linear infinite; }
.archive-starmap-chapter-art i:last-child { top: 70%; opacity: .22; animation-delay: -1.8s; }
@keyframes archiveStarmapScan { from { transform: translateY(-60px); } to { transform: translateY(80px); } }
.archive-starmap-chapter-copy { display: grid; gap: 8px; padding: 10px 11px 12px; }
.archive-starmap-chapter-copy > div { min-width: 0; padding-left: 8px; border-left: 2px solid rgba(89, 169, 247, .5); }
.archive-starmap-chapter-copy > div:nth-child(2) { border-left-color: rgba(169, 122, 255, .58); }
.archive-starmap-chapter-copy > div:nth-child(3) { border-left-color: rgba(100, 220, 194, .5); }
.archive-starmap-chapter-copy > div:nth-child(4) { border-left-color: rgba(255, 202, 91, .55); }
.archive-starmap-chapter-copy small { display: block; color: #6995c9; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .08em; }
.archive-starmap-chapter-copy p { margin: 4px 0 0; color: #a9bddd; font: 10px/1.48 "MiSans", sans-serif; }
.archive-starmap-particle-section { margin-top: 14px; padding: 15px 17px 18px; border: 1px solid rgba(83, 143, 225, .3); background: rgba(3, 13, 31, .72); clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.archive-starmap-particle-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(80, 141, 222, .22); }
.archive-starmap-particle-section > header span { color: #568ed1; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .15em; }
.archive-starmap-particle-section > header b { color: #cfe1ff; font: 500 13px/1 "MiSans", sans-serif; letter-spacing: .12em; }
.archive-starmap-particle-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding-top: 12px; }
.archive-starmap-particle-card { min-width: 0; min-height: 168px; padding: 10px 8px; border-radius: 0; border-color: rgba(82, 148, 227, .34); background: linear-gradient(155deg, rgba(12, 34, 69, .78), rgba(3, 12, 28, .88)); }
.archive-starmap-particle-card .cd-cname { overflow: hidden; width: 100%; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.archive-starmap-particle-card .cd-text, .archive-starmap-particle-card .cd-tip { font-size: 9px; line-height: 1.4; }
.archive-starmap-particle-card .cd-tip { min-height: 31px; }
.archive-pilot-head { align-items: flex-start; }
.archive-pilot-head p { max-width: 690px; }
.archive-pilot-hero { display: grid; grid-template-columns: 254px minmax(0, 1fr) 244px; gap: 18px; min-height: 296px; margin-top: 17px; padding: 14px; border: 1px solid color-mix(in srgb, var(--pilot-accent) 42%, transparent); background: radial-gradient(circle at 15% 55%, color-mix(in srgb, var(--pilot-accent) 12%, transparent), transparent 30%), linear-gradient(130deg, rgba(13, 32, 66, .78), rgba(3, 12, 28, .84)); clip-path: polygon(0 10px, 10px 0, 70% 0, calc(70% + 12px) 10px, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.archive-pilot-portrait { position: relative; min-height: 266px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--pilot-accent) 48%, transparent); background: linear-gradient(90deg, rgba(54, 116, 203, .1) 1px, transparent 1px), linear-gradient(rgba(54, 116, 203, .1) 1px, transparent 1px), radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--pilot-accent) 17%, transparent), transparent 52%); background-size: 22px 22px, 22px 22px, auto; }
.archive-pilot-portrait::before, .archive-pilot-portrait::after { content: ''; position: absolute; z-index: 2; width: 23px; height: 23px; border-color: var(--pilot-accent); pointer-events: none; }
.archive-pilot-portrait::before { top: 8px; left: 8px; border-top: 2px solid; border-left: 2px solid; }
.archive-pilot-portrait::after { right: 8px; bottom: 8px; border-right: 2px solid; border-bottom: 2px solid; }
.archive-pilot-portrait > span { position: absolute; z-index: 3; top: 11px; left: 14px; color: #91a9ce; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .11em; }
.archive-pilot-portrait img { position: absolute; inset: 25px 5px 0; width: calc(100% - 10px); height: calc(100% - 25px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 15px color-mix(in srgb, var(--pilot-accent) 38%, transparent)); }
.archive-pilot-portrait i { position: absolute; right: 12px; left: 12px; top: 40%; height: 1px; background: linear-gradient(90deg, transparent, var(--pilot-accent), transparent); opacity: .7; animation: archivePilotScan 3.2s linear infinite; }
@keyframes archivePilotScan { from { transform: translateY(-70px); opacity: 0; } 20%, 80% { opacity: .75; } to { transform: translateY(150px); opacity: 0; } }
.archive-pilot-copy { min-width: 0; padding: 20px 7px 12px; }
.archive-pilot-kicker { color: #6d95c9; font: 9px/1 ui-monospace, "MiSans", monospace; letter-spacing: .14em; }
.archive-pilot-kicker b { float: right; color: var(--pilot-accent); font-weight: 400; }
.archive-pilot-copy h3 { margin: 18px 0 6px; color: #eff6ff; font: 500 30px/1.1 "MiSans", sans-serif; letter-spacing: .11em; }
.archive-pilot-copy > strong { color: var(--pilot-accent); font: 11px/1.3 ui-monospace, "MiSans", sans-serif; letter-spacing: .08em; }
.archive-pilot-copy > strong em { color: #b7c9e8; font-style: normal; }
.archive-pilot-copy > p { max-width: 650px; margin: 24px 0 19px; color: #b4c7e5; font: 12px/1.9 "MiSans", sans-serif; }
.archive-pilot-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.archive-pilot-data span { min-width: 0; padding: 9px 10px; border: 1px solid rgba(88, 145, 225, .24); background: rgba(7, 22, 47, .6); }
.archive-pilot-data small { display: block; color: #6687bb; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .12em; }
.archive-pilot-data b { display: block; overflow: hidden; margin-top: 7px; color: #dceaff; font: 10px/1.2 "MiSans", sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.archive-pilot-doctrine { align-self: stretch; padding: 21px 15px; border-left: 1px solid rgba(94, 146, 226, .25); background: rgba(4, 13, 30, .48); }
.archive-pilot-doctrine small { color: #6f9bd2; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .15em; }
.archive-pilot-doctrine p { margin: 20px 0 0; color: #d4e4ff; font: 14px/1.8 "MiSans", sans-serif; }
.archive-pilot-doctrine > div { display: flex; align-items: center; gap: 7px; margin-top: 30px; }
.archive-pilot-doctrine i { width: 7px; height: 7px; background: var(--pilot-accent); box-shadow: 0 0 8px var(--pilot-accent); }
.archive-pilot-doctrine b { margin-left: auto; color: #5fe2ba; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .08em; }
.archive-pilot-roster-head { display: flex; justify-content: space-between; gap: 14px; margin: 16px 0 9px; padding: 0 2px 8px; border-bottom: 1px solid rgba(90, 146, 224, .24); color: #7097ca; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .14em; }
.archive-pilot-roster-head b { color: #5edbb9; font-weight: 400; }
.archive-pilot-roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.archive-pilot-card { position: relative; display: grid; grid-template-rows: auto 120px auto auto auto; min-width: 0; min-height: 180px; padding: 8px 9px 9px; overflow: hidden; color: #cddfff; text-align: left; border: 1px solid rgba(81, 139, 220, .28); background: linear-gradient(155deg, rgba(13, 35, 71, .76), rgba(4, 13, 30, .82)); clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); cursor: pointer; }
.archive-pilot-card:hover, .archive-pilot-card:focus-visible { border-color: #76c8ff; outline: 1px solid rgba(118, 200, 255, .55); outline-offset: 2px; box-shadow: 0 0 15px rgba(82, 163, 255, .2); }
.archive-pilot-card.on { border-color: var(--pilot-accent, #a879ff); box-shadow: inset 0 0 0 1px rgba(165, 91, 255, .34), 0 0 14px rgba(121, 86, 255, .17); }
.archive-pilot-card.locked { opacity: .62; }
.archive-pilot-card-id { overflow: hidden; color: #658bc0; font: 7px/1 ui-monospace, "MiSans", monospace; letter-spacing: .08em; white-space: nowrap; text-overflow: ellipsis; }
.archive-pilot-card img { display: block; width: 100%; height: 120px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 8px rgba(82, 155, 255, .2)); }
.archive-pilot-card-name { overflow: hidden; color: #edf4ff; font: 600 12px/1.2 "MiSans", sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.archive-pilot-card small { overflow: hidden; margin-top: 4px; color: #85a4d1; font: 8px/1.2 "MiSans", sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.archive-pilot-card > b { overflow: hidden; margin-top: 6px; color: #63d9bd; font: 7px/1 ui-monospace, "MiSans", monospace; white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 1400px) and (min-width: 769px) {
  .archive-intel-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-pilot-hero { grid-template-columns: 220px minmax(0, 1fr) 205px; }
  .archive-pilot-roster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .archive-relic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .archive-achievement-stream .achv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .archive-stats-stream .achv-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .archive-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-skill-entry-name > b { font-size: 12px; }
  .archive-starmap-chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-starmap-particle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .cd-archive.cd-document-active .cd-layout { grid-template-columns: 126px minmax(0, 1fr); }
  .archive-intel-shell, .archive-relic-shell, .archive-operation-shell, .archive-pilot-shell, .archive-starmap-shell { padding: 10px 8px 18px; }
  .archive-doc-head { gap: 8px; padding-bottom: 9px; }
  .archive-doc-head h2 { margin: 5px 0; font-size: 18px; }
  .archive-doc-head p, .archive-doc-stamp { display: none; }
  .archive-intel-grid { grid-template-columns: 1fr; gap: 7px; }
  .archive-intel-section-wide { grid-column: auto; }
  .archive-intel-controls, .archive-intel-modes, .archive-intel-columns { grid-template-columns: 1fr; }
  .archive-intel-abstract strong { font-size: 13px; }
  .archive-intel-abstract p, .archive-intel-controls span, .archive-intel-modes p, .archive-intel-columns p { font-size: 9px; }
  .archive-relic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-operation-banner { align-items: flex-start; flex-direction: column; gap: 6px; }
  .archive-achievement-stream .achv-grid, .archive-stats-stream .achv-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-skill-grid, .archive-starmap-particle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-skill-overview { align-items: stretch; flex-direction: column; gap: 10px; }
  .archive-skill-overview-copy p { font-size: 12px; }
  .archive-skill-overview-stats { flex-basis: auto; width: 100%; }
  .archive-skill-card .cd-cname { font-size: 18px; }
  .archive-skill-card-title small { font-size: 10px; }
  .archive-skill-records { grid-template-columns: 1fr; }
  .archive-skill-entry-copy p { font-size: 12px; }
  .archive-starmap-chapter-grid { grid-template-columns: 1fr; }
  .archive-starmap-brief { grid-template-columns: 1fr; gap: 10px; }
  .archive-starmap-readout { border-top: 1px solid rgba(90, 153, 232, .28); border-left: 0; }
  .archive-starmap-brief strong { font-size: 14px; }
  .archive-starmap-chapter-head b { font-size: 13px; }
  .archive-starmap-chapter-art { height: 126px; }
  .archive-starmap-chapter-copy p { font-size: 9px; }
  .archive-pilot-hero { grid-template-columns: 105px minmax(0, 1fr); min-height: 170px; gap: 8px; padding: 7px; }
  .archive-pilot-portrait { min-height: 154px; }
  .archive-pilot-copy { padding: 7px 2px; }
  .archive-pilot-copy h3 { margin: 10px 0 4px; font-size: 17px; }
  .archive-pilot-copy > p { margin: 10px 0; font-size: 9px; line-height: 1.55; }
  .archive-pilot-data, .archive-pilot-doctrine { display: none; }
  .archive-pilot-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-pilot-card { grid-template-rows: auto 90px auto auto auto; min-height: 145px; }
  .archive-pilot-card img { height: 90px; }
}

/* ================================================================
   FLEET PERSONNEL // CIRCULAR DOSSIER STACK
   角色手册不是网格或普通横向轮播：所有角色保持固定环形顺序，
   只把当前角色与左右四层相邻卡片投影到可点击的中央卡组。
   ================================================================ */
.archive-pilot-shell { display: flex; flex-direction: column; }
.archive-pilot-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr); gap: 14px; min-height: 0; flex: 1 1 auto; margin-top: 17px; }
.archive-pilot-stack-panel, .archive-pilot-dossier { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(83, 144, 224, .32); background: linear-gradient(145deg, rgba(12, 31, 67, .72), rgba(3, 11, 27, .9)); }
.archive-pilot-stack-panel { display: flex; flex-direction: column; }
.archive-pilot-stack-head, .archive-pilot-stack-foot { position: relative; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 31px; padding: 0 13px; color: #6f99cf; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .13em; background: rgba(3, 13, 31, .72); }
.archive-pilot-stack-head { border-bottom: 1px solid rgba(83, 144, 224, .24); }
.archive-pilot-stack-head b { color: #65dfbd; font-weight: 400; }
.archive-pilot-stack-foot { border-top: 1px solid rgba(83, 144, 224, .22); color: #557eae; }
.archive-pilot-stack-foot b { color: #91b6ed; font-weight: 400; }
.archive-pilot-stack { position: relative; flex: 1 1 auto; min-height: 390px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 49%, rgba(48, 91, 185, .19), transparent 44%), linear-gradient(rgba(70, 132, 222, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(70, 132, 222, .055) 1px, transparent 1px); background-size: auto, 30px 30px, 30px 30px; }
.archive-pilot-stack::before { content: ''; position: absolute; inset: 12% 8%; border: 1px solid rgba(75, 150, 247, .2); clip-path: polygon(0 18px, 18px 0, 35% 0, calc(35% + 13px) 8px, 65% 8px, calc(65% + 13px) 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); pointer-events: none; }
.archive-pilot-stack::after { content: 'CIRCULAR PERSONNEL ARRAY // 15'; position: absolute; right: 17px; top: 14px; z-index: 90; color: rgba(111, 167, 236, .46); font: 7px/1 ui-monospace, "MiSans", monospace; letter-spacing: .13em; pointer-events: none; }
.archive-pilot-stack-card { position: absolute; top: 50%; left: 50%; display: block; width: var(--stack-card-width, 330px); height: min(80%, 525px); min-height: 310px; padding: 0; overflow: hidden; color: #dceaff; text-align: left; border: 1px solid color-mix(in srgb, var(--pilot-accent, #5798e8) 57%, transparent); border-radius: 0; background: linear-gradient(145deg, rgba(15, 43, 87, .95), rgba(3, 13, 31, .98)); clip-path: polygon(0 12px, 12px 0, 78% 0, calc(78% + 13px) 9px, 100% 9px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); cursor: pointer; opacity: var(--stack-opacity, 0); transform: translate3d(calc(-50% + var(--stack-x, 0px)), calc(-50% + var(--stack-y, 0px)), 0) scale(var(--stack-scale, .75)); transform-origin: center center; z-index: var(--stack-z, 0); transition: transform 230ms cubic-bezier(.22, .82, .26, 1), opacity 190ms ease, filter 230ms ease, border-color 160ms ease, box-shadow 230ms ease; will-change: transform, opacity; }
.archive-pilot-stack-card::before { content: ''; position: absolute; inset: 8px; z-index: 1; pointer-events: none; border: 1px solid rgba(102, 169, 245, .18); clip-path: polygon(0 11px, 11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%); }
.archive-pilot-stack-card::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(6, 19, 43, .04) 42%, rgba(2, 9, 23, .88) 91%, rgba(2, 7, 18, .98)); }
.archive-pilot-stack-card:hover, .archive-pilot-stack-card:focus-visible { border-color: #8ed4ff; outline: 1px solid rgba(142, 212, 255, .62); outline-offset: 3px; filter: brightness(1.15); box-shadow: 0 0 20px color-mix(in srgb, var(--pilot-accent, #5798e8) 27%, transparent); }
.archive-pilot-stack-card.on { border-color: color-mix(in srgb, var(--pilot-accent, #a879ff) 83%, #eef7ff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pilot-accent, #a879ff) 55%, transparent), 0 0 24px color-mix(in srgb, var(--pilot-accent, #a879ff) 25%, transparent); }
.archive-pilot-stack-card.locked { filter: saturate(.72); }
.archive-pilot-stack-card-id { position: absolute; top: 16px; left: 18px; z-index: 5; color: #9ebce9; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .12em; }
.archive-pilot-stack-card img { position: absolute; inset: 30px 2px 54px; z-index: 2; display: block; width: calc(100% - 4px); height: calc(100% - 84px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--pilot-accent, #5798e8) 40%, transparent)); transition: filter 230ms ease, transform 230ms ease; }
.archive-pilot-stack-card:not(.on) img { filter: brightness(.82) saturate(.8) drop-shadow(0 0 10px color-mix(in srgb, var(--pilot-accent, #5798e8) 25%, transparent)); }
.archive-pilot-card-scan { position: absolute; right: 20px; left: 20px; top: 36%; z-index: 6; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--pilot-accent, #5798e8), transparent); opacity: .62; animation: archivePilotStackScan 3.4s linear infinite; }
@keyframes archivePilotStackScan { from { transform: translateY(-145px); opacity: 0; } 18%, 76% { opacity: .68; } to { transform: translateY(230px); opacity: 0; } }
.archive-pilot-card-footer { position: absolute; right: 16px; bottom: 15px; left: 16px; z-index: 7; display: grid; gap: 4px; min-width: 0; }
.archive-pilot-card-name { overflow: hidden; color: #f0f6ff; font: 600 17px/1.15 "MiSans", sans-serif; letter-spacing: .09em; white-space: nowrap; text-overflow: ellipsis; }
.archive-pilot-card-footer small { overflow: hidden; color: #9bb2d8; font: 8px/1.25 "MiSans", sans-serif; letter-spacing: .03em; white-space: nowrap; text-overflow: ellipsis; }
.archive-pilot-card-footer em { overflow: hidden; color: #64dfbf; font: normal 7px/1 ui-monospace, "MiSans", monospace; letter-spacing: .1em; white-space: nowrap; text-overflow: ellipsis; }
.archive-pilot-stack-card[aria-hidden="true"] { pointer-events: none; }
.archive-pilot-stack.is-animating .archive-pilot-stack-card { pointer-events: none; }
.archive-pilot-stack.is-animating .archive-pilot-stack-card[aria-hidden="false"] { pointer-events: auto; }
.archive-pilot-dossier { display: flex; flex-direction: column; padding: 18px 20px 14px; background: radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--pilot-accent, #5798e8) 13%, transparent), transparent 30%), linear-gradient(155deg, rgba(8, 27, 59, .78), rgba(2, 10, 24, .94)); transition: background 360ms ease, border-color 360ms ease; }
.archive-pilot-dossier::before { content: ''; position: absolute; inset: 10px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--pilot-accent, #5798e8) 23%, transparent); clip-path: polygon(0 13px, 13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%); }
.archive-pilot-dossier-head { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 14px; padding: 5px 3px 15px; border-bottom: 1px solid rgba(93, 149, 230, .3); }
.archive-pilot-dossier-head small { display: block; color: #6e9ed8; font: 8px/1.2 ui-monospace, "MiSans", monospace; letter-spacing: .13em; }
.archive-pilot-dossier-head small b { margin-left: 8px; color: #63dfbd; font-weight: 400; }
.archive-pilot-dossier-head h3 { margin: 15px 0 6px; color: #f3f7ff; font: 500 30px/1 "MiSans", sans-serif; letter-spacing: .12em; }
.archive-pilot-dossier-head strong { color: var(--pilot-accent, #7cb9ff); font: 10px/1.3 ui-monospace, "MiSans", sans-serif; letter-spacing: .08em; }
.archive-pilot-dossier-head strong em { color: #b9cae6; font-style: normal; }
.archive-pilot-dossier-index { display: grid; align-content: start; justify-items: end; gap: 7px; color: #668bc4; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .1em; white-space: nowrap; }
.archive-pilot-dossier-index b { color: var(--pilot-accent, #7cb9ff); font-size: 11px; font-weight: 400; }
.archive-pilot-dossier-index i { color: #dbeaff; font-size: 24px; font-style: normal; letter-spacing: .08em; }
.archive-pilot-dossier-scan { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; height: 25px; margin: 13px 0 6px; color: #5c88c5; font: 7px/1 ui-monospace, "MiSans", monospace; letter-spacing: .12em; overflow: hidden; }
.archive-pilot-dossier-scan i { flex: 0 0 33%; height: 1px; background: linear-gradient(90deg, transparent, var(--pilot-accent, #5798e8)); }
.archive-pilot-dossier-scan b { font-weight: 400; }
.archive-pilot-dossier-background { position: relative; z-index: 1; margin: 0; color: #bacce8; font: 12px/1.9 "MiSans", sans-serif; }
.archive-pilot-dossier-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.archive-pilot-dossier-grid > div { min-width: 0; padding: 10px 11px; border: 1px solid rgba(88, 145, 225, .25); background: rgba(7, 22, 47, .58); }
.archive-pilot-dossier-grid small { display: block; color: #6687bb; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .12em; }
.archive-pilot-dossier-grid b { display: block; overflow: hidden; margin-top: 7px; color: #dfebff; font: 10px/1.3 "MiSans", sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.archive-pilot-dossier-doctrine { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; margin-top: 18px; padding: 15px 14px; border-left: 2px solid var(--pilot-accent, #5798e8); background: rgba(4, 13, 30, .5); }
.archive-pilot-dossier-doctrine small { color: #719bd0; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .15em; }
.archive-pilot-dossier-doctrine p { margin: 18px 0 0; color: #d4e4ff; font: 14px/1.8 "MiSans", sans-serif; }
.archive-pilot-dossier-doctrine > div { display: flex; align-items: center; gap: 7px; margin-top: 26px; }
.archive-pilot-dossier-doctrine i { width: 7px; height: 7px; background: var(--pilot-accent, #5798e8); box-shadow: 0 0 8px var(--pilot-accent, #5798e8); }
.archive-pilot-dossier-doctrine b { margin-left: auto; color: #60dfbd; font: 8px/1 ui-monospace, "MiSans", monospace; letter-spacing: .1em; }
.archive-pilot-dossier > footer { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 9px; padding-top: 13px; color: #5f82b7; font: 7px/1 ui-monospace, "MiSans", monospace; letter-spacing: .1em; }
.archive-pilot-dossier > footer b { color: #62d7ba; font-weight: 400; }
.archive-pilot-dossier-switching > * { opacity: .24; filter: blur(1.4px); }
.archive-pilot-dossier-switching .archive-pilot-dossier-scan { opacity: 1; filter: none; }
.archive-pilot-dossier-switching .archive-pilot-dossier-scan i { animation: archivePilotDossierScan .23s linear infinite; }
.archive-pilot-dossier-arrive > * { animation: archivePilotDossierReveal .36s ease both; }
@keyframes archivePilotDossierScan { from { transform: translateX(-20%); } to { transform: translateX(210%); } }
@keyframes archivePilotDossierReveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1400px) and (min-width: 769px) {
  .archive-pilot-layout { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 10px; }
  .archive-pilot-dossier { padding-inline: 14px; }
  .archive-pilot-dossier-head h3 { font-size: 25px; }
  .archive-pilot-dossier-background { font-size: 11px; line-height: 1.7; }
  .archive-pilot-dossier-doctrine p { font-size: 12px; }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .archive-pilot-layout { grid-template-columns: 1fr; grid-template-rows: minmax(360px, 1fr) auto; gap: 8px; }
  .archive-pilot-stack { min-height: 360px; }
  .archive-pilot-stack-card { height: min(86%, 420px); min-height: 260px; }
  .archive-pilot-dossier { min-height: 320px; padding: 12px; }
  .archive-pilot-dossier-head h3 { margin-top: 9px; font-size: 20px; }
  .archive-pilot-dossier-background { font-size: 10px; line-height: 1.6; }
  .archive-pilot-dossier-doctrine p { font-size: 11px; }
}

/* 中文可见文字字号下限 13px：动态 DOM 文本由 zhTypography.js 标记；英文编号、
   状态码和装饰性终端信息没有中文，不会被这条规则放大。 */
.zh-visible-text {
  font-size: max(13px, var(--zh-visible-base-size, 13px)) !important;
}

/* ---------- 战斗 HUD：奖励提示与武器槽切换反馈 ---------- */
.battle-root .toast-stack {
  bottom: calc(260px + var(--sa-b)); /* 局内奖励提示统一上移 140px */
}

.battle-root .toast.is-reward {
  color: #f2e8ff;
  border-color: rgba(179, 136, 255, .94);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(65, 27, 105, .92), rgba(28, 15, 58, .9));
  box-shadow: 0 0 14px rgba(179, 136, 255, .28), inset 0 0 0 1px rgba(224, 204, 255, .12);
}

.battle-root .weapon-row .weapon-index {
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.battle-root .weapon-row.is-active .weapon-index {
  color: #f0ddff;
  border-color: rgba(179, 136, 255, .9);
  background: rgba(108, 50, 164, .28);
  box-shadow: 0 0 12px rgba(179, 136, 255, .24);
}

.battle-root .weapon-row.is-active .weapon-card {
  border-color: rgba(179, 136, 255, .92);
  box-shadow: 0 0 16px rgba(179, 136, 255, .25), inset 0 0 18px rgba(116, 53, 173, .11);
}

.battle-root .weapon-row.is-active .weapon-card .weapon-icon,
.battle-root .weapon-row.is-active .weapon-card .weapon-name {
  color: #e7caff;
}

.battle-root .hud-deck.weapon-switching .weapon-system-title {
  color: #e7caff;
  text-shadow: 0 0 12px rgba(179, 136, 255, .7);
}

.battle-root .weapon-row.is-switching .weapon-index,
.battle-root .weapon-row.is-switching .weapon-card {
  animation: weaponSlotSwitch .46s cubic-bezier(.2, .8, .2, 1) both;
}

.battle-root .weapon-row.is-switch-target .weapon-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(231, 202, 255, .26), transparent);
  animation: weaponSlotScan .46s ease-out both;
}

@keyframes weaponSlotSwitch {
  0% { opacity: .58; transform: translateX(10px); filter: brightness(.78); }
  45% { opacity: 1; transform: translateX(-2px); filter: brightness(1.45); }
  100% { opacity: 1; transform: translateX(0); filter: brightness(1); }
}

@keyframes weaponSlotScan {
  from { transform: translateX(-110%); opacity: 0; }
  22% { opacity: 1; }
  to { transform: translateX(110%); opacity: 0; }
}

@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .battle-root .toast-stack { bottom: calc(230px + var(--sa-b)); }
}

@media (max-width: 700px), (orientation: landscape) and (max-height: 420px) and (pointer: coarse) {
  .battle-root .toast-stack { bottom: calc(228px + var(--sa-b)); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-root .weapon-row.is-switching .weapon-index,
  .battle-root .weapon-row.is-switching .weapon-card,
  .battle-root .weapon-row.is-switch-target .weapon-card::before { animation: none; }
}

/* ---------- 结算终端：移动横屏仍保持“内容区 + 固定操作栏” ---------- */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rs-wrap { align-items: stretch; padding: max(8px, var(--sa-t)) max(8px, var(--sa-r)) max(8px, var(--sa-b)) max(8px, var(--sa-l)); overflow: hidden; }
  .rs-panel.rs-shell { width: 100%; height: 100%; min-height: 0; max-height: none; padding: 16px 16px 10px; gap: 10px; }
  .rs-telemetry { display: none; }
  .rs-status-line { gap: 5px; font-size: 8px; letter-spacing: .1em; }
  .rs-status-line small { font-size: 7px; }
  .rs-title-row { gap: 10px; }
  .rs-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .rs-icon svg { width: 32px; height: 32px; }
  .rs-title { font-size: clamp(19px, 4vw, 32px); letter-spacing: .06em; }
  .rs-title-copy { gap: 4px; }
  .rs-title-copy small { font-size: 8px; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rs-header { gap: 7px; }
  .rs-header-meta { padding-left: 52px; gap: 5px 10px; font-size: 7px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; }
  .rs-grid { grid-template-columns: minmax(172px, .72fr) minmax(0, 1.28fr); gap: 8px; }
  .rs-summary-panel { padding: 9px; gap: 7px; }
  .rs-panel-label { font-size: 8px; letter-spacing: .09em; }
  .rs-stats { gap: 4px; }
  .rs-row { padding: 5px 6px; gap: 3px; }
  .rs-k { font-size: 7px; letter-spacing: .04em; }
  .rs-v { font-size: 11px; }
  .rs-reward-block { padding: 7px 0 6px; }
  .rs-gain-label { font-size: 7px; letter-spacing: .04em; }
  .rs-gain-num { margin-top: 4px; font-size: 25px; }
  .rs-items { max-height: 34px; gap: 2px; font-size: 7px; }
  .rs-achv { padding: 5px 6px; }
  .rs-achv-title { font-size: 7px; margin-bottom: 2px; }
  .rs-achv-item { font-size: 8px; }
  .rs-terminal-head, .rs-terminal-foot { padding: 7px 9px; font-size: 7px; letter-spacing: .06em; }
  .rs-terminal-viewport { min-height: 0; padding: 8px 9px; }
  .rs-log-track { gap: 5px; }
  .rs-log-line { grid-template-columns: 16px minmax(0, 1fr); gap: 4px; font-size: 8px; }
  .rs-actions { flex: 0 0 auto; gap: 6px; }
  .rs-actions .btn { min-width: 0; min-height: 34px; flex: 1 1 0; padding: 0 7px; font-size: 8px; letter-spacing: .04em; }
  .rs-footer { font-size: 6px; letter-spacing: .06em; }
}

@media (orientation: portrait) and (max-width: 768px) {
  .rs-wrap { overflow-y: auto; }
  .rs-panel.rs-shell { height: auto; min-height: calc(100% - 16px); }
  .rs-grid { grid-template-columns: 1fr; }
  .rs-terminal { min-height: 180px; }
  .rs-terminal-viewport { height: 140px; }
}

/* 旧成就兼容选择器的末尾覆盖：成就数据仍保留，但视觉统一到结果终端。 */
.rs-wrap .rs-achv { margin: 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--rs-color) 45%, transparent); border-radius: 0; background: var(--rs-soft); }
.rs-wrap .rs-achv-title { color: var(--rs-bright); font: 10px/1.2 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; font-weight: 500; }
.rs-wrap .rs-achv-item { color: var(--white); font: 11px/1.2 ui-monospace, Consolas, "MiSans", monospace; }
.rs-wrap .rs-achv-item .rs-achv-name,
.rs-wrap .rs-achv-item .v-gold { color: var(--rs-bright); }

/* ================================================================
   档案敌人/武器统一详情终端
   与机体档案共用左侧 LIVE PREVIEW + DATA OVERVIEW，右侧只承载缩略索引。
   ================================================================ */
.cd-archive.cd-collection-active .cd-main { grid-template-rows: minmax(0, 1fr) 0; }
.cd-archive.cd-collection-active .cd-lower { display: none; }
.cd-collection-preview .cd-preview-stage { background: radial-gradient(circle at 50% 65%, rgba(113, 47, 217, .12), transparent 38%), linear-gradient(rgba(65, 135, 235, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(65, 135, 235, .07) 1px, transparent 1px); }
.cd-collection-preview.cd-collection-enemy .cd-preview-stage { background: radial-gradient(circle at 50% 65%, rgba(255, 69, 95, .13), transparent 38%), linear-gradient(rgba(235, 89, 119, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(235, 89, 119, .07) 1px, transparent 1px); }
.cd-collection-preview.cd-collection-weapon .cd-preview-stage { background: radial-gradient(circle at 50% 65%, rgba(179, 136, 255, .14), transparent 38%), linear-gradient(rgba(65, 135, 235, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(65, 135, 235, .07) 1px, transparent 1px); }
.cd-collection-preview .cd-ship-stage canvas { width: min(100%, 560px); height: min(100%, 390px); min-height: 230px; object-fit: contain; }
.cd-collection-preview .cd-ship-heading strong b { color: var(--collection-accent, #d6e4ff); }
.cd-collection-enemy { --collection-accent: #ff8a98; }
.cd-collection-weapon { --collection-accent: #c7a7ff; }
.cd-collection-preview .cd-profile-block p { max-height: 104px; overflow: hidden; }

.cd-collection-inventory .cd-inventory-head { flex: 0 0 auto; }
.cd-collection-inventory .cd-prog-head { flex: 0 0 auto; margin: 8px 0 2px; padding: 0 1px; }
.cd-collection-inventory .cd-prog-txt { color: #8fa9d9; font-size: 8px; letter-spacing: .08em; }
.cd-collection-inventory .cd-prog-txt b { color: #dce8ff; font-weight: 500; }
.cd-collection-inventory .achv-prog { height: 3px; margin-top: 5px; background: #172b54; }
.cd-collection-inventory .achv-prog-fill { height: 100%; background: linear-gradient(90deg, #4c8cff, #b679ff); box-shadow: 0 0 8px rgba(106, 139, 255, .65); }
.cd-collection-inventory .cd-collection-inventory-grid { grid-template-rows: none; grid-auto-rows: minmax(104px, auto); align-content: start; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; scrollbar-color: rgba(105, 164, 255, .6) rgba(9, 22, 47, .7); }
.cd-collection-inventory .cd-collection-inventory-grid::-webkit-scrollbar { width: 5px; }
.cd-collection-inventory .cd-collection-inventory-grid::-webkit-scrollbar-track { background: rgba(9, 22, 47, .7); }
.cd-collection-inventory .cd-collection-inventory-grid::-webkit-scrollbar-thumb { background: rgba(105, 164, 255, .6); }
.cd-collection-inventory .cd-collection-card { min-height: 104px; }
.cd-collection-inventory .cd-collection-card canvas { flex: 0 0 60px; width: 100%; height: 60px; min-height: 50px; margin: 0; }
.cd-collection-card-icon { display: grid; place-items: center; flex: 0 0 60px; width: 100%; min-height: 50px; color: var(--weapon-accent, #9be8ff); background: rgba(4, 15, 35, .58); border-bottom: 1px solid rgba(112, 175, 255, .14); }
.cd-collection-card-icon svg { width: 76px; height: 58px; }
.cd-collection-inventory .cd-collection-card .cd-inventory-name { margin-top: 4px; }
.cd-collection-inventory .cd-collection-card .cd-wname { color: #e1eaff; font-size: 10px; }
.cd-collection-inventory .cd-collection-card .cd-wq { color: #819bc8; font-size: 7px; }
.cd-collection-inventory .cd-collection-card.on { border-color: var(--collection-accent, #b27bff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--collection-accent, #b27bff) 48%, transparent), 0 0 15px color-mix(in srgb, var(--collection-accent, #b27bff) 18%, transparent); }
.cd-collection-inventory[data-collection="enemy"] .cd-collection-card.on { --collection-accent: #ff7187; }
.cd-collection-inventory[data-collection="weapon"] .cd-collection-card.on { --collection-accent: #b27bff; }

/* 档案页专用分类条：每页按钮数量由 JS 通过 --cd-filter-count 同步，
   机体索引与敌人/武器索引保持同样的三列滚动卡片密度。 */
.cd-archive-filter-tabs button[aria-pressed="true"] { color: #f2ecff; background: rgba(71, 44, 143, .52); border-color: #a875ff; box-shadow: inset 0 0 12px rgba(150, 102, 255, .16); }
.cd-archive-filter-tabs[data-filter-kind="enemy"] button[aria-pressed="true"] { color: #ffe8ed; background: rgba(125, 39, 62, .48); border-color: #ff7187; box-shadow: inset 0 0 12px rgba(255, 87, 119, .15); }
.cd-archive-filter-tabs[data-filter-kind="weapon"] button[aria-pressed="true"] { color: #f2ecff; background: rgba(71, 44, 143, .52); border-color: #b27bff; }
.cd-class-inventory .cd-inventory-grid { grid-template-rows: none; grid-auto-rows: minmax(104px, auto); align-content: start; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; scrollbar-color: rgba(105, 164, 255, .6) rgba(9, 22, 47, .7); }
.cd-class-inventory .cd-inventory-grid::-webkit-scrollbar { width: 5px; }
.cd-class-inventory .cd-inventory-grid::-webkit-scrollbar-track { background: rgba(9, 22, 47, .7); }
.cd-class-inventory .cd-inventory-grid::-webkit-scrollbar-thumb { background: rgba(105, 164, 255, .6); }
.cd-class-inventory .cd-inventory-card { min-height: 104px; }
.cd-class-inventory .cd-inventory-card canvas { flex: 0 0 60px; width: 100%; height: 60px; min-height: 50px; margin: 0; }
.cd-class-inventory .cd-inventory-card > b { color: #b27bff; font-size: 8px; }
.cd-collection-inventory .cd-collection-card > b { max-width: calc(100% - 12px); overflow: hidden; color: var(--collection-accent, #76a4ff); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1320px) and (min-width: 769px) {
  .cd-archive.cd-collection-active .cd-preview-grid { grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); }
  .cd-archive.cd-collection-active .cd-overview { display: block; padding-inline: 6px; }
  .cd-archive.cd-collection-active .cd-data-grid { gap: 3px; }
  .cd-archive.cd-collection-active .cd-data-cell { padding-inline: 5px; }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .cd-archive.cd-collection-active .cd-main { grid-template-rows: minmax(0, 1fr); }
  .cd-archive.cd-collection-active .cd-lower { display: none; }
  .cd-archive.cd-collection-active .cd-inventory { display: none; }
  .cd-collection-preview .cd-preview-grid { grid-template-columns: 1.2fr .8fr; }
  .cd-collection-preview .cd-ship-stage canvas { min-height: 70px; height: 100%; }
  .cd-collection-preview .cd-data-cell strong { font-size: 6px; }
}

/* ================================================================
   SHOP 独立机体商店终端
   以用户确认的舰队终端参考图为基准：左侧登记列表 / 中央实时机体与
   UNLOCK PROTOCOL / 右侧驾驶员与状态数据。FRAME 页面不使用这些规则。
   ================================================================ */
.fleet-shop-terminal { min-height: 610px; height: 100%; }
.fleet-shop-layout {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(440px, 1.55fr) minmax(280px, .95fr);
  gap: 12px;
  min-height: 610px;
}
.fleet-shop-registry,
.fleet-shop-detail,
.fleet-shop-terminal #fleet-shop-pilot {
  min-width: 0;
  min-height: 0;
  border-radius: 2px;
  background: rgba(6, 21, 45, .72);
}
.fleet-shop-registry { display: flex; flex-direction: column; overflow: hidden; }
.fleet-shop-filter-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  padding: 7px;
  border-bottom: 1px solid rgba(80, 163, 242, .2);
}
.fleet-shop-filter-tabs button {
  min-width: 0;
  min-height: 37px;
  padding: 4px 3px;
  color: #6e8caf;
  border: 1px solid rgba(75, 139, 215, .3);
  background: rgba(8, 29, 59, .72);
  font: inherit;
  font-size: 7px;
  letter-spacing: .04em;
  cursor: pointer;
}
.fleet-shop-filter-tabs button small { display: block; margin-top: 3px; color: #567ba6; font-size: 6px; letter-spacing: 0; white-space: nowrap; }
.fleet-shop-filter-tabs button:hover,
.fleet-shop-filter-tabs button:focus-visible,
.fleet-shop-filter-tabs button[aria-pressed="true"] {
  color: #f3edff;
  border-color: #aa79ff;
  outline: none;
  background: rgba(83, 51, 153, .48);
  box-shadow: inset 0 -2px 0 #bd8bff;
}
.fleet-shop-filter-tabs button[aria-pressed="true"] small { color: #c7a8ff; }
.fleet-shop-list {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 0;
  padding: 7px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(105, 164, 255, .6) rgba(9, 22, 47, .7);
}
.fleet-shop-list::-webkit-scrollbar { width: 5px; }
.fleet-shop-list::-webkit-scrollbar-track { background: rgba(9, 22, 47, .7); }
.fleet-shop-list::-webkit-scrollbar-thumb { background: rgba(105, 164, 255, .6); }
.fleet-shop-terminal .fleet-shop-frame-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 6px;
  min-width: 0;
  min-height: 60px;
  padding: 4px;
  border: 1px solid rgba(75, 148, 223, .26);
  border-left: 2px solid var(--frame-accent, #4fc3f7);
  background: rgba(9, 30, 58, .48);
}
.fleet-shop-terminal .fleet-shop-frame-card.source-achievement { border-left-color: #b388ff; }
.fleet-shop-terminal .fleet-shop-frame-card.source-starter { border-left-color: #69e4bf; }
.fleet-shop-terminal .fleet-shop-frame-card.selected,
.fleet-shop-terminal .fleet-shop-frame-card:hover { border-color: var(--frame-accent, #66cfff); background: rgba(21, 69, 115, .62); box-shadow: inset 0 0 14px rgba(69, 161, 244, .1); }
.fleet-shop-list-select {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 1px;
  color: #a2bddd;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fleet-shop-list-select:focus-visible { outline: 1px solid #78d6ff; outline-offset: 1px; }
.fleet-shop-list-visual { display: grid; place-items: center; height: 46px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--frame-accent, #4fc3f7) 35%, transparent); background: rgba(4, 17, 38, .72); }
.fleet-shop-list-visual canvas { display: block; width: 48px; height: 42px; }
.fleet-shop-list-copy { min-width: 0; }
.fleet-shop-list-copy b,
.fleet-shop-list-copy small,
.fleet-shop-list-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-shop-list-copy b { color: #e9f5ff; font-size: 11px; font-weight: 500; }
.fleet-shop-list-copy small { margin-top: 2px; color: #708fb4; font-size: 7px; }
.fleet-shop-list-copy em { margin-top: 3px; color: var(--frame-accent, #70cfff); font-size: 6px; font-style: normal; letter-spacing: .08em; }
.fleet-shop-list-state { color: var(--frame-accent, #70cfff); font-size: 6px; letter-spacing: .08em; }
.fleet-shop-list-action { display: flex; align-items: center; }
.fleet-shop-list-action .fleet-shop-frame-action { min-width: 54px; min-height: 23px; margin: 0; padding: 3px 4px; font-size: 7px; }
.fleet-shop-card-condition { display: none; }
.fleet-shop-detail { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 14px; overflow: hidden; }
.fleet-shop-detail .fleet-frame-visual { flex: 0 0 auto; }
.fleet-shop-hero-visual { min-height: 142px; }
.fleet-shop-selected-preview { position: relative; z-index: 1; display: block; width: 100%; height: 146px; }
.fleet-shop-protocol { display: grid; gap: 5px; padding: 9px 10px; border: 1px solid rgba(177, 129, 255, .62); border-left: 2px solid #6be4bd; background: linear-gradient(135deg, rgba(25, 46, 80, .78), rgba(27, 20, 68, .56)); }
.fleet-shop-protocol-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fleet-shop-protocol-head b, .fleet-shop-protocol-head small { display: block; }
.fleet-shop-protocol-head b { color: #d8c1ff; font-size: 9px; letter-spacing: .14em; }
.fleet-shop-protocol-head small { margin-top: 2px; color: #738bb2; font-size: 6px; letter-spacing: .08em; }
.fleet-shop-protocol-head em { color: #c3a7ff; font-size: 7px; font-style: normal; letter-spacing: .1em; }
.fleet-shop-protocol > strong { color: #edf7ff; font-size: 11px; font-weight: 500; }
.fleet-shop-protocol > p { margin: 0; color: #82a3c7; font-size: 8px; line-height: 1.35; }
.fleet-shop-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.fleet-shop-progress > i { display: block; height: 4px; background: rgba(91, 113, 188, .3); }
.fleet-shop-progress > i em { display: block; height: 100%; background: linear-gradient(90deg, #b36eff, #d0aeff); box-shadow: 0 0 9px rgba(179, 110, 255, .65); }
.fleet-shop-progress > small { color: #a88ed7; font-size: 6px; letter-spacing: .05em; }
.fleet-shop-protocol-action { display: flex; justify-content: flex-end; }
.fleet-shop-protocol-action .fleet-shop-frame-action { min-width: 140px; min-height: 28px; margin-top: 2px; font-size: 8px; }
.fleet-shop-system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: auto; }
.fleet-shop-system-grid span { display: grid; gap: 3px; min-width: 0; padding: 7px; border: 1px solid rgba(75, 148, 223, .25); background: rgba(4, 19, 42, .6); }
.fleet-shop-system-grid b, .fleet-shop-system-grid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-shop-system-grid b { color: #6da5d5; font-size: 6px; letter-spacing: .08em; }
.fleet-shop-system-grid small { color: #dbeeff; font-size: 8px; }
.fleet-shop-terminal #fleet-shop-pilot { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; overflow: hidden; }
.fleet-shop-terminal #fleet-shop-pilot .fleet-portrait-info,
.fleet-shop-terminal #fleet-shop-pilot .fleet-wing-status { display: none; }
.fleet-shop-terminal #fleet-shop-pilot .fleet-portrait-reserve { width: min(100%, 210px); max-width: none; aspect-ratio: 3 / 4; }
.fleet-shop-side-data { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 6px 8px; border: 1px solid rgba(75, 148, 223, .27); background: rgba(4, 18, 40, .62); }
.fleet-shop-side-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; border-bottom: 1px solid rgba(80, 163, 242, .2); }
.fleet-shop-side-head b { color: #76cfff; font-size: 8px; letter-spacing: .12em; }
.fleet-shop-side-head em { color: #74d7ff; font-size: 6px; font-style: normal; letter-spacing: .08em; }
.fleet-shop-side-data span { display: contents; }
.fleet-shop-side-data span small { color: #6789b1; font-size: 6px; letter-spacing: .08em; }
.fleet-shop-side-data span b { overflow: hidden; color: #ddecff; font-size: 7px; font-weight: 500; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.fleet-shop-fleet-data { border-color: rgba(179, 136, 255, .3); }
.fleet-shop-fleet-data .fleet-shop-side-head b { color: #c2a7ff; }

@media (max-width: 1100px) and (min-width: 769px) {
  .fleet-shop-layout { grid-template-columns: 220px minmax(360px, 1fr) 230px; gap: 8px; }
  .fleet-shop-filter-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fleet-shop-list-copy small { display: none; }
  .fleet-shop-list-select { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .fleet-shop-list-visual { height: 39px; }
  .fleet-shop-list-visual canvas { width: 42px; height: 36px; }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .fleet-shop-terminal { min-height: 0; height: auto; }
  .fleet-shop-layout { grid-template-columns: 1fr; gap: 7px; min-height: 0; }
  .fleet-shop-registry { max-height: 220px; }
  .fleet-shop-filter-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 5px; }
  .fleet-shop-filter-tabs button { min-height: 31px; font-size: 6px; }
  .fleet-shop-filter-tabs button small { font-size: 5px; }
  .fleet-shop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 5px; }
  .fleet-shop-terminal .fleet-shop-frame-card { min-height: 54px; }
  .fleet-shop-list-select { grid-template-columns: 37px minmax(0, 1fr); }
  .fleet-shop-list-state { display: none; }
  .fleet-shop-list-visual { height: 35px; }
  .fleet-shop-list-visual canvas { width: 35px; height: 31px; }
  .fleet-shop-list-copy b { font-size: 8px; }
  .fleet-shop-list-copy small { display: none; }
  .fleet-shop-list-copy em { font-size: 5px; }
  .fleet-shop-list-action { grid-column: 1 / -1; }
  .fleet-shop-list-action .fleet-shop-frame-action { width: 100%; }
  .fleet-shop-detail { order: 1; padding: 9px; }
  .fleet-shop-pilot { order: 2; }
  .fleet-shop-terminal #fleet-shop-pilot { max-height: none; }
.fleet-shop-terminal #fleet-shop-pilot .fleet-portrait-reserve { width: min(100%, 250px); }
  .fleet-shop-system-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   旧嵌入环境移动端收口
   正式移动入口保留 PC 设计网格作为 CSS 排版基准；当前移动 UI 统一由
   文件末尾的动态 Visual Viewport 表面承载，避免按物理窄宽度触发整页重排。
   ================================================================ */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html, body, #app { overflow: hidden; }
  #app > .screen:not(.battle-root) {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    transform: none;
  }

  /* 双浮动摇杆按当前逻辑 surface 定位；最终物理尺寸随统一 surface scale 落地。 */
  .touch-stick {
    width: 128px;
    height: 128px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 167, 255, .12), rgba(6, 14, 28, .08) 66%, transparent 68%);
    box-shadow: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transform-origin: center;
    transition: opacity .1s;
  }
  .touch-stick.on { opacity: 1; }
  .touch-stick::before, .touch-stick::after { content: none; }
  .touch-stick-ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(143, 214, 255, .58); stroke-width: 1.5; }
  .touch-stick-aim .touch-stick-ring { stroke: rgba(179, 136, 255, .72); }
  .touch-stick-knob { width: 50px; height: 50px; margin: -25px 0 0 -25px; display: grid; place-items: center; border: 1px solid rgba(238, 244, 255, .42); background: radial-gradient(circle, rgba(143, 214, 255, .38), rgba(22, 48, 78, .88)); box-shadow: 0 0 18px rgba(76, 167, 255, .42); }
  .touch-stick-aim .touch-stick-knob { background: radial-gradient(circle, rgba(203, 176, 255, .42), rgba(43, 28, 78, .88)); box-shadow: 0 0 18px rgba(179, 136, 255, .46); }
  .touch-stick-knob svg { width: 38px; height: 38px; fill: none; stroke: #dff6ff; stroke-width: 1.6; }
  .touch-stick-knob svg path { fill: rgba(223, 246, 255, .24); }
  .touch-stick-label { position: absolute; left: 0; right: 0; bottom: -12px; color: rgba(223, 246, 255, .72); font-size: 10px; letter-spacing: .24em; text-align: center; }

  /* 通讯页五张档案卡同屏，内容区不再生成第二个纵向滚动页面。 */
  .comms-wrap { position: absolute; inset: 0; grid-template-rows: 36px minmax(0, 1fr) 18px; gap: 4px; padding: max(6px, var(--sa-t)) max(6px, var(--sa-r)) max(6px, var(--sa-b)) max(6px, var(--sa-l)); overflow: hidden; }
  .comms-topbar { grid-template-columns: 58px minmax(0, 1fr); gap: 6px; }
  .comms-back { width: 58px; height: 27px; gap: 2px; font-size: 7px; }
  .comms-back span { font-size: 14px; }
  .comms-title { display: block; min-width: 0; }
  .comms-title span { display: block; overflow: hidden; font-size: 12px; letter-spacing: .1em; text-overflow: ellipsis; }
  .comms-title b { display: block; margin-top: 2px; font-size: 6px; }
  .comms-command { display: none; }
  .comms-grid-shell { grid-template-columns: 26px minmax(0, 1fr) 26px; height: 100%; min-height: 0; align-items: stretch; }
  .comms-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; height: 100%; min-height: 0; margin: 0; }
  .comms-page-nav { width: 23px; min-height: 70px; margin: auto 0; padding: 4px 2px; }
  .comms-page-nav span { font-size: 23px; }
  .comms-page-nav b { display: none; }
  .comms-page-nav i { width: 11px; height: 11px; }
  .comms-card { min-width: 0; min-height: 0; height: 100%; grid-template-rows: minmax(0, 1fr) 106px 52px; }
  .comms-portrait-label { top: 6px; left: 7px; right: 7px; font-size: 5px; }
  .comms-portrait-label b { font-size: 10px; }
  .comms-portrait-panel::before { inset: 17px 7px 7px; }
  .comms-card-info { padding: 6px 5px 5px; overflow: hidden; }
  .comms-card-heading { gap: 4px; }
  .comms-class-glyph { flex-basis: 23px; width: 23px; height: 23px; font-size: 11px; }
  .comms-card-heading small, .comms-card-heading b, .comms-ship-meta, .comms-portrait-label { font-size: 5px; }
  .comms-card-heading h2 { margin: 3px 0 2px; font-size: 10px; }
  .comms-voice-log { margin-top: 5px; padding-top: 4px; }
  .comms-voice-log small { font-size: 5px; }
  .comms-voice-lines { gap: 2px; margin-top: 3px; }
  .comms-voice-line { grid-template-columns: 12px minmax(0, 1fr); gap: 2px; }
  .comms-voice-play { width: 12px; height: 12px; font-size: 5px; }
  .comms-voice-line p { font-size: 6px; line-height: 1.2; }
  .comms-ship-panel { padding: 5px 5px 3px; }
  .comms-ship-canvas { height: calc(100% - 12px); }
  .comms-footer { padding-inline: 2px; gap: 4px; font-size: 5px; }

  /* 指挥页固定三栏，三栏内部各自负责内容裁切/滚动，根节点不滚动。 */
  .command-wrap { position: fixed; inset: 0; overflow: hidden; }
  .command-header { grid-template-columns: minmax(0, 1fr) auto; flex: 0 0 52px; margin: 5px 8px 0; padding: 4px 8px; gap: 6px; }
  /* 恢复遥测行：压缩为小字号单行（PC 同构信息） */
  .command-header-telemetry { display: flex; gap: 6px; font-size: 6px; letter-spacing: .04em; opacity: .75; }
  .command-header-telemetry i { width: 3px; height: 3px; }
  .command-header-status span:first-child, .command-header-status strong { display: none; }
  .command-header-status { gap: 5px; }
  .command-header-status > b { font-size: 15px; }
  .command-brand { gap: 5px; min-width: 0; }
  .command-brand-mark svg { width: 26px; height: 26px; }
  .command-brand small { overflow: hidden; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
  .command-brand h1 { overflow: hidden; font-size: clamp(13px, 2.5vw, 20px); text-overflow: ellipsis; }
  .command-content { grid-template-columns: minmax(0, .92fr) minmax(0, 1.1fr) minmax(0, .92fr); gap: 5px; flex: 1 1 auto; min-height: 0; margin: 6px 8px 5px; padding-right: 0; }
  .command-panel { min-height: 0; overflow: hidden; }
  .command-profile-panel { overflow: hidden auto; }
  .command-tree-panel { overflow: hidden auto; }
  .command-panel-title { min-height: 31px; padding: 8px 7px 6px; font-size: 9px; letter-spacing: .06em; }
  .command-panel-title span small, .command-panel-title > b { display: none; }
  .command-level-row { gap: 5px; padding: 8px 9px 1px; }
  .command-level-row span { font-size: 15px; }
  .command-level { font-size: 42px; }
  .command-exp-line { gap: 4px; padding: 3px 9px 4px; font-size: 8px; }
  .command-exp-line span small { display: none; }
  .command-exp-line b { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .command-exp-track { height: 5px; margin: 0 9px 7px; }
  .command-points-readout { margin: 0 6px 7px; padding: 5px 6px; }
  .command-points-readout span { gap: 3px; font-size: 8px; }
  .command-points-readout span small { display: none; }
  .command-points-readout svg { width: 13px; height: 13px; }
  .command-points-readout b { font-size: 14px; }
  .command-section-title { padding: 5px 7px; font-size: 10px; }
  .command-section-title span small { display: none; }
  .command-section-title b { font-size: 7px; }
  .command-attribute-row { grid-template-columns: 27px minmax(0, 1fr) auto 42px 31px; gap: 3px; margin: 4px 5px; padding: 5px 4px; }
  .command-attribute-icon { width: 24px; height: 24px; }
  .command-attribute-icon svg { width: 16px; height: 16px; }
  .command-attribute-copy strong { font-size: 10px; }
  .command-attribute-copy small { margin-top: 2px; font-size: 7px; line-height: 1.15; }
  .command-attribute-values { gap: 2px; }
  .command-attribute-values b, .command-attribute-values span, .command-attribute-values em { font-size: 10px; }
  .command-attribute-meter { gap: 2px; }
  .command-attribute-meter i { width: 4px; height: 8px; }
  .command-plus { min-height: 29px; }
  .command-plus span { font-size: 18px; }
  .command-plus small { font-size: 6px; }
  .command-tree-field { flex: 0 0 156px; min-height: 156px; margin: 5px 6px 0; }
  .command-tree-field::before { left: 7px; bottom: 6px; font-size: 8px; }
  .command-node { width: 32px; height: 32px; }
  .command-node svg { width: 17px; height: 17px; }
  .command-node-info { min-height: 90px; margin: 5px 6px 8px; padding: 7px; }
  .command-info-kicker { font-size: 7px; }
  .command-node-info h3 { margin: 4px 0 3px; font-size: 12px; }
  .command-node-info p { margin-bottom: 5px; font-size: 8px; line-height: 1.25; }
  .command-info-stats { font-size: 7px; }
  .command-node-buy { margin-top: 5px; padding: 4px; font-size: 8px; }
  /* 恢复驾驶员立绘：与 768 断点同构的右下背景层（低透明度不抢信息区） */
  .command-operator { right: -4%; bottom: -2%; width: 44%; height: 42%; opacity: .34; pointer-events: none; }
  .command-operator figcaption { font-size: 6px; }
  .command-growth-note { padding: 5px 7px 6px; font-size: 7px; line-height: 1.25; }
  .command-skill-scroll-shell { grid-template-columns: minmax(0, 1fr) 13px; gap: 4px; padding: 0 5px 6px 6px; }
  .command-class-skill-list { gap: 3px; padding-top: 4px; }
  .command-class-skill-card { min-height: 0; padding: 5px; }
  .command-class-skill-head { padding-bottom: 4px; }
  .command-class-skill-head span { font-size: 7px; }
  .command-class-skill-head strong { margin-top: 2px; font-size: 10px; }
  .command-class-skill-head small { margin-top: 2px; font-size: 7px; }
  .command-class-skill-row { grid-template-columns: 20px minmax(0, 1fr); gap: 2px 4px; padding: 4px; }
  .command-class-skill-icon { width: 19px; height: 19px; }
  .command-class-skill-icon svg { width: 13px; height: 13px; }
  .command-class-skill-copy strong { font-size: 8px; }
  .command-class-skill-copy small { margin-top: 1px; font-size: 7px; }
  .command-class-skill-copy p { margin-top: 2px; font-size: 7px; line-height: 1.2; }
  .command-class-skill-row .command-growth-action { min-height: 18px; font-size: 7px; }
  .command-scroll-arrow { width: 13px; height: 18px; }
  .command-scroll-track { width: 12px; min-height: 38px; }
  .command-scroll-thumb { left: 0; width: 12px; }
  .command-footer { grid-template-columns: minmax(70px, .8fr) minmax(110px, 1.2fr) minmax(70px, .8fr); gap: 4px; flex: 0 0 43px; margin: 0 8px 6px; padding-top: 4px; }
  .command-footer-btn { min-height: 34px; padding: 0 5px; font-size: 8px; letter-spacing: .04em; }
  .command-footer-btn span { margin-right: 3px; font-size: 13px; }
  .command-footer-status { grid-column: 1 / -1; display: none; }

  /* 战斗仍是固定真实视口；只收紧锚点，保持 Canvas/伤害/低血层全屏。 */
  .battle-root > .screenfx, .battle-root .hud > .dmg-layer, .battle-root .hud > .lowhp { position: fixed; inset: 0; width: 100%; height: 100%; transform: none; }
  .battle-root .hud-pcard { left: max(10px, calc(12px + var(--sa-l))); bottom: max(10px, calc(12px + var(--sa-b))); width: min(320px, 36vw); }
  .battle-root .hud-pcard .hpbar, .battle-root .dash-meter, .battle-root .hud-pcard .shieldbar { width: min(248px, calc(36vw - 82px)); }
  .battle-root .hud-mcard { left: max(10px, calc(12px + var(--sa-l))); top: calc(108px + var(--sa-t)); width: min(210px, 28vw); }
  .battle-root .hud-objective { top: calc(8px + var(--sa-t)); left: 50%; width: min(330px, 42vw); transform: translateX(-50%); }
  .battle-root .hud-mmwrap { top: calc(58px + var(--sa-t)); left: max(10px, calc(12px + var(--sa-l))); width: min(250px, 28vw); }
  .battle-root .radar-frame { width: min(220px, 25vw); height: 120px; }
  .battle-root .hud-deck { right: max(10px, calc(12px + var(--sa-r))); bottom: max(10px, calc(12px + var(--sa-b))); width: min(420px, 43vw); }
  .battle-root .bosswrap { top: calc(48px + var(--sa-t)); right: max(10px, calc(12px + var(--sa-r))); width: min(300px, 34vw); }

  /* 防止 fixed 页在切换后继承旧页面的宽度约束，按钮始终留在底部可达。 */
  .settings-shell, .st-shell, .fleet-shell, .ms-wrap, .cs-wrap, .prep-wrap, .cd-wrap, .sh-wrap, .achv-wrap, .hp-wrap { min-width: 0; min-height: 0; }

  /* 主菜单移动构图：与 PC 同一套 HUD 语言——左列终端日志/星辉/音频中继/频谱，
     右列舰队遥测/扇区状态，中央标题 + 两列触控导航，立绘退居右侧作背景层。
     面板全部保留，只按 412px 高度做紧凑重排（重排 > 缩放 > 删除）。 */
  .menu-launcher {
    box-sizing: border-box;
    padding: 0;
    text-align: left;
  }
  .menu-launcher .launcher-crosshair { display: none; }
  /* 信息面板整体浮在立绘之上（PC 同构：面板永远可读，立绘只作背景层） */
  .menu-launcher .launcher-console,
  .menu-launcher .launcher-stardust,
  .menu-launcher .launcher-player,
  .menu-launcher .launcher-signal,
  .menu-launcher .launcher-telemetry,
  .menu-launcher .launcher-sector,
  .menu-launcher .launcher-footer { z-index: 4; }
  .menu-launcher .launcher-console {
    top: 8px;
    left: 8px;
    width: 234px;
    min-height: 0;
    max-height: 126px;
    padding: 8px 10px 7px;
    overflow: hidden;
  }
  .menu-launcher .launcher-console .launcher-console-head { margin-bottom: 5px; font-size: 6px; }
  .menu-launcher .launcher-console .launcher-log { max-height: 88px; gap: 3px; overflow: hidden; }
  .menu-launcher .launcher-console .launcher-log li { font-size: 6px; line-height: 1.5; }
  .menu-launcher .launcher-console .launcher-console-prompt { margin-top: 4px; font-size: 7px; }
  .menu-launcher .launcher-stardust {
    top: 140px;
    left: 8px;
    width: 234px;
    height: 48px;
    padding: 5px 10px 7px;
  }
  .menu-launcher .launcher-stardust .launcher-section-head { font-size: 6px; }
  .menu-launcher .launcher-stardust .launcher-stardust-readout { gap: 6px; }
  .menu-launcher .launcher-stardust .launcher-stardust-icon svg { width: 18px; height: 18px; }
  .menu-launcher .launcher-stardust .launcher-stardust-copy strong { font-size: 12px; }
  .menu-launcher .launcher-stardust .launcher-stardust-copy small { font-size: 5px; letter-spacing: .14em; }
  .menu-launcher .launcher-stardust .launcher-stardust-meta { display: none; }
  .menu-launcher .launcher-player {
    left: 8px;
    bottom: 152px;
    width: 234px;
    height: 64px;
    padding: 6px 9px 5px;
  }
  .menu-launcher .launcher-player .launcher-player-head { margin-bottom: 3px; font-size: 6px; }
  .menu-launcher .launcher-player .launcher-player-main { gap: 6px; }
  .menu-launcher .launcher-player .launcher-player-reactor { width: 22px; height: 22px; }
  .menu-launcher .launcher-player .launcher-player-track strong { font-size: 9px; }
  .menu-launcher .launcher-player .launcher-player-track span { font-size: 5px; }
  .menu-launcher .launcher-player .launcher-player-metrics { display: none; }
  .menu-launcher .launcher-player .launcher-player-progress { margin-top: 3px; }
  .menu-launcher .launcher-player .launcher-player-actions { margin-top: 3px; gap: 4px; }
  .menu-launcher .launcher-player .launcher-player-button { min-width: 40px; height: 18px; padding: 1px 4px; font-size: 6px; }
  .menu-launcher .launcher-player .launcher-player-button span { font-size: 9px; }
  .menu-launcher .launcher-signal {
    left: 8px;
    bottom: 8px;
    width: 234px;
    padding: 7px 10px 7px;
  }
  .menu-launcher .launcher-signal .launcher-section-head { font-size: 6px; }
  .menu-launcher .launcher-signal .launcher-signal-row { margin-top: 3px; font-size: 6px; }
  .menu-launcher .launcher-signal .launcher-signal-line { margin-top: 3px; height: 16px; }
  .menu-launcher .launcher-signal .launcher-volume { margin-top: 5px; gap: 4px; }
  .menu-launcher .launcher-signal .launcher-volume label { font-size: 6px; }
  .menu-launcher .launcher-signal .launcher-volume-control { height: 8px; }
  .menu-launcher .launcher-signal .launcher-volume-value { font-size: 6px; }
  .menu-launcher .launcher-telemetry {
    top: 8px;
    right: 8px;
    width: 218px;
    padding: 8px 10px 7px;
  }
  .menu-launcher .launcher-telemetry .launcher-console-head { margin-bottom: 5px; font-size: 6px; }
  .menu-launcher .launcher-telemetry .launcher-readiness { min-width: 44px; }
  .menu-launcher .launcher-telemetry .launcher-readiness .telemetry-readiness { font-size: 17px; }
  .menu-launcher .launcher-telemetry .launcher-readiness small { font-size: 7px; }
  .menu-launcher .launcher-telemetry .launcher-readiness em { font-size: 5px; }
  .menu-launcher .launcher-telemetry .launcher-data { font-size: 6px; padding: 1px 0; }
  .menu-launcher .launcher-telemetry .launcher-data b { font-size: 6px; }
  .menu-launcher .launcher-sector {
    top: 118px;
    right: 8px;
    width: 218px;
    height: 112px;
    padding: 8px 10px 6px;
  }
  .menu-launcher .launcher-sector .launcher-section-head { font-size: 6px; }
  .menu-launcher .launcher-sector .launcher-sector-map { margin: 4px 0 3px; }
  .menu-launcher .launcher-sector .launcher-sector-foot { font-size: 5px; }
  .menu-launcher .launcher-orbit-labels { display: block; }
  .menu-launcher .launcher-orbit-labels .orbit-label { font-size: 5px; opacity: .5; }
  .menu-launcher .launcher-footer {
    display: flex;
    top: auto;
    right: 10px;
    bottom: 8px;
    z-index: 4;
    font-size: 5px;
    opacity: .55;
  }
  .menu-launcher .launcher-pilot {
    right: 0;
    bottom: 0;
    width: min(330px, 36vw);
    height: 90%;
    opacity: .8;
  }
  .menu-launcher .menu-title {
    top: 3%;
    left: 50%;
    width: min(430px, 46vw);
    margin: 0;
    translate: -50% 0;
  }
  .menu-launcher .menu-title-kicker { margin-bottom: 7px; font-size: 7px; letter-spacing: .16em; }
  .menu-launcher .menu-title-crest { width: 54px; height: 25px; margin-bottom: 7px; }
  .menu-launcher .menu-title-crest::before,
  .menu-launcher .menu-title-crest::after { top: 12px; width: 18px; }
  .menu-launcher .menu-title-crest i { left: 20px; top: 3px; width: 16px; height: 16px; border-width: 3px; }
  .menu-launcher .menu-title-crest b { left: 26px; top: 9px; width: 5px; height: 5px; }
  .menu-launcher .menu-title-logo { font-size: clamp(28px, 4.2vw, 48px); letter-spacing: .12em; }
  .menu-launcher .menu-title-sub { margin-top: 10px; font-size: 7px; letter-spacing: .12em; }
  .menu-launcher .menu-nav {
    left: 254px;
    right: auto;
    bottom: 10px;
    width: 322px;
    max-width: calc(100vw - 262px - var(--sa-l) - var(--sa-r));
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    align-items: stretch;
  }
  .menu-launcher .menu-nav .btn,
  .menu-launcher .menu-nav .btn[data-nav="modeSelect"],
  .menu-launcher .menu-nav .btn[data-nav="shop"] {
    width: auto;
    min-width: 0;
    min-height: 38px;
    padding: 4px 6px;
    border-radius: 0 10px 0 10px;
    grid-template-columns: 24px minmax(0, 1fr) 14px;
    gap: 4px;
  }
  .menu-launcher .menu-nav .btn:nth-child(7) { grid-column: 1 / -1; width: min(150px, 48%); justify-self: center; }
  .menu-launcher .menu-nav-ico { width: 22px; height: 22px; }
  .menu-launcher .menu-nav-ico svg { width: 14px; height: 14px; }
  .menu-launcher .menu-nav-label { font-size: 10px; letter-spacing: .04em; }
  .menu-launcher .menu-nav-copy { gap: 1px; }
  .menu-launcher .menu-nav-copy small { font-size: 6px; letter-spacing: .02em; }
  .menu-launcher .menu-nav-index { font-size: 7px; letter-spacing: .04em; }

  /* 作战简报：标题栏、卡片区和确认栏共享一个真实视口；卡片内容取摘要，
     目标详情不抢占底部操作区，三张卡始终完整可选择。 */
  .ms-wrap {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 46px minmax(0, 1fr) 43px;
    gap: 6px;
    padding: max(6px, var(--sa-t)) max(8px, var(--sa-r)) max(6px, var(--sa-b)) max(8px, var(--sa-l));
    min-height: 0;
    overflow: hidden;
  }
  .ms-header { grid-template-columns: 60px minmax(0, 1fr); gap: 7px; min-height: 0; height: auto; align-items: center; }
  .ms-back { width: 58px; height: 31px; margin-top: 0; gap: 4px; font-size: 9px; letter-spacing: .1em; }
  .ms-back-arrow { font-size: 10px; }
  .ms-heading { gap: 2px; min-width: 0; }
  .ms-kicker, .ms-instruction { overflow: hidden; font-size: 6px; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
  .ms-heading h2 { overflow: hidden; font-size: clamp(17px, 3.3vw, 28px); letter-spacing: .12em; text-overflow: ellipsis; white-space: nowrap; }
  .ms-command-meta { display: none; }
  .ms-main { min-height: 0; overflow: hidden; }
  .ms-cards { width: 100%; height: 100%; min-height: 0; gap: 6px; }
  .ms-card { height: 100%; min-height: 0; padding: 6px 7px 44px; overflow: hidden; }
  .ms-card-corner--tl { left: 6px; top: 6px; }
  .ms-card-corner--br { right: 6px; bottom: 6px; }
  .ms-card-topline { min-height: 12px; font-size: 6px; letter-spacing: .08em; }
  .ms-card-marker { margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-card-signal { width: 2px; height: 2px; margin-right: 4px; box-shadow: 6px 0 var(--ms-accent), 12px 0 var(--ms-accent); }
  .ms-orbit-icon { height: 30px; }
  .ms-orbit-icon::before { width: 26px; height: 26px; }
  .ms-orbit-icon::after { width: 44px; height: 14px; }
  .ms-orbit-icon svg { width: 21px; height: 21px; }
  .ms-sector-row { min-height: 14px; gap: 4px; font-size: 7px; letter-spacing: .04em; }
  .ms-sector-row em { padding: 1px 4px; font-size: 6px; letter-spacing: .04em; }
  .ms-diamonds { font-size: 8px; }
  .ms-name { margin-top: 1px; font-size: clamp(11px, 1.5vw, 15px); letter-spacing: .05em; }
  .ms-subname { margin-top: 2px; font-size: 9px; letter-spacing: .08em; }
  /* 恢复卡内摘要信息：一句话简介 + 目标列表 + 进度行；字号压缩但全部可见
     （PC 卡片同构，重排 > 删除）。region 分隔线合并进 desc 行省高度。 */
  .ms-desc { display: -webkit-box; overflow: hidden; margin-top: 3px; font-size: 8px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ms-region { display: none; }
  .ms-objectives-head { display: flex; margin-top: 3px; font-size: 6px; letter-spacing: .08em; }
  .ms-objectives { display: block; overflow: hidden; margin-top: 1px; max-height: 28px; }
  .ms-objectives ul { margin: 0; padding: 0 0 0 8px; }
  .ms-objectives li { overflow: hidden; font-size: 7px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .ms-progress { display: block; margin-top: 2px; font-size: 15px; letter-spacing: .04em; }
  .ms-threat-head { margin-top: 3px; font-size: 7px; letter-spacing: .02em; }
  .ms-threat-bar { height: 4px; margin: 3px 0 4px; }
  .ms-data-grid { gap: 2px; padding: 3px 0 0; }
  .ms-data-grid > span { grid-template-columns: 8px minmax(0, 1fr); column-gap: 2px; }
  .ms-data-icon { font-size: 8px; }
  .ms-data-grid small, .ms-data-grid strong { font-size: 5px; letter-spacing: 0; }
  .ms-deploy { left: 7px; right: 7px; bottom: 7px; min-height: 30px; gap: 5px; }
  .ms-deploy b { font-size: 10px; letter-spacing: .06em; }
  .ms-deploy small { font-size: 6px; letter-spacing: .06em; }
  .ms-footer { min-height: 0; height: 43px; padding-top: 0; align-items: stretch; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 6px; }
  /* 恢复左下 FLEET STATUS / TACTICAL SUPPORT 面板：单行水平压缩，标题+关键数值 */
  .ms-footer-left { display: grid; min-width: 0; grid-template-columns: 1fr 1fr; gap: 6px; }
  .ms-status-panel { display: flex; min-width: 0; align-items: center; gap: 6px; padding: 3px 7px; font-size: 6px; }
  .ms-status-panel .ms-panel-title { flex: 0 0 auto; font-size: 6px; letter-spacing: .06em; }
  .ms-status-panel span { overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
  .ms-status-panel .ms-fleet-ship, .ms-status-panel .ms-readiness i { display: none; }
  .ms-status-panel .ms-readiness { display: inline; }
  .ms-status-panel.ms-support { display: flex; }
  .ms-confirm { min-width: 0; width: 100%; min-height: 40px; max-height: 43px; padding: 4px 10px; gap: 7px; align-items: center; }
  .ms-confirm-icon { font-size: 22px; }
  .ms-confirm span:last-child { gap: 2px; min-width: 0; }
  .ms-confirm b { overflow: hidden; font-size: 10px; letter-spacing: .07em; text-overflow: ellipsis; white-space: nowrap; }
  .ms-confirm small { overflow: hidden; font-size: 6px; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }

  /* 舰队终端：顶栏/标签/可滚动正文/固定底栏。正文由已有 Canvas 滚动区统一消费，
     不再让 frame list 自己截断 15 台机体。 */
  .sh-wrap { box-sizing: border-box; padding: max(5px, var(--sa-t)) max(6px, var(--sa-r)) max(5px, var(--sa-b)) max(6px, var(--sa-l)); }
  .sh-wrap .fleet-shell {
    box-sizing: border-box;
    grid-template-rows: 48px 23px 35px minmax(0, 1fr) 39px;
    width: 100%; height: 100%; padding: 6px;
  }
  .sh-wrap .fleet-head { min-height: 0; gap: 6px; padding-bottom: 5px; }
  .sh-wrap .fleet-head-left { gap: 5px; min-width: 0; }
  .sh-wrap .fleet-brand-mark { width: 26px; height: 26px; font-size: 12px; opacity: .8; }
  .sh-wrap .fleet-back { padding: 6px 7px; font-size: 8px; letter-spacing: .08em; }
  .sh-wrap .fleet-heading { gap: 1px; }
  .sh-wrap .fleet-kicker { overflow: hidden; max-width: 42vw; font-size: 6px; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
  .sh-wrap .fleet-heading h1 { font-size: 18px; letter-spacing: .08em; }
  /* 恢复副标题与链路状态：小字号单行；头部指标压缩保留 */
  .sh-wrap .fleet-subtitle { display: block; overflow: hidden; max-width: 44vw; font-size: 6px; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; opacity: .7; }
  .sh-wrap .fleet-link-status { display: inline-flex; gap: 3px; font-size: 6px; letter-spacing: .05em; opacity: .75; }
  .sh-wrap .fleet-head-metrics { display: flex; gap: 5px; font-size: 6px; opacity: .75; }
  .sh-wrap .fleet-head-right { gap: 0; }
  .sh-wrap .fleet-balance { min-width: 76px; padding: 4px 5px; gap: 4px; }
  .sh-wrap .fleet-star, .sh-wrap .fleet-star svg { width: 18px; height: 18px; }
  .sh-wrap .fleet-balance b { font-size: 11px; }
  .sh-wrap .fleet-balance small { font-size: 5px; letter-spacing: .06em; }
  .sh-wrap .fleet-meta { min-height: 0; gap: 7px; overflow: hidden; font-size: 6px; letter-spacing: .03em; white-space: nowrap; }
  .sh-wrap .fleet-meta-spacer, .sh-wrap .fleet-meta > span:first-child { display: none; }
  .sh-wrap .fleet-tabs { min-width: 0; gap: 3px; padding: 4px 0; }
  .sh-wrap .fleet-tab { min-width: 0; min-height: 27px; justify-content: center; padding: 4px 2px; font-size: 6px; letter-spacing: 0; }
  /* 恢复 tab 图标：12px 小尺寸与文字并排（PC 同构识别元素） */
  .sh-wrap .fleet-tab-mark { display: inline-flex; width: 12px; height: 12px; }
  .sh-wrap .fleet-tab-mark svg { width: 12px; height: 12px; }
  .sh-wrap .fleet-body { height: auto; min-height: 0; }
  .sh-wrap .fleet-body { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .sh-wrap .fleet-body-content { min-height: max-content; padding: 6px; }
  .sh-wrap .fleet-frame-layout, .sh-wrap .fleet-wingman-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 6px; }
  .sh-wrap .fleet-frame-list { max-height: none; overflow: visible; }
  .sh-wrap .fleet-frame-list-content { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .sh-wrap .fleet-frame-row { min-height: 32px; grid-template-columns: 20px minmax(0, 1fr) auto; padding: 4px; }
  .sh-wrap .fleet-frame-sigil, .sh-wrap .fleet-frame-sigil svg { width: 15px; height: 15px; }
  .sh-wrap .fleet-frame-row-copy b { font-size: 8px; }
  .sh-wrap .fleet-frame-row-copy small, .sh-wrap .fleet-frame-state { display: none; }
  .sh-wrap .fleet-frame-detail { padding: 7px; }
  .sh-wrap .fleet-detail-title h2 { font-size: 18px; }
  .sh-wrap .fleet-detail-title p, .sh-wrap .fleet-detail-price { font-size: 7px; }
  .sh-wrap .fleet-portrait-panel { padding: 0 7px 7px; }
  .sh-wrap .fleet-portrait-reserve { min-height: 150px; }
  .sh-wrap .fleet-footer { min-height: 0; gap: 4px; padding-top: 4px; }
  .sh-wrap .fleet-footer-note { display: none; }
  .sh-wrap .fleet-footer-actions { width: 100%; gap: 4px; }
  .sh-wrap .fleet-footer .btn { flex: 1; min-height: 32px; padding: 5px 3px; font-size: 7px; letter-spacing: 0; }

  /* 战斗：驾驶员立绘保留为左下小尺寸背景层（PC 同构），STATUS 卡仍是前景；
     Canvas、伤害数字、低血层仍保持真实视口坐标，不参与这组 DOM HUD 收口。 */
  .battle-root .hud-pilot-portrait {
    left: calc(4px + var(--sa-l));
    bottom: calc(64px + var(--sa-b));
    width: 118px;
    height: 150px;
    opacity: .8;
  }
  .battle-root .hud-pcard {
    left: max(10px, calc(12px + var(--sa-l)));
    right: auto;
    bottom: max(10px, calc(12px + var(--sa-b)));
    width: min(245px, 34vw);
    max-width: none;
  }
  .battle-root .hud-pcard .hpbar,
  .battle-root .hud-pcard .shieldbar,
  .battle-root .dash-meter { width: min(166px, calc(34vw - 72px)); }
  .battle-root .hud-pcard .hud-section-heading { padding-bottom: 5px; font-size: 9px; }
  .battle-root .hud-pcard .hud-section-heading span { font-size: 8px; }
  .battle-root .hud-pcard .hud-stat-line { gap: 5px; margin-top: 5px; }
  .battle-root .hud-pcard .hud-stat-label { width: 42px; flex-basis: 42px; font-size: 8px; }
  .battle-root .hud-pcard .hptext { font-size: 9px; }
  .battle-root .hud-pcard .shieldbar { margin-top: 2px; }
  .battle-root .hud-pcard .binary-state { gap: 3px; margin: 1px 0 3px; }
  .battle-root .hud-pcard .binary-form-badge,
  .battle-root .hud-pcard .binary-crystal-count { min-height: 15px; padding: 1px 4px; font-size: 7px; }
  .battle-root .hud-pcard .binary-array-shield { height: 10px; }
  .battle-root .hud-pcard .binary-array-shield span { font-size: 7px; line-height: 9px; }
  .battle-root .hud-mcard {
    left: max(10px, calc(12px + var(--sa-l)));
    right: auto;
    top: auto;
    bottom: max(128px, calc(132px + var(--sa-b)));
    width: min(230px, 32vw);
    padding: 6px 8px;
    gap: 3px;
  }
  .battle-root .hud-mcard > .hud-section-heading { padding-bottom: 3px; font-size: 8px; }
  .battle-root .hud-mcard > .hud-section-heading span { font-size: 7px; }
  .battle-root .hud-mcard .mcard-head { gap: 5px; }
  .battle-root .hud-mcard .mcard-name, .battle-root .hud-mcard .mcard-status { font-size: 8px; }
  .battle-root .hud-mcard .mate-stat-line { gap: 4px; margin-top: 2px; }
  .battle-root .hud-mcard .mate-stat-label { width: 34px; flex-basis: 34px; font-size: 7px; }
  .battle-root .hud-mcard .hpbar { width: 132px; height: 8px; }
  .battle-root .hud-mcard .shieldbar.mate { width: 132px; height: 4px; }
  .battle-root .hud-mcard .mate-hptext, .battle-root .hud-mcard .mate-shieldtext { font-size: 7px; }
  .battle-root .hud-mmwrap { top: calc(54px + var(--sa-t)); left: max(10px, calc(12px + var(--sa-l))); right: auto; width: min(190px, 25vw); padding: 5px; }
  .battle-root .hud-mmwrap .hud-section-heading { font-size: 8px; }
  .battle-root .hud-mmwrap .hud-section-heading span { font-size: 7px; }
  .battle-root .radar-frame { width: 150px; height: 92px; }
  .battle-root #hud-minimap { width: 150px; height: 92px; }
  .battle-root .tactical-meta { font-size: 7px; }
  .battle-root .hud-objective { top: calc(7px + var(--sa-t)); left: 50%; width: min(300px, 38vw); padding: 4px 8px; }
  .battle-root .hud-objective .hud-section-heading { font-size: 8px; }
  .battle-root .hud-objective .hud-section-heading span { font-size: 7px; }
  .battle-root .hud-objective-text { font-size: 10px; }
  .battle-root .hud-deck { right: max(10px, calc(12px + var(--sa-r))); left: auto; bottom: max(10px, calc(12px + var(--sa-b))); width: min(360px, 41vw); gap: 4px; }
  .battle-root .weapon-system-title { font-size: 8px; }
  .battle-root .weapon-system-title span { font-size: 7px; }
  .battle-root .weapon-system-body { gap: 4px; }
  .battle-root .weapon-card { min-width: 0; }
  .battle-root .weapon-name { font-size: 9px; }
  .battle-root .hud-deck .q-ability,
  .battle-root .hud-deck .e-ability { width: 45px; flex-basis: 45px; }
  .battle-root .hud-deck .q-ability > .skill-slot,
  .battle-root .hud-deck .e-ability > .skill-slot { width: 42px; height: 42px; }
  .battle-root .bosswrap { top: calc(38px + var(--sa-t)); right: max(10px, calc(12px + var(--sa-r))); width: min(260px, 30vw); }
}


/* ================================================================
   Responsive design surface for mobile
   移动端继续使用 PC 的设计单位，但设计表面宽度按真实 Visual Viewport
   的横屏比例扩展。等比映射只负责把设计单位落到设备像素，不再把 16:9
   表面扩展到真实 viewport，并由 uniform scale 保持几何比例。
   ================================================================ */
:root { --mobile-ui-scale: 1; }

html.mobile-ui-reference,
html.mobile-ui-reference body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.mobile-ui-reference body {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  translate: none !important;
  scale: none !important;
  transform: none !important;
  transform-origin: initial !important;
}

/* Android WebView 102 understands the legacy transform shorthand but not CSS
   individual transform properties. The body stays an untransformed real
   viewport host; only the game layers receive the design-surface transform,
   so the expanded logical width cannot become document scroll overflow. */
html.mobile-ui-reference.mobile-ui-legacy-transform body {
  transform: none !important;
}

/* The same WebView limitation applies to the older translate/scale/rotate
   declarations used by screen-level controls and transition effects. Mirror
   each transform with the legacy shorthand only on that engine. */
html.mobile-ui-reference.mobile-ui-legacy-transform .loading-terminal,
html.mobile-ui-reference.mobile-ui-legacy-transform .loading-core-label,
html.mobile-ui-reference.mobile-ui-legacy-transform .sf-loading .loading-terminal,
html.mobile-ui-reference.mobile-ui-legacy-transform .sf-loading .loading-core-label,
html.mobile-ui-reference.mobile-ui-legacy-transform .boot-logo,
html.mobile-ui-reference.mobile-ui-legacy-transform .boot-link-state,
html.mobile-ui-reference.mobile-ui-legacy-transform .boot-access,
html.mobile-ui-reference.mobile-ui-legacy-transform .loading-progress-dock,
html.mobile-ui-reference.mobile-ui-legacy-transform .archive-extraction-center,
html.mobile-ui-reference.mobile-ui-legacy-transform .archive-progress-dock,
html.mobile-ui-reference.mobile-ui-legacy-transform .menu-launcher .menu-title {
  translate: none !important;
  transform: translate(-50%, 0) !important;
}

html.mobile-ui-reference.mobile-ui-legacy-transform .cd-transition-core i,
html.mobile-ui-reference.mobile-ui-legacy-transform .cd-transition-core b,
html.mobile-ui-reference.mobile-ui-legacy-transform .cd-transition-core em {
  translate: none !important;
  transform: translate(-50%, -50%) !important;
}

html.mobile-ui-reference.mobile-ui-legacy-transform .cd-transition-core em {
  rotate: none !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

html.mobile-ui-reference.mobile-ui-legacy-transform .launcher-player-progress-head {
  translate: none !important;
  transform: translate(-4px, 0) !important;
}

html.mobile-ui-reference.mobile-ui-legacy-transform .launcher-player-button:active {
  translate: none !important;
  transform: translateY(1px) !important;
}

html.mobile-ui-reference.mobile-ui-legacy-transform .launcher-player-reactor::before,
html.mobile-ui-reference.mobile-ui-legacy-transform .launcher-player-reactor::after {
  animation-name: mobileLauncherPlayerOrbit;
}

html.mobile-ui-reference.mobile-ui-legacy-transform .launcher-player-reactor i {
  animation-name: mobileLauncherPlayerCore;
}

html.mobile-ui-reference.mobile-ui-legacy-transform .cd-transition-core {
  animation-name: mobileCodexCoreSpin;
}

html.mobile-ui-reference.mobile-ui-legacy-transform .comms-pilot-scan {
  animation-name: mobileFleetPortraitScan;
}

@keyframes mobileLauncherPlayerOrbit { to { transform: rotate(360deg); } }
@keyframes mobileLauncherPlayerCore {
  0%, 100% { opacity: .54; transform: scale(.72); }
  50% { opacity: 1; transform: scale(1.22); }
}
@keyframes mobileCodexCoreSpin { to { transform: rotate(360deg); } }
@keyframes mobileFleetPortraitScan {
  from { transform: translateY(-12px); opacity: .08; }
  48% { opacity: .62; }
  to { transform: translateY(270px); opacity: .08; }
}

html.mobile-ui-reference #stage,
html.mobile-ui-reference #app {
  position: fixed !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--mobile-layout-width, 1920px) !important;
  height: var(--mobile-layout-height, 1080px) !important;
  translate: -50% -50% !important;
  scale: var(--mobile-ui-scale) !important;
  transform-origin: center !important;
}

/* 浏览器启动提示也必须以真实 Visual Viewport 为包含范围。固定的
   width=1920 meta viewport 会让旧的 100vw 在浏览器与 Android WebView
   得到不同结果；这些规则只在移动 surface 生效，PC 提示保持原样。 */
html.mobile-ui-reference > .sf-fullscreen-prompt {
  width: 100%;
  height: 100%;
  padding: 12px;
  place-items: end center;
}
html.mobile-ui-reference > .sf-fullscreen-prompt .sf-fullscreen-prompt-card {
  width: min(590px, calc(100% - 24px));
  padding: 18px 18px 16px;
}
html.mobile-ui-reference > .sf-fullscreen-prompt .sf-fullscreen-prompt-card h2 {
  margin-top: 17px;
  font-size: 23px;
}
html.mobile-ui-reference > .sf-fullscreen-prompt .sf-fullscreen-prompt-card p {
  font-size: 12px;
  line-height: 1.55;
}
html.mobile-ui-reference > .sf-fullscreen-prompt .sf-fullscreen-prompt-status { margin-top: 12px; font-size: 9px; }
html.mobile-ui-reference > .sf-fullscreen-prompt .sf-fullscreen-prompt-actions { margin-top: 12px; }
html.mobile-ui-reference > .sf-fullscreen-prompt .sf-fullscreen-prompt-actions button { min-height: 52px; font-size: 13px; }
html.mobile-ui-reference > .sf-fullscreen-prompt .sf-fullscreen-prompt-hint { margin-top: 9px; font-size: 8px; }

html.mobile-ui-reference.mobile-ui-legacy-transform #stage,
html.mobile-ui-reference.mobile-ui-legacy-transform #app {
  translate: none !important;
  scale: none !important;
  transform: translate(-50%, -50%) scale(var(--mobile-ui-scale)) !important;
}

/* 独立 overlay 继续使用 PC 设计单位；真实 viewport 宿主不参与第二次缩放。 */
html.mobile-ui-reference body > .modal-backdrop,
html.mobile-ui-reference body > #dev-console,
html.mobile-ui-reference body > .denial-build,
html.mobile-ui-reference body > .scroll-canvas {
  box-sizing: border-box;
}

/* 建造终端原先直接挂在 body。正式移动入口把它挂进 #app，使 position:fixed
   以动态 surface 为包含块；这里显式锁回战斗终端的 PC 设计坐标，避免旧的
   物理 viewport media query 把面板放到 800×360 WebView 的屏幕外。 */
html.mobile-ui-reference #app > .denial-build {
  position: fixed !important;
  inset: auto !important;
  top: calc(142px + var(--sa-t)) !important;
  right: calc(18px + var(--sa-r)) !important;
  bottom: auto !important;
  left: auto !important;
  width: min(780px, calc(var(--mobile-layout-width, 1920px) - 390px)) !important;
  height: 460px !important;
  max-height: none !important;
  touch-action: manipulation;
}

/* 三选一同样挂入 #app。移动端保留 PC 的三列选择结构，只让扩展后的
   横向 surface 提供更多留白，不再触发旧的单列窄屏重排。 */
html.mobile-ui-reference #app > .choice-bd {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  touch-action: none !important;
}
html.mobile-ui-reference #app > .choice-bd .choice-panel {
  width: min(1000px, calc(var(--mobile-layout-width, 1920px) - 96px)) !important;
  max-height: calc(var(--mobile-layout-height, 1080px) - 110px) !important;
  padding: 25px 30px 20px !important;
}
html.mobile-ui-reference #app > .choice-bd .choice-title { display: flex !important; }
html.mobile-ui-reference #app > .choice-bd .choice-title strong {
  font-size: clamp(24px, 2vw, 34px) !important;
}
html.mobile-ui-reference #app > .choice-bd .choice-title small {
  margin-top: 0 !important;
  font-size: 13px !important;
}
html.mobile-ui-reference #app > .choice-bd .choice-context em { display: inline !important; }
html.mobile-ui-reference #app > .choice-bd .choice-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
html.mobile-ui-reference #app > .choice-bd .choice-card {
  min-height: 294px !important;
  padding: 13px 15px 12px !important;
}
html.mobile-ui-reference #app > .choice-bd .choice-icon {
  width: 74px !important;
  height: 74px !important;
}
html.mobile-ui-reference #app > .choice-bd .choice-icon svg {
  width: 46px !important;
  height: 46px !important;
}
html.mobile-ui-reference #app > .choice-bd .choice-desc { min-height: 39px !important; }
html.mobile-ui-reference #app > .choice-bd .choice-hint {
  display: flex !important;
  line-height: 1 !important;
}
html.mobile-ui-reference #app > .choice-bd .choice-hint b {
  display: inline !important;
  margin-top: 0 !important;
}

/* screen 入场动画不能把 PC 参考表面的缩放覆盖掉。 */
html.mobile-ui-reference .screen-in:not(.battle-root) {
  animation-name: mobileScreenIn;
}
html.mobile-ui-reference .screen-out:not(.battle-root) {
  animation-name: mobileScreenOut;
}
@keyframes mobileScreenIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mobileScreenOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ================================================================
   当前移动端纠偏：原生触摸滚动与移动战斗操作
   所有资料/列表页面只保留一个真实滚动容器；Canvas 仅绘制桌面视觉轨道。
   旧版 coarse 兼容块在上方仍保留给历史嵌入环境，这里用正式入口的最终
   规则覆盖其 overflow/touch-action，避免出现“双滚动系统”或触摸被吞。
   ================================================================ */
/* Canvas 自绘滚动条的唯一原生容器：桌面端同样隐藏浏览器原生滚动条，
   视觉轨道统一由 scroll-canvas 按周围科幻 UI 配色绘制（此前仅 coarse
   断点隐藏，桌面会露出系统原生滚动条）；scrollTop 始终是唯一滚动状态。 */
.native-scroll-viewport { scrollbar-width: none; -ms-overflow-style: none; }
.native-scroll-viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }

@media (pointer: coarse) {
  #app > .screen:not(.battle-root) {
    touch-action: auto !important;
  }

  .native-scroll-viewport,
  .cd-body,
  .st-body,
  .hp-body,
  .sh-body,
  .cs-list {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .native-scroll-viewport::-webkit-scrollbar,
  .cd-body::-webkit-scrollbar,
  .st-body::-webkit-scrollbar,
  .hp-body::-webkit-scrollbar,
  .sh-body::-webkit-scrollbar,
  .cs-list::-webkit-scrollbar { display: none; width: 0; height: 0; }

  /* 旧 coarse 规则还会把滚动 viewport 的内容根设为 touch-action:none；
     它位于手指命中点与真实 scrollTop 容器之间，同样会阻断 UA 的 pan。 */
  .cd-body-content,
  .st-body-content,
  .hp-body-content,
  .sh-body-content,
  .fleet-body-content,
  .cs-list-content {
    overflow: visible !important;
    touch-action: auto !important;
    will-change: auto;
  }

  /* 战前页：prep-viewport 是唯一 scrollTop；内部面板不再各自滚动。 */
  #app > .screen > .prep-viewport {
    display: block !important;
    width: 100%;
    height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #prep-wrap.prep-shell {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow: visible !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas: "topbar" "body" "chapters" "levels" "diff" "bottom";
  }
  #prep-wrap.prep-shell > .prep-body {
    height: auto;
    overflow: visible !important;
    touch-action: auto !important;
  }
  #prep-wrap.prep-shell > .prep-chapters,
  #prep-wrap.prep-shell > .prep-levels,
  #prep-wrap.prep-shell > .prep-diff {
    max-height: none;
    overflow: visible !important;
  }
  #prep-wrap.prep-shell .prep-chgrid,
  #prep-wrap.prep-shell .prep-lvgrid,
  #prep-wrap.prep-shell .prep-diffgrid {
    height: auto;
    overflow: visible !important;
    touch-action: auto !important;
  }
  #prep-wrap.prep-shell > .prep-bottom {
    position: static;
    height: auto;
    min-height: 47px;
  }

  /* 地图编辑器：每个侧栏各自只有一个原生 viewport，视觉轨道仍可快捷操作。 */
  #app > .screen.me-root .me-scroll-viewport {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #app > .screen.me-root .me-tools,
  #app > .screen.me-root .me-side { touch-action: auto !important; }

  /* 防卫建造横向菜单同样由真实 scrollLeft 驱动。 */
  html.sf-battle-active .denial-build-list-viewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  html.sf-battle-active .denial-build-list-viewport::-webkit-scrollbar {
    display: none; width: 0; height: 0;
  }
  html.sf-battle-active .denial-build-list-content { will-change: auto; }
  html.sf-battle-active .denial-wrap .denial-buildbtn { display: none !important; }

  /* 战斗根层的默认禁手势只留给 Canvas；建造菜单需要让 pan-x 穿透到 UA。 */
  html.sf-battle-active .battle-root { touch-action: auto !important; }
  html.sf-battle-active #battle-canvas,
  html.sf-battle-active .touch-stick { touch-action: none !important; }
}

/* 移动战斗操作：只显示图标，语义保留在 aria-label/data-testid。 */
.hud-mobile-actions {
  position: absolute;
  right: calc(52px + var(--sa-r));
  bottom: calc(250px + var(--sa-b));
  z-index: 8;
  display: none;
  grid-template-columns: repeat(2, 68px);
  grid-auto-rows: 68px;
  align-items: center;
  justify-items: center;
  gap: 8px;
  width: 144px;
  pointer-events: none;
}
.hud-mobile-action {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  padding: 0;
  color: #9ddcff;
  background: linear-gradient(145deg, rgba(16, 36, 68, .9), rgba(7, 12, 28, .86));
  border: 1px solid rgba(98, 177, 255, .68);
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(65, 157, 255, .12), 0 0 15px rgba(42, 120, 255, .18);
  clip-path: polygon(50% 0, 86% 14%, 100% 50%, 86% 86%, 50% 100%, 14% 86%, 0 50%, 14% 14%);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color .12s, border-color .12s, background .12s, box-shadow .12s, transform .12s;
}
.hud-mobile-action[hidden] { display: none; }
.hud-mobile-action svg {
  display: block;
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px currentColor);
}
.hud-mobile-action[data-kind="boost"] { color: #71e0ff; }
.hud-mobile-action[data-kind="brake"] { color: #ffb86b; }
.hud-mobile-action[data-kind="interact"] { color: #a8e7c2; }
.hud-mobile-action[data-kind="reclaim"] { color: #ff9b83; }
.hud-mobile-action[data-kind="build"],
.hud-mobile-action[data-kind="rotate"] { color: #d2a7ff; }
.hud-mobile-action.is-active,
.hud-mobile-action:focus-visible {
  color: #fff;
  border-color: currentColor;
  background: linear-gradient(145deg, rgba(64, 136, 219, .7), rgba(34, 44, 102, .92));
  box-shadow: inset 0 0 20px rgba(132, 215, 255, .28), 0 0 22px currentColor;
  outline: 1px solid currentColor;
  outline-offset: 3px;
}
.hud-mobile-action:active { transform: scale(.93); }

/* 正式移动入口使用 width=1920 的布局视口，不能依赖 max-width 媒体查询；
   由 uiEditorRuntime 挂载的 mobile-ui-reference 才是动作层的移动判定。 */
@media (pointer: coarse) {
  html.mobile-ui-reference .hud-mobile-actions {
    display: grid;
    right: calc(52px + var(--sa-r));
    bottom: calc(250px + var(--sa-b));
    gap: 8px;
  }
  html.mobile-ui-reference .hud-mobile-action { width: 68px; height: 68px; }
  html.mobile-ui-reference .hud-mobile-action svg { width: 38px; height: 38px; }
}

@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .hud-mobile-actions {
    display: grid;
    right: calc(52px + var(--sa-r));
    bottom: calc(250px + var(--sa-b));
    gap: 8px;
  }
  .hud-mobile-action { width: 68px; height: 68px; }
  .hud-mobile-action svg { width: 38px; height: 38px; }
}

/* 宽屏背景层覆盖真实 Visual Viewport；页面内容由 #stage/#app 内的动态设计表面
   绘制，不使用 scaleX 拉伸，也不依赖设备型号断点。 */
html.mobile-ui-reference {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(33, 78, 134, .09), transparent 66%),
    repeating-linear-gradient(90deg, rgba(76, 167, 255, .05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(76, 167, 255, .035) 0 1px, transparent 1px 64px),
    #030812;
}
html.mobile-ui-reference::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 22, 48, .32), transparent 18%, transparent 82%, rgba(5, 22, 48, .32)),
    repeating-linear-gradient(90deg, transparent 0 159px, rgba(118, 194, 255, .09) 160px, transparent 161px),
    repeating-linear-gradient(0deg, transparent 0 89px, rgba(118, 194, 255, .06) 90px, transparent 91px);
}
html.mobile-ui-reference.sf-wide-menu-background {
  background:
    linear-gradient(90deg, rgba(1, 5, 16, .34), rgba(1, 5, 16, .04) 50%, rgba(1, 5, 16, .34)),
    url('../assets/ui/launcher/stardust-command-deck-v2-clean.png') center / cover no-repeat,
    #030812;
}

/* 暂停不是一般的核心内容弹窗：它必须压暗整个真实横屏，包括设计表面
   扩展出的左右区域。pauseMenu 把 backdrop 挂在 html 级全屏层，内部面板
   保留 PC 参考尺寸并只做统一缩放。 */
html.mobile-ui-reference > .pause-bd {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  transform: none !important;
  overflow: hidden;
  touch-action: manipulation;
}
html.mobile-ui-reference > .pause-bd .pause-panel {
  width: 520px;
  height: 760px;
  min-height: 560px;
  padding: 28px 0;
  transform: scale(var(--mobile-ui-scale));
  transform-origin: center;
  animation: mobilePausePanelIn .48s cubic-bezier(.2, .85, .25, 1) both;
}
@keyframes mobilePausePanelIn {
  from { opacity: 0; transform: translateY(12px) scale(var(--mobile-ui-scale)); }
  to { opacity: 1; transform: scale(var(--mobile-ui-scale)); }
}
@media (prefers-reduced-motion: reduce) {
  html.mobile-ui-reference > .pause-bd .pause-panel { animation: none; }
}

/* 真机横屏的人机工学：设计单位仍等比落到设备像素，这里只为 coarse 手机
   增加可点面积和固定拇指区，不改变摇杆的 128px 视觉/命中尺寸。 */
html.mobile-ui-reference .menu-launcher .menu-nav {
  bottom: 6.5%;
  gap: calc(8px * 1.3);
}
html.mobile-ui-reference .menu-launcher .menu-nav .btn {
  grid-template-columns: calc(43px * 1.3) minmax(0, 1fr) calc(25px * 1.3);
  width: calc(238px * 1.3);
  min-height: calc(57px * 1.3);
  padding: calc(7px * 1.3) calc(13px * 1.3) calc(7px * 1.3) calc(11px * 1.3);
  border-radius: 0 calc(17px * 1.3) 0 calc(17px * 1.3);
}
html.mobile-ui-reference .menu-launcher .menu-nav .btn[data-nav="modeSelect"] { width: calc(190px * 1.3); }
html.mobile-ui-reference .menu-launcher .menu-nav .btn[data-nav="shop"] { width: calc(214px * 1.3); }
html.mobile-ui-reference .menu-launcher .menu-nav-ico {
  width: calc(34px * 1.3);
  height: calc(34px * 1.3);
}
html.mobile-ui-reference .menu-launcher .menu-nav-ico svg { width: calc(22px * 1.3); height: calc(22px * 1.3); }
html.mobile-ui-reference .menu-launcher .menu-nav-label { font-size: calc(18px * 1.3); }
html.mobile-ui-reference .menu-launcher .menu-nav-copy small,
html.mobile-ui-reference .menu-launcher .menu-nav-index { font-size: calc(10px * 1.3); }

/* 右拇指区：技能固定在右下、助推/制动/互动/建造上移成 2 列网格；
   暂停则放在惯例的右上角。所有显式战斗按钮按现有移动基准放大 30%。 */
html.mobile-ui-reference .battle-root .hud-mobile-actions {
  right: calc(34px + var(--sa-r));
  bottom: calc(250px + var(--sa-b));
  grid-template-columns: repeat(2, calc(68px * 1.3));
  grid-auto-rows: calc(68px * 1.3);
  gap: calc(8px * 1.3);
  width: calc(68px * 2.6 + 8px * 1.3);
}
html.mobile-ui-reference .battle-root .hud-mobile-action {
  width: calc(68px * 1.3);
  height: calc(68px * 1.3);
}
html.mobile-ui-reference .battle-root .hud-mobile-action svg {
  width: calc(38px * 1.3);
  height: calc(38px * 1.3);
}
html.mobile-ui-reference .battle-root .hud-deck {
  right: max(34px, calc(34px + var(--sa-r)));
  bottom: max(22px, calc(22px + var(--sa-b)));
  width: min(405px, 45vw);
  gap: 6px;
}
html.mobile-ui-reference .battle-root .hud-deck .q-ability,
html.mobile-ui-reference .battle-root .hud-deck .e-ability {
  width: calc(42px * 1.3);
  flex-basis: calc(42px * 1.3);
}
html.mobile-ui-reference .battle-root .hud-deck .q-ability > .skill-slot,
html.mobile-ui-reference .battle-root .hud-deck .e-ability > .skill-slot {
  width: calc(42px * 1.3);
  height: calc(42px * 1.3);
}
html.mobile-ui-reference .battle-root .hud-pausebtn {
  top: calc(44px + var(--sa-t));
  right: calc(46px + var(--sa-r));
  left: auto;
  width: calc(54px * 1.3);
  height: calc(54px * 1.3);
}
html.mobile-ui-reference .battle-root .hud-pausebtn .hud-menubtn-icon {
  width: calc(26px * 1.3);
  height: calc(26px * 1.3);
}
html.mobile-ui-reference.sf-battle-active .denial-build-btn { min-height: calc(72px * 1.3); }
html.mobile-ui-reference.sf-battle-active .denial-build-scroll-step {
  flex-basis: calc(18px * 1.3);
  width: calc(18px * 1.3);
  height: calc(16px * 1.3);
}

/* 暂停面板已挂在真实 html 全屏层内；增高容器后把四枚主操作按钮按 1.3
   放大，避免只放大点击框而挤坏原有文字与图标。 */
html.mobile-ui-reference > .pause-bd .pause-panel {
  height: 900px;
  min-height: 860px;
}
html.mobile-ui-reference > .pause-bd .pause-divider {
  width: calc(244px * 1.3);
  margin: calc(17px * 1.3) 0 calc(18px * 1.3);
}
html.mobile-ui-reference > .pause-bd .pause-actions {
  width: 429px;
  gap: 13px;
}
html.mobile-ui-reference > .pause-bd .pause-btn {
  grid-template-columns: 36px 40px minmax(0, 1fr) 23px;
  height: calc(59px * 1.3);
  padding: 0 22px;
}
html.mobile-ui-reference > .pause-bd .pause-btn-index { font-size: 13px; }
html.mobile-ui-reference > .pause-bd .pause-btn-icon { width: 33px; height: 33px; }
html.mobile-ui-reference > .pause-bd .pause-btn-icon svg { width: 31px; height: 31px; }
html.mobile-ui-reference > .pause-bd .pause-btn-label { font-size: 26px; }
html.mobile-ui-reference > .pause-bd .pause-btn-arrow { font-size: 35px; }
html.mobile-ui-reference > .pause-bd .pause-footer {
  width: 429px;
  margin-top: 23px;
  font-size: 12px;
}

/* 重绘后的摇杆只改变线条层次；.touch-stick 与 .touch-stick-knob 的尺寸
   仍沿用现有 128px / 50px，确保本轮没有放大摇杆。 */
.touch-stick-ring-outer { stroke-linejoin: round; }
.touch-stick-ring-segments { stroke-width: 2.2; stroke-linecap: square; }
.touch-stick-ring-guide { stroke-dasharray: 3 6; opacity: .72; }
.touch-stick-ring-axis { stroke-width: 1.1; opacity: .7; }
.touch-stick-ring-core { fill: currentColor; stroke: none; }
.touch-stick-move .touch-stick-ring-outer { filter: drop-shadow(0 0 4px rgba(109, 223, 255, .5)); }
.touch-stick-aim .touch-stick-ring-outer { filter: drop-shadow(0 0 4px rgba(205, 159, 255, .58)); }

/* ================================================================
   移动横屏：PC 相对横向锚点 + 战前底栏 / 战斗拇指区
   设计基准为 1920×1080；这些百分比全部由 PC 1080p 的横向像素换算，
   不把移动端横向位置写成设备绝对 px。左侧元素从动态表面左边界取值，右侧
   元素从动态表面右边界取值，中央元素统一以 50% 为中心锚点。
   ================================================================ */
html.mobile-ui-reference {
  --mobile-x-left-edge: 3.020833%;   /* 58 / 1920 */
  --mobile-x-right-edge: 3.020833%;  /* 58 / 1920 */
  --mobile-x-action-right: 1.770833%; /* 34 / 1920 */
  --mobile-x-center: 50%;
  --mobile-touch-size: calc(68px * 1.5);
  --mobile-touch-icon-size: calc(38px * 1.5);
  --mobile-touch-gap: calc(8px * 1.5);
}

/* 战前准备页必须在一屏内保持完整 PC 六区结构；内容高度按 940 / 1080
   落在设计 surface 内，底栏因此不会被旧的一列滚动稿推到首屏之外。 */
html.mobile-ui-reference #app > .screen > .prep-viewport {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  touch-action: none !important;
}
html.mobile-ui-reference #prep-wrap.prep-shell {
  width: 92.708333% !important; /* 1780 / 1920 */
  height: 87.037037% !important; /* 940 / 1080 */
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 14px 12px !important;
  overflow: hidden !important;
  grid-template-columns: none !important;
  grid-template-rows: 74px minmax(158px, 1.05fr) minmax(155px, 1.25fr) auto auto 48px !important;
  grid-template-areas: none !important;
}
html.mobile-ui-reference #prep-wrap.prep-shell > .prep-topbar,
html.mobile-ui-reference #prep-wrap.prep-shell > .prep-body,
html.mobile-ui-reference #prep-wrap.prep-shell > .prep-chapters,
html.mobile-ui-reference #prep-wrap.prep-shell > .prep-levels,
html.mobile-ui-reference #prep-wrap.prep-shell > .prep-diff,
html.mobile-ui-reference #prep-wrap.prep-shell > .prep-bottom {
  grid-area: auto !important;
}
html.mobile-ui-reference #prep-wrap.prep-shell > .prep-body {
  height: auto !important;
  overflow: hidden !important;
  touch-action: none !important;
}
html.mobile-ui-reference #prep-wrap.prep-shell > .prep-bottom {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 48px !important;
  padding-inline: 1.011236% !important; /* 18 / 1780 */
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 9px !important;
  z-index: 4 !important;
}
html.mobile-ui-reference #prep-wrap.prep-shell .prep-bottom-note {
  display: block !important;
  min-width: 0;
  color: var(--prep-accent) !important;
  opacity: .9;
}
html.mobile-ui-reference #prep-wrap.prep-shell .prep-bottom .btn {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 145px !important;
  min-height: 40px !important;
  visibility: visible !important;
}

/* 统一把正式移动入口的主要横向锚点换成 PC 比例；纵向节奏仍由 PC
   参考面控制，避免只为窄屏另造一套坐标系。 */
html.mobile-ui-reference .ms-wrap { padding-inline: 2.5% !important; }
html.mobile-ui-reference .ms-wrap::after { left: 1.145833% !important; }
/* 模式选择是固定视口 grid（128/1fr/158）：矮触屏的 `.screen` safe center
   会把主区收缩居中（卡片 732→570），目标列表随之溢出压到出击条上。
   这里恢复拉伸填满，标签/列表/出击条的 PC 几何关系才成立。 */
html.mobile-ui-reference .screen.ms-wrap { align-items: stretch; }
/* 真机整体 1/3 缩放，8-10px 设计字号物理上不可读：只上调主阅读文字
   （目标/环境情报/副标题/威胁读数/出击条），装饰性微字（card-marker、
   kicker 等最小层级）保持原样，不与标题趋同。 */
html.mobile-ui-reference .ms-sector-row { font-size: 14px; }
html.mobile-ui-reference .ms-subname { font-size: 16px; }
html.mobile-ui-reference .ms-desc,
html.mobile-ui-reference .ms-region { font-size: 12px; }
html.mobile-ui-reference .ms-threat-head { font-size: 12px; }
html.mobile-ui-reference .ms-objectives { font-size: 13px; }
html.mobile-ui-reference .ms-objectives-head { font-size: 13px; }
html.mobile-ui-reference .ms-data-grid small { font-size: 10px; }
html.mobile-ui-reference .ms-data-grid strong { font-size: 10px; }
html.mobile-ui-reference .ms-deploy b { font-size: 19px; }
html.mobile-ui-reference .battle-root .hud-pcard {
  left: var(--mobile-x-left-edge) !important;
  width: 18.75% !important; /* 360 / 1920 */
}
html.mobile-ui-reference .battle-root .hud-mmwrap {
  left: var(--mobile-x-left-edge) !important;
  width: 14.583333% !important; /* 280 / 1920 */
}
html.mobile-ui-reference .battle-root .hud-objective {
  left: 23.125% !important; /* 444 / 1920 */
  width: 17.708333% !important; /* 340 / 1920 */
}
html.mobile-ui-reference .battle-root .bosswrap {
  right: var(--mobile-x-right-edge) !important;
  width: 18.958333% !important; /* 364 / 1920 */
}
html.mobile-ui-reference .battle-root .hud-pausebtn {
  right: 2.395833% !important; /* 46 / 1920 */
}

/* 移动战斗卡组：左侧是两枚可直接点按的武器切换卡，右侧是拇指
   纵向 Q/E 技能列；所有主要触控目标统一使用 1.5 倍触控规格。 */
html.mobile-ui-reference .battle-root .hud-deck {
  right: var(--mobile-x-right-edge) !important;
  width: 24.479167% !important; /* 470 / 1920 */
}
html.mobile-ui-reference .battle-root .weapon-system-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--mobile-touch-size) !important;
  align-items: end !important;
  gap: calc(12px * 1.5) !important;
}
html.mobile-ui-reference .battle-root .weapon-list {
  display: grid !important;
  min-width: 0;
  gap: calc(8px * 1.5) !important;
}
html.mobile-ui-reference .battle-root .weapon-row { gap: calc(8px * 1.5) !important; }
html.mobile-ui-reference .battle-root .weapon-index {
  flex: 0 0 calc(34px * 1.5);
  width: calc(34px * 1.5) !important;
  height: calc(34px * 1.5) !important;
  font-size: calc(14px * 1.5) !important;
}
html.mobile-ui-reference .battle-root .weapon-card {
  min-width: 0;
  height: calc(60px * 1.5) !important;
  min-height: calc(60px * 1.5) !important;
  padding-inline: calc(10px * 1.5) !important;
  cursor: pointer;
  touch-action: manipulation;
}
html.mobile-ui-reference .battle-root .weapon-card .weapon-name { font-size: calc(10px * 1.3) !important; }
html.mobile-ui-reference .battle-root .weapon-card .weapon-icon { font-size: calc(24px * 1.3) !important; }
html.mobile-ui-reference .battle-root .weapon-card:focus-visible {
  outline: 1px solid #f0ddff;
  outline-offset: 3px;
}
html.mobile-ui-reference .battle-root .ability-pair {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}
html.mobile-ui-reference .battle-root .q-ability,
html.mobile-ui-reference .battle-root .e-ability {
  position: relative !important;
  width: var(--mobile-touch-size) !important;
  flex: 0 0 var(--mobile-touch-size) !important;
  gap: 0 !important;
}
html.mobile-ui-reference .battle-root .q-ability > .skill-slot,
html.mobile-ui-reference .battle-root .e-ability > .skill-slot {
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  width: var(--mobile-touch-size) !important;
  height: var(--mobile-touch-size) !important;
  padding: 0 !important;
  color: #71e0ff !important;
  border: 1px solid rgba(98, 177, 255, .68) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, rgba(16, 36, 68, .9), rgba(7, 12, 28, .86)) !important;
  box-shadow: inset 0 0 18px rgba(65, 157, 255, .12), 0 0 15px rgba(42, 120, 255, .18) !important;
  clip-path: polygon(50% 0, 86% 14%, 100% 50%, 86% 86%, 50% 100%, 14% 86%, 0 50%, 14% 14%) !important;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
html.mobile-ui-reference .battle-root .q-ability > .skill-slot::before,
html.mobile-ui-reference .battle-root .e-ability > .skill-slot::before { display: none !important; }
html.mobile-ui-reference .battle-root .e-ability > .skill-slot { color: #d2a7ff !important; }
html.mobile-ui-reference .battle-root .e-ability > .skill-slot.locked {
  color: #ff9aaa !important;
  border-color: rgba(255, 118, 145, .72) !important;
  background: linear-gradient(145deg, rgba(82, 27, 67, .82), rgba(28, 10, 35, .92)) !important;
}
html.mobile-ui-reference .battle-root .q-ability > .skill-slot.is-active,
html.mobile-ui-reference .battle-root .e-ability > .skill-slot.is-active,
html.mobile-ui-reference .battle-root .q-ability > .skill-slot:focus-visible,
html.mobile-ui-reference .battle-root .e-ability > .skill-slot:focus-visible {
  color: #fff !important;
  border-color: currentColor !important;
  background: linear-gradient(145deg, rgba(64, 136, 219, .7), rgba(34, 44, 102, .92)) !important;
  box-shadow: inset 0 0 20px rgba(132, 215, 255, .28), 0 0 22px currentColor !important;
  outline: 1px solid currentColor;
  outline-offset: 3px;
}
html.mobile-ui-reference .battle-root .q-ability > .skill-slot .skill-icon,
html.mobile-ui-reference .battle-root .e-ability > .skill-slot .skill-icon { transform: none !important; }
html.mobile-ui-reference .battle-root .q-ability > .skill-slot .skill-icon svg,
html.mobile-ui-reference .battle-root .e-ability > .skill-slot .skill-icon svg {
  width: var(--mobile-touch-icon-size) !important;
  height: var(--mobile-touch-icon-size) !important;
  filter: drop-shadow(0 0 5px currentColor);
}
html.mobile-ui-reference .battle-root .q-ability-key,
html.mobile-ui-reference .battle-root .e-ability-key {
  position: absolute !important;
  right: calc(10px * 1.5) !important;
  bottom: calc(8px * 1.5) !important;
  z-index: 3;
  margin: 0 !important;
  color: currentColor !important;
  font-size: calc(12px * 1.5) !important;
  font-weight: 700;
  line-height: 1 !important;
  text-shadow: 0 0 7px currentColor;
  pointer-events: none;
}

html.mobile-ui-reference .battle-root .hud-mobile-actions {
  right: var(--mobile-x-action-right) !important;
  grid-template-columns: repeat(2, var(--mobile-touch-size)) !important;
  grid-auto-rows: var(--mobile-touch-size) !important;
  gap: var(--mobile-touch-gap) !important;
  width: 11.25% !important; /* (68×2 + 8)×1.5 / 1920 */
}
html.mobile-ui-reference .battle-root .hud-mobile-action {
  width: var(--mobile-touch-size) !important;
  height: var(--mobile-touch-size) !important;
}
html.mobile-ui-reference .battle-root .hud-mobile-action svg {
  width: var(--mobile-touch-icon-size) !important;
  height: var(--mobile-touch-icon-size) !important;
}

/* 浮动摇杆：动态原点也写入 surface 百分比；切角、分段、扫描弧和方向簇
   与 HUD 的透明线框语言一致，仍保持 128px 底座 / 50px 摇杆帽。 */
html.mobile-ui-reference .battle-root > .touch-stick {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 128px !important;
  height: 128px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: radial-gradient(circle, rgba(76, 167, 255, .12), rgba(6, 14, 28, .08) 66%, transparent 68%) !important;
  box-shadow: none !important;
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
html.mobile-ui-reference .battle-root > .touch-stick.on { opacity: 1; }
html.mobile-ui-reference .battle-root > .touch-stick-move { color: #57e5ff; }
html.mobile-ui-reference .battle-root > .touch-stick-aim { color: #c092ff; }
html.mobile-ui-reference .battle-root > .touch-stick .touch-stick-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: square;
  stroke-linejoin: miter;
  filter: drop-shadow(0 0 5px currentColor);
}
html.mobile-ui-reference .touch-stick-ring-outer { opacity: .9; }
html.mobile-ui-reference .touch-stick-ring-inner { opacity: .42; stroke-dasharray: 2 5; }
html.mobile-ui-reference .touch-stick-ring-segments { stroke-width: 2; opacity: .9; }
html.mobile-ui-reference .touch-stick-ring-sweep { stroke-width: 2.4; stroke-linecap: round; opacity: .78; stroke-dasharray: 24 70; animation: mobileStickSweep 2.8s linear infinite; }
html.mobile-ui-reference .touch-stick-ring-guide { stroke-dasharray: 2 6; opacity: .46; }
html.mobile-ui-reference .touch-stick-ring-axis { stroke-width: 1; opacity: .72; }
html.mobile-ui-reference .touch-stick-ring-bracket { stroke-width: 1.5; opacity: .82; }
html.mobile-ui-reference .touch-stick-ring-core { fill: currentColor; stroke: none; filter: drop-shadow(0 0 5px currentColor); }
html.mobile-ui-reference .touch-stick-knob {
  width: 50px !important;
  height: 50px !important;
  margin: -25px 0 0 -25px !important;
  border: 1px solid rgba(228, 249, 255, .62) !important;
  border-radius: 14% !important;
  clip-path: polygon(50% 0, 88% 12%, 100% 50%, 88% 88%, 50% 100%, 12% 88%, 0 50%, 12% 12%) !important;
  background: radial-gradient(circle at 35% 30%, rgba(238, 252, 255, .72), rgba(87, 180, 255, .38) 46%, rgba(8, 31, 60, .94)) !important;
  box-shadow: inset 0 0 12px rgba(174, 235, 255, .18), 0 0 18px currentColor !important;
}
html.mobile-ui-reference .touch-stick-aim .touch-stick-knob {
  background: radial-gradient(circle at 35% 30%, rgba(250, 238, 255, .72), rgba(177, 120, 255, .4) 46%, rgba(35, 20, 67, .94)) !important;
}
html.mobile-ui-reference .touch-stick-knob svg { width: 38px; height: 38px; stroke: #ecfbff; filter: drop-shadow(0 0 4px currentColor); }
html.mobile-ui-reference .touch-stick-label {
  bottom: -18px;
  color: currentColor;
  font-size: 10px;
  letter-spacing: .24em;
  text-shadow: 0 0 8px currentColor;
}
@keyframes mobileStickSweep { to { stroke-dashoffset: -94; } }

/* ================================================================
   Mobile HUD layout editor / 独立控件布局
   保存的是动态 surface 的归一化中心点；按钮和命中区域始终是同一个 DOM 盒子。
   只有移动参考面启用，PC 既有 HUD 与键位设置不受影响。
   ================================================================ */
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .hud-mobile-actions,
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .hud-deck,
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .hud-deck > .weapon-system-body,
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .hud-deck .weapon-list,
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .hud-deck .weapon-row,
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .hud-deck .ability-pair,
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .hud-deck .q-ability,
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .hud-deck .e-ability {
  position: static !important;
  display: contents !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
}
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .hud-deck .weapon-system-title,
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .hud-deck .weapon-index,
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .hud-deck .q-ability-key,
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .hud-deck .e-ability-key {
  display: none !important;
}
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active [data-mobile-hud-control] {
  position: absolute !important;
  left: var(--mobile-hud-x) !important;
  top: var(--mobile-hud-y) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) scale(var(--mobile-hud-scale)) !important;
  transform-origin: center center !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active [data-mobile-hud-control="weapon1"],
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active [data-mobile-hud-control="weapon2"] {
  width: 300px !important;
  min-width: 300px !important;
  height: 90px !important;
  min-height: 90px !important;
}
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active [data-mobile-hud-control="skill1"],
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active [data-mobile-hud-control="skill2"],
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active [data-mobile-hud-control="boost"],
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active [data-mobile-hud-control="brake"],
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active [data-mobile-hud-control="interact"],
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active [data-mobile-hud-control="buildMenu"],
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active [data-mobile-hud-control="buildRotate"] {
  width: var(--mobile-touch-size) !important;
  height: var(--mobile-touch-size) !important;
  min-width: var(--mobile-touch-size) !important;
  min-height: var(--mobile-touch-size) !important;
}
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active [data-mobile-hud-control="pause"] {
  width: calc(54px * 1.3) !important;
  height: calc(54px * 1.3) !important;
}
html.mobile-ui-reference .battle-root.sf-mobile-hud-layout-active .sf-mobile-hud-preview-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 48%, rgba(43, 113, 189, .20), transparent 22%),
    radial-gradient(circle at 22% 28%, rgba(83, 196, 255, .16) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 68%, rgba(183, 139, 255, .18) 0 1px, transparent 2px),
    #030812;
  background-size: auto, 180px 150px, 220px 180px, auto;
  pointer-events: none;
}

/* 编辑器遮罩与轻量底部控制条。stage 仍然是完整动态 surface，不是旧 16:9 容器。 */
.st-mobile-hud-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  flex-direction: column;
  padding: 18px;
  color: #eef2ff;
  background: rgba(1, 5, 16, .92);
  backdrop-filter: blur(7px);
}
.st-mobile-hud-editor-backdrop[hidden] { display: none; }
.st-mobile-hud-editor-head,
.st-mobile-hud-editor-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
}
.st-mobile-hud-editor-backdrop { display: block; padding: 0; overflow: hidden; }
.st-mobile-hud-editor-head { position: absolute; top: 18px; left: 22px; right: 22px; z-index: 40; }
.st-mobile-hud-editor-preview { position: absolute; inset: 0; width: auto; height: auto; }
.st-mobile-hud-editor-foot { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 40; }
.st-mobile-hud-editor-head { justify-content: space-between; padding: 0 4px 12px; }
.st-mobile-hud-editor-kicker { color: #9f8aff; font: 10px/1.2 ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .16em; }
.st-mobile-hud-editor-title { margin-top: 5px; font-size: 21px; letter-spacing: .12em; }
.st-mobile-hud-editor-copy { color: rgba(192, 203, 235, .74); font-size: 11px; line-height: 1.5; }
.st-mobile-hud-editor-close { width: 38px; height: 38px; color: #e9ddff; background: rgba(117, 86, 203, .18); border: 1px solid rgba(193, 167, 255, .58); font-size: 24px; cursor: pointer; }
.st-mobile-hud-editor-preview {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(121, 180, 255, .48);
  box-shadow: inset 0 0 36px rgba(51, 117, 213, .13), 0 0 24px rgba(46, 99, 214, .12);
}
.st-mobile-hud-editor-stage { position: absolute; inset: 0; overflow: hidden; }
.st-mobile-hud-editor-stage > .sf-mobile-hud-preview { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; }
.st-mobile-hud-editor-safe {
  position: absolute;
  inset: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
  border: 1px dashed rgba(105, 226, 255, .28);
  pointer-events: none;
}
.st-mobile-hud-editor-safe::before,
.st-mobile-hud-editor-safe::after {
  position: absolute;
  color: rgba(105, 226, 255, .42);
  font: 9px/1 ui-monospace, Consolas, "MiSans", monospace;
  letter-spacing: .16em;
  content: 'SAFE AREA';
}
.st-mobile-hud-editor-safe::before { top: 7px; left: 9px; }
.st-mobile-hud-editor-safe::after { right: 9px; bottom: 7px; content: 'SAFE AREA // DROP ZONE'; }
.st-mobile-hud-editor-guides { position: absolute; inset: 0; pointer-events: none; opacity: .22; background: linear-gradient(90deg, transparent 49.96%, rgba(137, 181, 255, .48) 50%, transparent 50.04%), linear-gradient(0deg, transparent 49.94%, rgba(137, 181, 255, .36) 50%, transparent 50.06%); }
.st-mobile-hud-editor-selection {
  position: absolute;
  min-width: 22px;
  min-height: 22px;
  border: 1px solid #d9c8ff;
  outline: 1px solid rgba(157, 115, 255, .5);
  outline-offset: 3px;
  box-shadow: 0 0 16px rgba(157, 115, 255, .35);
  pointer-events: none;
}
.st-mobile-hud-editor-selection[hidden] { display: none; }
.st-mobile-hud-editor-selection-label { position: absolute; left: -1px; top: -22px; max-width: 220px; padding: 4px 7px; color: #fff; background: rgba(47, 30, 104, .9); font: 10px/1.1 ui-monospace, Consolas, "MiSans", monospace; white-space: nowrap; }
.st-mobile-hud-editor-resize { position: absolute; right: -18px; bottom: -18px; width: 36px; height: 36px; border: 1px solid #d9c8ff; border-radius: 50%; color: #fff; background: #7854df; pointer-events: auto; touch-action: none; cursor: nwse-resize; }
.st-mobile-hud-editor-resize::before { position: absolute; inset: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ''; }
.st-mobile-hud-editor-panel { position: absolute; left: 16px; bottom: 16px; z-index: 30; width: min(360px, calc(100% - 32px)); padding: 11px 13px; border: 1px solid rgba(184, 157, 255, .62); background: rgba(7, 11, 31, .92); box-shadow: 0 8px 28px rgba(0, 0, 0, .34); }
.st-mobile-hud-editor-panel[hidden] { display: none; }
.st-mobile-hud-editor-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.st-mobile-hud-editor-panel-head b { color: #fff; font-size: 14px; }
.st-mobile-hud-editor-panel-head small { color: #b99cff; font: 9px ui-monospace, Consolas, "MiSans", monospace; letter-spacing: .12em; }
.st-mobile-hud-editor-position { display: flex; gap: 12px; margin-top: 8px; color: rgba(192, 203, 235, .78); font: 10px ui-monospace, Consolas, "MiSans", monospace; }
.st-mobile-hud-editor-position span { min-width: 72px; }
.st-mobile-hud-editor-size { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; align-items: center; gap: 8px; margin-top: 8px; color: rgba(192, 203, 235, .78); font-size: 10px; }
.st-mobile-hud-editor-size input { width: 100%; accent-color: #a58aff; }
.st-mobile-hud-editor-size output { min-width: 43px; color: #fff; text-align: right; font: 11px ui-monospace, Consolas, "MiSans", monospace; }
.st-mobile-hud-editor-panel-reset { margin-top: 8px; padding: 5px 8px; color: #d8d0f8; background: transparent; border: 1px solid rgba(122, 145, 206, .56); font: 10px ui-monospace, Consolas, "MiSans", monospace; cursor: pointer; }
.st-mobile-hud-editor-status { margin-left: auto; min-width: 0; color: rgba(191, 202, 234, .78); font-size: 11px; text-align: right; }
.st-mobile-hud-editor-foot { padding: 12px 4px 0; }
.st-mobile-hud-editor-foot button { min-height: 38px; padding: 0 14px; color: #e7e0ff; background: rgba(8, 14, 34, .8); border: 1px solid rgba(122, 145, 206, .56); font: 12px inherit; cursor: pointer; }
.st-mobile-hud-editor-foot .is-primary { color: #fff; background: linear-gradient(135deg, rgba(123, 85, 230, .9), rgba(74, 49, 147, .88)); border-color: rgba(211, 193, 255, .9); }
.st-mobile-hud-editor-foot button:hover, .st-mobile-hud-editor-foot button:focus-visible, .st-mobile-hud-editor-panel-reset:hover, .st-mobile-hud-editor-panel-reset:focus-visible { color: #fff; border-color: #d8c9ff; outline: 1px solid rgba(216, 201, 255, .36); outline-offset: 2px; }

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .st-mobile-hud-editor-backdrop { padding: 8px; }
  .st-mobile-hud-editor-head { padding-bottom: 7px; }
  .st-mobile-hud-editor-title { font-size: 16px; }
  .st-mobile-hud-editor-copy { display: none; }
  .st-mobile-hud-editor-panel { left: 8px; bottom: 8px; width: min(310px, calc(100% - 16px)); padding: 9px 10px; }
  .st-mobile-hud-editor-foot { gap: 6px; padding-top: 7px; }
  .st-mobile-hud-editor-foot button { min-height: 34px; padding-inline: 9px; font-size: 10px; }
  .st-mobile-hud-editor-status { font-size: 9px; }
}

/* SELECT OPERATION 引导复用主菜单引导的对话框/焦点框，只调整卡片锚点，
   让三张作战卡和左下状态区在宽屏与移动横屏仍保留可见的引导目标。 */
.sf-operation-guide .sf-menu-guide-card { right: 3%; width: min(650px, calc(100% - 48px)); }
.sf-operation-guide .sf-menu-guide-target { border-color: #d0b4ff; box-shadow: 0 0 0 4px rgba(165, 91, 255, .18), 0 0 28px rgba(165, 91, 255, .85), inset 0 0 24px rgba(208, 180, 255, .13); }
.sf-operation-guide .sf-menu-guide-kicker { color: #d0b4ff; }

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .sf-operation-guide .sf-menu-guide-card { right: 3%; width: min(640px, calc(100% - 32px)); }
}
/* 覆盖旧的 flex 预览规则：编辑器工具条浮在完整 viewport 之上，预览比例不被挤压。 */
.st-mobile-hud-editor-backdrop { display: block; padding: 0; }
.st-mobile-hud-editor-preview { position: absolute; inset: 0; width: auto; height: auto; flex: none; }

/* ================================================================
   主菜单新手引导：只在首次进入且 7 个导航按钮全部出现后显示。
   引导层沿用菜单的 1920×1080 设计表面，target 使用百分比定位，
   因此不会在宽屏、移动横屏或动态 surface 上制造第二套坐标系。
   ================================================================ */
.sf-menu-guide {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: block;
  overflow: hidden;
  isolation: isolate;
  color: #eaf3ff;
  pointer-events: none;
}
.sf-menu-guide[hidden] { display: none; }
.sf-menu-guide.is-active { pointer-events: auto; }
.sf-menu-guide-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(1, 5, 16, .72);
  opacity: 0;
  transition: opacity .2s ease;
}
.sf-menu-guide.is-active .sf-menu-guide-wash { opacity: 1; }
.sf-menu-guide-wash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(143, 214, 255, .03) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.sf-menu-guide-target {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  min-width: 24px;
  min-height: 24px;
  border: 2px solid #a9edff;
  border-radius: 0 19px 0 19px;
  box-shadow: 0 0 0 4px rgba(76, 167, 255, .18), 0 0 28px rgba(76, 167, 255, .85), inset 0 0 24px rgba(143, 214, 255, .13);
  pointer-events: none;
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.sf-menu-guide-target::before,
.sf-menu-guide-target::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #f1fcff;
  border-style: solid;
}
.sf-menu-guide-target::before { left: -5px; top: -5px; border-width: 2px 0 0 2px; }
.sf-menu-guide-target::after { right: -5px; bottom: -5px; border-width: 0 2px 2px 0; }
.sf-menu-guide-target > span {
  position: absolute;
  top: -26px;
  left: 12px;
  width: 90px;
  height: 18px;
  color: #a9edff;
  font: 9px/18px ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
  letter-spacing: .08em;
  text-shadow: 0 0 10px #4ca7ff;
  white-space: nowrap;
}
.sf-menu-guide-target > span::before { content: '◈ '; color: #ffd36b; }
.sf-menu-guide-target > b { display: none; }
.sf-menu-guide-card {
  position: absolute;
  top: 50%;
  right: 5%;
  z-index: 4;
  box-sizing: border-box;
  width: min(590px, calc(100% - 48px));
  max-height: calc(100% - 72px);
  overflow: auto;
  padding: 27px 30px 23px;
  transform: translateY(-50%) translateX(18px);
  color: #eaf3ff;
  background: linear-gradient(135deg, rgba(9, 25, 57, .97), rgba(4, 10, 28, .96) 72%, rgba(27, 11, 55, .94));
  border: 1px solid rgba(143, 214, 255, .84);
  clip-path: polygon(0 16px, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: 0 0 0 1px rgba(76, 167, 255, .16), 0 0 42px rgba(31, 119, 255, .28), inset 0 0 30px rgba(76, 167, 255, .09);
  opacity: 0;
  transition: opacity .2s ease, transform .24s cubic-bezier(.16, .84, .3, 1);
}
.sf-menu-guide.is-active .sf-menu-guide-card { opacity: 1; transform: translateY(-50%) translateX(0); }
.sf-menu-guide.is-closing .sf-menu-guide-wash { opacity: 0; }
.sf-menu-guide.is-closing .sf-menu-guide-card { opacity: 0; transform: translateY(-50%) translateX(18px); }
.sf-menu-guide-card::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(143, 214, 255, .13);
  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  pointer-events: none;
}
.sf-menu-guide-card > * { position: relative; z-index: 1; }
.sf-menu-guide-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: rgba(143, 214, 255, .76); font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .14em; }
.sf-menu-guide-kicker { color: #7ee8c8; }
.sf-menu-guide-progress { color: rgba(223, 234, 255, .62); white-space: nowrap; }
.sf-menu-guide-card h2 { margin: 22px 0 0; color: #f2f7ff; font: 600 clamp(28px, 2.3vw, 43px)/1.05 "Arial Narrow", "Bahnschrift SemiCondensed", "MiSans", sans-serif; letter-spacing: .11em; text-shadow: 0 0 18px rgba(143, 214, 255, .38); }
.sf-menu-guide-en { margin-top: 8px; color: #9aa8d4; font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .2em; }
.sf-menu-guide-description { margin: 24px 0 0; color: rgba(231, 240, 255, .9); font-size: 16px; line-height: 1.8; letter-spacing: .06em; }
.sf-menu-guide-items { display: grid; gap: 8px; margin: 19px 0 0; padding: 0; list-style: none; color: rgba(171, 205, 239, .82); font-size: 13px; line-height: 1.55; letter-spacing: .04em; }
.sf-menu-guide-items li { position: relative; padding-left: 19px; }
.sf-menu-guide-items li::before { content: '＋'; position: absolute; left: 0; color: #7ee8c8; }
.sf-menu-guide-actions { display: grid; grid-template-columns: minmax(145px, .72fr) minmax(190px, 1fr); gap: 10px; margin-top: 25px; }
.sf-menu-guide-actions button { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 17px; color: #b7c8eb; background: rgba(6, 16, 39, .84); border: 1px solid rgba(91, 135, 207, .5); border-radius: 0 11px 0 11px; cursor: pointer; font: inherit; text-align: left; }
.sf-menu-guide-actions button:hover, .sf-menu-guide-actions button:focus-visible { color: #fff; border-color: #a9edff; background: rgba(26, 57, 108, .8); box-shadow: 0 0 18px rgba(76, 167, 255, .28); outline: none; }
.sf-menu-guide-actions b, .sf-menu-guide-actions small { display: block; }
.sf-menu-guide-actions b { font-size: 14px; letter-spacing: .08em; }
.sf-menu-guide-actions small { margin-top: 4px; color: rgba(171, 199, 232, .7); font: 9px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; }
.sf-menu-guide-next { color: #f1f6ff !important; background: linear-gradient(135deg, rgba(37, 104, 183, .76), rgba(58, 34, 131, .74)) !important; border-color: rgba(143, 214, 255, .82) !important; }
.sf-menu-guide-next i { width: 11px; height: 11px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.sf-menu-guide-hint { margin-top: 15px; color: rgba(143, 182, 220, .58); font: 9px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; text-align: right; }
.sf-menu-guide-hint span { margin: 0 7px; color: #b388ff; }

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .sf-menu-guide-card { right: 3%; width: min(640px, calc(100% - 32px)); padding: 20px 22px 17px; }
  .sf-menu-guide-card h2 { margin-top: 14px; font-size: 27px; }
  .sf-menu-guide-description { margin-top: 14px; font-size: 13px; line-height: 1.55; }
  .sf-menu-guide-items { margin-top: 11px; font-size: 10px; gap: 5px; }
  .sf-menu-guide-actions { margin-top: 16px; }
  .sf-menu-guide-actions button { min-height: 43px; padding-inline: 12px; }
  .sf-menu-guide-actions b { font-size: 11px; }
  .sf-menu-guide-actions small, .sf-menu-guide-hint { font-size: 7px; }
  .sf-menu-guide-target > span { top: -20px; font-size: 7px; }
}

/* ================================================================
   战斗新手教学：固定在 battle-root 的设计表面上方，仅卡片按钮接收点击。
   空白区域与双摇杆/准心保持穿透，避免教学层破坏既有战斗输入。 */
.sf-tutorial-coach {
  position: absolute;
  inset: 0;
  z-index: 32;
  pointer-events: none;
  color: #edf5ff;
}
.sf-tutorial-coach[hidden] { display: none; }
.sf-tutorial-coach-card {
  position: absolute;
  top: 28px;
  left: 50%;
  box-sizing: border-box;
  width: min(700px, calc(100% - 48px));
  padding: 19px 23px 16px;
  transform: translateX(-50%) translateY(-12px);
  background: linear-gradient(135deg, rgba(8, 25, 55, .96), rgba(4, 10, 28, .94) 72%, rgba(21, 11, 53, .94));
  border: 1px solid rgba(126, 232, 200, .72);
  clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: 0 0 0 1px rgba(76, 167, 255, .14), 0 0 34px rgba(31, 119, 255, .24), inset 0 0 22px rgba(76, 167, 255, .08);
  opacity: 0;
  transition: opacity .18s ease, transform .22s cubic-bezier(.16, .84, .3, 1);
}
.sf-tutorial-coach.is-active .sf-tutorial-coach-card { opacity: 1; transform: translateX(-50%) translateY(0); }
.sf-tutorial-coach.is-closing .sf-tutorial-coach-card { opacity: 0; transform: translateX(-50%) translateY(-12px); }
.sf-tutorial-coach-card::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(143, 214, 255, .12);
  pointer-events: none;
}
.sf-tutorial-coach-card > * { position: relative; z-index: 1; }
.sf-tutorial-coach-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: rgba(143, 214, 255, .75); font: 9px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .14em; }
.sf-tutorial-coach-kicker { color: #7ee8c8; }
.sf-tutorial-coach-progress { white-space: nowrap; }
.sf-tutorial-coach-card h2 { margin: 11px 0 0; color: #f2f7ff; font: 600 clamp(22px, 2vw, 34px)/1.05 "Arial Narrow", "Bahnschrift SemiCondensed", "MiSans", sans-serif; letter-spacing: .1em; text-shadow: 0 0 14px rgba(143, 214, 255, .34); }
.sf-tutorial-coach-en { margin-top: 5px; color: #9aa8d4; font: 9px/1.2 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .18em; }
.sf-tutorial-coach-description { margin: 12px 0 0; color: rgba(231, 240, 255, .9); font-size: 13px; line-height: 1.6; letter-spacing: .04em; }
.sf-tutorial-coach-control { margin-top: 10px; color: #ffd36b; font: 600 11px/1.35 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .08em; }
.sf-tutorial-coach-hint { margin-top: 5px; color: rgba(171, 205, 239, .72); font-size: 11px; line-height: 1.4; letter-spacing: .04em; }
.sf-tutorial-coach-choices { margin-top: 14px; display: flex; gap: 12px; pointer-events: auto; }
.sf-tutorial-coach-choices[hidden] { display: none; }
.sf-tutorial-coach-choice {
  min-width: 136px;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #dfe9ff;
  background: rgba(10, 26, 58, .78);
  border: 1px solid rgba(91, 135, 207, .55);
  clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sf-tutorial-coach-choice b { font-size: 14px; letter-spacing: .1em; }
.sf-tutorial-coach-choice small { color: rgba(171, 199, 232, .7); font: 7px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .14em; }
.sf-tutorial-coach-choice:hover, .sf-tutorial-coach-choice:focus-visible {
  color: #fff;
  border-color: #a9edff;
  outline: none;
  box-shadow: 0 0 14px rgba(76, 167, 255, .3);
}
.sf-tutorial-coach-skip {
  position: absolute !important;
  right: 16px;
  bottom: 13px;
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px;
  color: rgba(197, 214, 239, .74);
  background: rgba(4, 11, 29, .54);
  border: 1px solid rgba(91, 135, 207, .4);
  cursor: pointer;
  pointer-events: auto;
  font: inherit;
  text-align: left;
}
.sf-tutorial-coach-skip:hover, .sf-tutorial-coach-skip:focus-visible { color: #fff; border-color: #a9edff; outline: none; box-shadow: 0 0 12px rgba(76, 167, 255, .25); }
.sf-tutorial-coach-skip b, .sf-tutorial-coach-skip small { display: block; }
.sf-tutorial-coach-skip b { font-size: 10px; letter-spacing: .04em; }
.sf-tutorial-coach-skip small { margin-top: 2px; color: rgba(171, 199, 232, .64); font: 7px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace; letter-spacing: .06em; }
.sf-tutorial-coach-skip i { color: #ff91a4; font-style: normal; font-size: 16px; line-height: 1; }

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .sf-tutorial-coach-card { top: 10px; width: calc(100% - 24px); padding: 12px 15px 42px; }
  .sf-tutorial-coach-head { font-size: 7px; }
  .sf-tutorial-coach-card h2 { margin-top: 7px; font-size: 21px; }
  .sf-tutorial-coach-en { margin-top: 3px; font-size: 7px; }
  .sf-tutorial-coach-description { margin-top: 8px; font-size: 10px; line-height: 1.45; }
  .sf-tutorial-coach-control { margin-top: 6px; font-size: 9px; }
  .sf-tutorial-coach-hint { margin-top: 3px; font-size: 9px; }
  .sf-tutorial-coach-choices { margin-top: 10px; gap: 10px; }
  .sf-tutorial-coach-choice { min-width: 108px; min-height: 36px; }
  .sf-tutorial-coach-choice b { font-size: 12px; }
  .sf-tutorial-coach-skip { right: 11px; bottom: 8px; min-height: 27px; }
  .sf-tutorial-coach-skip b { font-size: 8px; }
  .sf-tutorial-coach-skip small { font-size: 6px; }
}

/* ================================================================
   Gamepad 手柄适配：焦点环 / 输入提示 chip / 手柄图标
   · 焦点环只在 html.sf-pad-focus（手柄为最后输入设备）时出现，
     鼠标/触控接管后自动移除；保持现有科幻 UI 视觉基调。
   ================================================================ */
html.sf-pad-focus .gp-focus-ring {
  outline: 2px solid rgba(101, 217, 255, .95);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(101, 217, 255, .16), 0 0 16px rgba(101, 217, 255, .32);
}

.sf-input-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  margin: 0 3px;
  vertical-align: -4px;
  border: 1px solid rgba(125, 168, 224, .55);
  background: rgba(10, 26, 58, .72);
  color: #dfe9ff;
  font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
  letter-spacing: .06em;
  border-radius: 3px;
  white-space: nowrap;
}

.sf-input-chip-pad { border-color: rgba(101, 217, 255, .6); }

.sf-pad-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sf-pad-icon text {
  fill: currentColor;
  stroke: none;
  font: 700 10px ui-monospace, SFMono-Regular, Consolas, monospace;
}

.sf-pad-icon text.sf-pad-icon-small {
  font-size: 6.4px;
  letter-spacing: .03em;
}

/* 设置页手柄状态行 */
.st-pad-status {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  color: rgba(171, 205, 239, .88);
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
  letter-spacing: .04em;
  border: 1px solid rgba(91, 135, 207, .35);
  border-radius: 4px;
  background: rgba(10, 26, 58, .5);
}

/* 手柄状态指示（设置页手柄分类）：状态点 + 文案，只读非交互 */
.st-pad-status { gap: 9px; }
.st-pad-status .st-pad-status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pad-status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: rgba(122, 136, 182, .5); box-shadow: 0 0 0 2px rgba(122, 136, 182, .14); }
.st-pad-status-dot.on { background: #5fe39a; box-shadow: 0 0 0 2px rgba(95, 227, 154, .16), 0 0 12px rgba(95, 227, 154, .55); }

/* 测试震动结论行（设置页手柄分类）： rumble 静默降级的可见化出口 */
.st-rumble-test { height: auto; }
.st-rumble-status {
  margin-top: 7px;
  font: 600 11px/1.5 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
  letter-spacing: .03em;
  color: rgba(171, 205, 239, .82);
}
.st-rumble-status.ok { color: #5fe39a; }
.st-rumble-status.bad { color: #ffb3c2; }

/* 手柄重绑定弹窗：界面固定键位行（只读） */
.st-binding-row.is-fixed .st-binding-key--fixed {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 74px; padding: 8px 14px; cursor: default;
  color: rgba(171, 183, 224, .78); background: rgba(10, 20, 44, .5);
  border: 1px dashed rgba(92, 113, 168, .45); box-shadow: none;
}

/* ---------- 触屏设备（设计表面语境）：模式卡进度标签加大并离开出击条 ----------
   真机浏览器按 viewport meta 得到 1920×1080 ICB，与 PC 同构等比缩放，
   pointer: coarse 是区分触屏的唯一开关；min-width 防止该覆盖落入旧嵌入
   环境的重排布局（那里由 7060/9682 断点内的规则负责，已同步 +8/+15）。
   本块只放大字号/抬升位移，不重排布局。 */
@media (pointer: coarse) and (min-width: 1800px) {
  .ms-progress { bottom: 103px; font-size: 25px; }
}

/* ================================================================
   输入方式分化 UI（键鼠 / 手柄 / 触控）· 手柄与多端适配批次
   · 输入提示 chip 触控变体 / 触控手势图标（padPrompts.js）
   · 战斗 HUD 槽位角标按输入方式重绘（hud.js data-slot-badge/text）
   · 战斗键位显示面板 .sf-keyhints（settings.battleKeyHint 三档）
   · 全界面手柄底部提示条 .sf-hintbar + 分类标签 LB/RB 装饰
   · 设置页分段滑块 .st-seg-*（无/简略/详尽 等 N 档切换）
   配色沿用科幻基调：深蓝底、青色 accent、等宽字体；提示条/键位面板/
   标签装饰均为 pointer-events:none 的只读层，不拦截任何输入。
   全部尺寸使用 PC 1920×1080 设计单位，随 uniform scale 等比缩放。
   ================================================================ */

/* ---- 1 触控 chip 变体与手势图标 ---- */
.sf-input-chip-touch { border-color: rgba(95, 227, 154, .55); }

.sf-input-chip-touch em {
  font-style: normal;
  font-weight: 600;
  margin-left: 3px;
  letter-spacing: .04em;
}

.sf-touch-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- 2 战斗 HUD 槽位角标：按输入方式重绘 ----
   键鼠：键名字符（Q/E/1/2，原样式不变）
   手柄：按钮图标（17px，左下角标内）
   触控：手势图形（提示移动端动作按钮承担操作） */
.skill-key.is-pad { left: 4px; bottom: 3px; }
.skill-key.is-touch { left: 5px; bottom: 3px; }

.skill-key.is-pad .sf-pad-icon,
.skill-key.is-touch .sf-touch-icon {
  width: 17px;
  height: 17px;
  stroke-width: 1.7;
}

.q-ability-key.is-pad,
.q-ability-key.is-touch,
.e-ability-key.is-pad,
.e-ability-key.is-touch {
  letter-spacing: .1em;
  color: rgba(221, 232, 255, .95);
}

/* ---- 3 战斗键位显示面板（右侧武器系统上方；无底框精简版，
   文字与战斗 HUD 激活武器名同色 #e7caff） ---- */
.sf-keyhints {
  position: absolute;
  right: calc(58px + var(--sa-r));
  bottom: calc(244px + var(--sa-b));
  width: 264px;
  z-index: 3;
  pointer-events: none;
  color: #e7caff;
  font: 600 11px/1.35 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
}

.sf-keyhints[hidden] { display: none; }

.sf-keyhints-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 5px;
  color: inherit;
  font-size: 10px;
  letter-spacing: .12em;
}

.sf-keyhints-tier {
  padding: 2px 8px;
  border: 1px solid rgba(231, 202, 255, .4);
  border-radius: 2px;
  background: rgba(179, 136, 255, .12);
  color: inherit;
  font-style: normal;
  font-size: 9px;
  letter-spacing: .12em;
}

.sf-keyhints-body {
  display: grid;
  gap: 2px;
  padding: 0 2px;
}

.sf-keyhint-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 19px;
  padding: 0 2px;
}

.sf-keyhint-label {
  color: inherit;
  font-size: 11px;
  letter-spacing: .05em;
  white-space: nowrap;
}

.sf-keyhint-slot { justify-self: end; }

.sf-keyhint-keys {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sf-keyhint-keys .sf-pad-icon,
.sf-keyhint-keys .sf-touch-icon {
  width: 15px;
  height: 15px;
}

.sf-keyhint-keys .sf-input-chip {
  min-width: 18px;
  height: 17px;
  margin: 0;
  border-color: rgba(231, 202, 255, .42);
  color: #e7caff;
  font-size: 9px;
}

.sf-keyhint-keys em {
  font-style: normal;
  color: rgba(231, 202, 255, .82);
  font-size: 9.5px;
  letter-spacing: .05em;
}

.sf-keyhint-keys b {
  color: #e7caff;
  font-size: 9.5px;
  letter-spacing: .04em;
}

/* ---- 4 全界面手柄底部提示条（body 级 fixed，菜单屏显示） ---- */
.sf-hintbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 11, 27, 0), rgba(4, 11, 27, .8) 42%);
}

.sf-hintbar[hidden] { display: none; }

.sf-hintbar-inner {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 6px 18px;
  border: 1px solid rgba(125, 168, 224, .35);
  border-radius: 999px;
  background: rgba(10, 26, 58, .8);
  box-shadow: 0 0 16px rgba(4, 11, 27, .5);
  color: rgba(223, 233, 255, .92);
  font: 600 10.5px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
  letter-spacing: .06em;
}

.sf-hintbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sf-hintbar-item em {
  font-style: normal;
  letter-spacing: .08em;
}

.sf-hintbar-item .sf-pad-icon {
  width: 19px;
  height: 19px;
}

.sf-hintbar-stick .sf-pad-icon {
  width: 20px;
  height: 20px;
}

/* ---- 5 分类标签 LB/RB 装饰 ----
   实底胶囊徽章挂在首/末标签外侧端点，坐标由 hintBar.js 按标签盒实测写入；
   绝对定位脱离 .st-tabs 网格流，不挤出新行不改布局；
   图标 24px（内部 LB/RB 字样约 10px），键鼠/触控语境随 html.sf-input-* 隐藏。 */
.st-tabs,
.fleet-tabs,
.cd-tabs,
.command-tabs { position: relative; }

.sf-tab-hint {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid rgba(101, 217, 255, .55);
  border-radius: 999px;
  background: rgba(8, 20, 44, .92);
  box-shadow: 0 0 14px rgba(4, 11, 27, .6), 0 0 10px rgba(101, 217, 255, .15);
  color: #dfe9ff;
  pointer-events: none;
  white-space: nowrap;
}

.sf-tab-hint .sf-pad-icon {
  width: 24px;
  height: 24px;
}

html:not(.sf-input-pad) .sf-tab-hint { display: none; }

/* ---- 6 设置页分段滑块（战斗键位显示 无/简略/详尽） ----
   视觉直接复用标准滑块 .st-reference-range（#c4a8ff 拇指 / 4px 轨道 / 等长），
   键盘方向键与手柄（gamepadFocus.adjustControl 的 range 通路）原生可用；
   档位标签排在滑轨下方 10px，点按即切换。 */
.st-seg-control {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
}

.st-seg-labels {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 10px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.st-seg-labels b {
  pointer-events: auto;
  cursor: pointer;
  padding: 5px 7px;
  color: rgba(171, 205, 239, .55);
  font: 600 10.5px/1 ui-monospace, SFMono-Regular, Consolas, "MiSans", monospace;
  letter-spacing: .06em;
  transition: color .15s ease, text-shadow .15s ease;
}

.st-seg-labels b.on {
  color: #fff;
  text-shadow: 0 0 9px rgba(196, 168, 255, .65);
}

@media (prefers-reduced-motion: reduce) {
  .st-seg-labels b { transition: none; }
}

/* ================================================================
   v2.3.3 批次E9：reduced-motion 全局补全 —— 此前仅有零散 8 处覆盖，
   以下常驻脉动/装饰动画对"减少动态"用户不受控；统一在文件尾收口。
   （低血条纹为静态纹理不受此影响；Canvas 侧动效由游戏内设置开关控制）
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .lowhp.on,
  .revive-row.countdown .revive-badge,
  .toast,
  .menu-rain-glyph,
  .hud-stardust.bump,
  .choice-card,
  .weapon-switching .weapon-row {
    animation: none !important;
  }
}

/* ================================================================
   v2.3.3 真机复验修复（cea06cd5 实测）：coarse 横屏下 Boss 血条右缘与
   右上暂停键重叠 ~16 设计px（barRect 1872-2328 vs pauseRect 2280-2349）。
   血条整体下移至暂停键（设计区 y 45-114）下方；多 Boss 叠条向下生长不受影响。
   ================================================================ */
@media (pointer: coarse) and (orientation: landscape) {
  .battle-root .bosswrap { top: calc(124px + var(--sa-t)); }
  .battle-root .denial-wrap:not([hidden]) ~ .bosswrap { top: calc(170px + var(--sa-t)); }
}