/* 白盒关卡编辑器（docs/Data_EditorBlockout.md §4）。
   外观与高级工具（Style_Editor.css 的 #edRoot --ed-*）同一套，也就是启动界面设置页的视觉语言：
   半透明暗色渐变底、象牙白文字、橄榄灰细线、左侧金边 + 渐变的选中条、宽字距小标题、衬线标题、
   金色填充细轨 + 竖条游标、直角控件；数字等宽。两边的取值同源，改一边时另一边一起改。 */

.boRoot {
  --bo-font: var(--ui-font);
  --bo-serif: var(--ui-story-font);
  --bo-num: var(--ui-mono, "Cascadia Mono", Consolas, monospace);
  --bo-panel: linear-gradient(90deg, #080907e6, #11120ede 65%, #14150cd6);
  --bo-panel-solid: linear-gradient(90deg, #080907f7, #11120ef2);
  --bo-line: #c1bdab30;
  --bo-line-strong: #c1bdab55;
  --bo-edge: #c1bdab40;
  --bo-text: #deddd2;
  --bo-bright: #eeeee7;
  --bo-muted: #aaa99b;
  --bo-faint: #989b8b;
  --bo-gold: #edca83;
  --bo-gold-text: #e6cb91;
  --bo-gold-hi: #ffe0a1;
  --bo-gold-fill: #d9bb7b;
  --bo-sel: linear-gradient(90deg, #d8d4c324, #bbb7a906);
  --bo-sel-strong: linear-gradient(90deg, #d8d4c333, #bbb7a90d);
  --bo-ok: #8fca7a;
  --bo-sync: #86c9dc;
  --bo-bad: #d6604a;
  --bo-enemy: rgb(196, 60, 42);
  --bo-friend: rgb(38, 106, 180);
  --bo-civ: rgb(70, 136, 56);
  --bo-mapgold: rgb(226, 166, 26);
  position: fixed; inset: 0; z-index: 30;
  pointer-events: none;
  font: 13px/1.45 var(--bo-font);
  color: var(--bo-text);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
  user-select: none;
}
/* 加载画面（#boot，z-index 10）还在时整层编辑器（含地上标签）收起，不压在报纸上；收掉后照常显示。 */
#boot:not(.gone) ~ #blockoutRoot { visibility: hidden; }
.boRoot *, .boRoot *::before, .boRoot *::after { box-sizing: border-box; }
.boRoot [hidden] { display: none !important; }
.boRoot :is(.boCard, .boTopBar, .boMini, .boNav, .boMapOverlay.open, .boCopyBox) { pointer-events: auto; }
.boRoot.inert, .boRoot.inert * { pointer-events: none !important; }
.boRoot.inert [data-tip]::after { display: none; }

.boPanel {
  background: var(--bo-panel);
  border: 1px solid var(--bo-edge);
  border-radius: 0;
  box-shadow: 0 20px 50px #0009;
}

/* --- 按钮与提示 ---------------------------------------------------------- */
.boBtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0; padding: 0; border-radius: 0;
  border: 1px solid transparent; background: transparent;
  color: var(--bo-muted); font: inherit; cursor: pointer;
  transition: color 0.12s linear, border-color 0.12s linear, background-color 0.12s linear;
}
.boBtn svg { width: 16px; height: 16px; display: block; }
.boBtn:hover { color: var(--bo-gold-hi); background: var(--bo-sel); }
.boBtn:disabled { opacity: 0.3; cursor: default; background: transparent; color: var(--bo-muted); }
.boBtn:focus-visible { outline: 1px solid var(--bo-gold); outline-offset: 1px; }
.boIconBtn { width: 30px; height: 30px; }

.boRoot [data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  padding: 4px 8px; white-space: nowrap;
  font: 12px/1.4 var(--bo-font); color: var(--bo-bright); letter-spacing: 0.06em;
  background: var(--bo-panel-solid); border: 1px solid var(--bo-edge);
  pointer-events: none; opacity: 0; z-index: 6;
  transition: opacity 0.1s linear 0s;
}
.boRoot [data-tip]:hover::after { opacity: 1; transition-delay: 0.35s; }
.boRoot [data-tip][data-tip-side="below"]::after { bottom: auto; top: calc(100% + 8px); }
.boRoot [data-tip][data-tip-side="left"]::after { left: auto; right: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); }

.boKbd {
  display: inline-block; min-width: 15px; padding: 0 3px;
  font: 600 9.5px/13px var(--bo-num); text-align: center; color: var(--bo-text);
  border: 1px solid var(--bo-edge);
  background: #13140b88;
}

/* --- 左上：关键帧卡片 ------------------------------------------------------ */
.boCard {
  position: absolute; left: 16px; top: 16px;
  width: 380px; padding: 12px 12px 13px 16px;
}
.boCardHead {
  display: flex; align-items: flex-start; gap: 8px;
  padding-bottom: 10px; margin-bottom: 9px;
  border-bottom: 1px solid var(--bo-line-strong);
}
.boCardTitle { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 0; padding-top: 2px; }
.boStageNo {
  font: 600 22px/1 "TzUiLatin", var(--bo-num); color: var(--bo-gold);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.boStageTitle { font: 700 16px/1.3 var(--bo-serif); color: var(--bo-bright); letter-spacing: 0.08em; }
.boPlace { font-size: 12px; color: var(--bo-muted); letter-spacing: 0.12em; }
.boSave, .boCopy { flex: 0 0 auto; margin: -3px 0 0 0; color: var(--bo-text); border-color: var(--bo-edge); background: #13140b55; }
.boSave { margin-right: -4px; }
.boSave:hover, .boCopy:hover { border-color: #cdb77b88; }

.boLine { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; margin: 6px 0 0; }
.boLine:first-of-type { margin-top: 0; }
.boKey { color: var(--bo-faint); font-size: 12px; letter-spacing: 0.16em; line-height: 19px; }
.boVal { color: var(--bo-text); line-height: 19px; }
.boVal.muted { color: var(--bo-faint); }
.boNextVal { display: flex; align-items: center; gap: 8px; min-width: 0; }
.boArrow {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 1px solid #cdb77b88; border-radius: 50%;
  color: var(--bo-gold); transform-origin: 50% 50%;
}
.boArrow svg { width: 13px; height: 13px; stroke-width: 1.8; }
.boNextText { flex: 1 1 auto; min-width: 0; color: var(--bo-gold-text); font-weight: 700; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boDist { flex: 0 0 auto; font: 12px/19px var(--bo-num); color: var(--bo-muted); font-variant-numeric: tabular-nums; }

.boHow { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0 54px; }
.boChip {
  padding: 1px 8px; font-size: 11.5px; line-height: 18px; letter-spacing: 0.06em;
  color: #b9bcb7; border: 1px solid var(--bo-line);
  background: transparent;
}
.boNotes {
  margin: 9px 0 0 54px; padding-left: 8px;
  border-left: 1px solid var(--bo-edge);
  font-size: 11.5px; line-height: 1.5; color: var(--bo-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* 一行；全文在悬停提示里 */
}
.boGuess { display: flex; align-items: center; gap: 6px; margin: 8px 0 0 54px; font-size: 11.5px; color: var(--bo-muted); }
.boGuessIcon { display: inline-flex; color: var(--bo-muted); }
.boGuessIcon svg { width: 13px; height: 13px; }
.boEmpty { display: none; color: var(--bo-faint); font-size: 12.5px; }
.boCard.empty > :not(.boEmpty) { display: none; }
.boCard.empty .boEmpty { display: block; }

/* --- 右上：关卡与图层（齿轮左侧） ------------------------------------------ */
.boTopBar {
  position: absolute; top: 14px; right: 62px;
  display: flex; align-items: stretch; gap: 6px; height: 34px;
}
.boLevel { position: relative; }
.boLevelBtn {
  height: 34px; min-width: 176px; max-width: 280px; padding: 0 9px 0 12px; justify-content: space-between; gap: 10px;
  background: var(--bo-panel); border: 1px solid var(--bo-edge);
  color: var(--bo-bright); font-size: 13px; letter-spacing: 0.08em;
}
.boLevelBtn:hover { border-color: #cdb77b88; background: var(--bo-panel); color: var(--bo-gold-hi); }
.boLevelBtn:disabled { opacity: 1; cursor: default; color: var(--bo-bright); background: var(--bo-panel); }
.boLevelBtn:disabled .boChevron { opacity: 0.25; }
.boLevelName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boChevron { display: inline-flex; color: var(--bo-muted); transition: transform 0.15s ease; }
.boChevron svg { width: 14px; height: 14px; }
.boLevel.open .boChevron { transform: rotate(180deg); }
.boLevel.open .boLevelBtn { border-color: var(--bo-gold); color: var(--bo-gold); }
.boLevelBtn[data-tip]::after { display: none; }
.boLevelMenu {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%;
  padding: 8px 0; display: none; z-index: 7; background: var(--bo-panel-solid);
  border: 1px solid var(--bo-edge); box-shadow: 0 20px 44px #000b;
}
.boLevel.open .boLevelMenu { display: block; }
.boLevelItem {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 36px; padding: 0 18px 0 13px; border: 0; border-left: 3px solid transparent; background: transparent; border-radius: 0;
  color: #c6c7bd; font: 14px/1.4 var(--bo-font); letter-spacing: 0.08em; text-align: left; white-space: nowrap; cursor: pointer;
}
.boLevelItem:hover { background: var(--bo-sel); border-left-color: var(--bo-gold); color: var(--bo-gold); }
/* 当前关：金字 + 一枚 5 px 金方块（与高级工具菜单、设置页开关的标记同一种） */
.boLevelMark { width: 5px; height: 5px; background: transparent; }
.boLevelItem.on { color: var(--bo-gold-text); }
.boLevelItem.on .boLevelMark { background: currentColor; }

/* 新旧标记（2026-10-19）：关卡名前一枚小标——新剧本金框、旧版红底、草稿灰框；下拉按新剧本 / 旧版 / 草稿分组，每关下一行说明 */
.boLevelBadge {
  flex: 0 0 auto; padding: 1px 6px; border: 1px solid #cdb77b88; color: var(--bo-gold);
  font: 600 11px/16px var(--bo-font); letter-spacing: 0.1em;
}
.boLevelBadge[data-era="legacy"] { border-color: #d6604acc; background: #d6604a2e; color: #f0a08f; }
.boLevelBadge[data-era="draft"] { border-color: var(--bo-line-strong); color: var(--bo-muted); }
.boLevelBadge[hidden] { display: none; }
.boLevelBtn .boLevelName { flex: 1 1 auto; text-align: left; }
.boLevelMenu { min-width: max(100%, 380px); }
.boLevelGroup {
  padding: 10px 18px 4px 16px; color: var(--bo-faint);
  font: 11px/1.4 var(--bo-font); letter-spacing: 0.18em;
}
.boLevelGroup:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--bo-line); }
.boLevelText { display: flex; flex-direction: column; min-width: 0; padding: 6px 0; }
.boLevelLabel { white-space: nowrap; }
.boLevelNote { font-size: 11.5px; line-height: 1.45; letter-spacing: 0.04em; color: var(--bo-faint); white-space: normal; max-width: 360px; }
.boLevelItem:hover .boLevelNote { color: var(--bo-muted); }

/* 旧版提示条：挂在右上关卡下拉下面；红色左边线与旧版小标同色 */
.boEraBanner {
  position: absolute; top: 56px; right: 62px; width: min(460px, calc(100vw - 28px));
  padding: 10px 10px 10px 14px; display: none; border-left: 3px solid #d6604acc;
  pointer-events: auto;
}
.boEraBanner.show { display: block; }
.boEraHead { display: flex; align-items: center; gap: 8px; color: var(--bo-bright); font-size: 13px; letter-spacing: 0.04em; }
.boEraHead > span:nth-child(2) { flex: 1 1 auto; }
.boEraClose { width: 24px; height: 24px; flex: 0 0 auto; }
.boEraClose svg { width: 12px; height: 12px; }
.boEraBody { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.boEraLead { color: var(--bo-muted); font-size: 12px; letter-spacing: 0.06em; margin-right: 2px; }
.boEraGo {
  height: 28px; padding: 0 12px; border: 1px solid #cdb77b88; color: var(--bo-gold);
  font: 600 12.5px/26px var(--bo-num); letter-spacing: 0.06em;
}
.boEraGo:hover { border-color: var(--bo-gold); color: var(--bo-gold-hi); }

.boLayers {
  display: flex; background: var(--bo-panel); border: 1px solid var(--bo-edge);
}
.boLayer { width: 34px; height: 32px; color: #8d8f86; border-bottom: 2px solid transparent; }
.boLayer + .boLayer { border-left: 1px solid var(--bo-line); }
.boLayer.on { color: var(--bo-gold); background: var(--bo-sel-strong); border-bottom-color: var(--bo-gold); }
.boLayer.on:hover { color: var(--bo-gold-hi); background: var(--bo-sel-strong); }
.boLayer.all::before {
  content: ""; position: absolute; right: 4px; top: 4px; width: 4px; height: 4px; background: var(--bo-gold);
}

/* 高级工具音量（Script_EditorVolume，2026-10-20）：同菜单栏那条，这里套白盒工具条的面板底 */
.boTopBar .edVolume {
  align-self: stretch; margin: 0; padding: 0 10px 0 4px; gap: 6px;
  background: var(--bo-panel); border: 1px solid var(--bo-edge); pointer-events: auto;
  /* Style_Editor.css 的 --ed-* 只在 #edRoot 里有：这里换成白盒工具条的同色 */
  --ed-text-2: #c2c3b6; --ed-text-3: var(--bo-muted); --ed-text-4: var(--bo-faint); --ed-edge: var(--bo-edge);
  --ed-gold: var(--bo-gold); --ed-gold-hi: var(--bo-gold-hi); --ed-gold-fill: var(--bo-gold); --ed-thumb: #e4d9bb; --ed-rule-2: var(--bo-line);
}
.boTopBar .edVolumeRange { width: 72px; }
.boTopBar .edVolumeValue { min-width: 2.9em; }

.boStatus {
  position: relative; width: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--bo-panel); border: 1px solid var(--bo-edge); cursor: default; outline: none;
}
.boStatus:focus-visible { outline: 1px solid var(--bo-gold); outline-offset: 1px; }
.boDot { width: 8px; height: 8px; border-radius: 50%; background: var(--bo-muted); }
.boDot[data-state="ok"] { background: var(--bo-ok); }
.boDot[data-state="synced"] { background: var(--bo-sync); }
.boDot[data-state="error"] { background: var(--bo-bad); box-shadow: 0 0 0 3px rgba(214, 96, 74, 0.22); }
.boDot[data-state="loading"] { animation: boPulse 1.1s ease-in-out infinite; }
.boDot.flash { animation: boFlash 0.6s ease-out 3; }
@keyframes boPulse { 50% { opacity: 0.35; } }
@keyframes boFlash {
  0% { box-shadow: 0 0 0 0 rgba(134, 201, 220, 0.75); }
  100% { box-shadow: 0 0 0 9px rgba(134, 201, 220, 0); }
}
.boStatusTip {
  position: absolute; top: calc(100% + 6px); right: -1px; width: 300px;
  padding: 10px 14px 11px; display: none; z-index: 7; background: var(--bo-panel-solid); border: 1px solid var(--bo-edge);
  font-size: 12px; line-height: 1.5; color: var(--bo-text); white-space: normal; user-select: text;
}
.boStatus:hover .boStatusTip, .boStatus:focus .boStatusTip { display: block; }
/* 状态点与提示框之间 6 px 的空隙：透明的一条把悬停接上，鼠标能移进提示框里选中、复制错误原因。 */
.boStatusTip::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 7px; }
.boTipHead { color: var(--bo-bright); font-weight: 700; letter-spacing: 0.06em; margin-bottom: 4px; }
.boStatus[data-state="error"] .boTipHead { color: var(--bo-bad); }
.boTipLine { overflow-wrap: anywhere; }
.boTipLine + .boTipLine { margin-top: 2px; }
.boTipLine.muted { color: var(--bo-muted); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bo-line); }

/* --- 左下：小地图 --------------------------------------------------------- */
.boMini {
  position: absolute; left: 16px; bottom: 16px; width: 220px; height: 220px; box-sizing: content-box;
  border: 1px solid var(--bo-edge); background: #11120e; cursor: pointer;
  box-shadow: 0 20px 50px #0009;
}
.boMini:hover { border-color: #cdb77b88; }
.boMiniCanvas { display: block; width: 100%; height: 100%; }
.boMiniHint {
  position: absolute; right: 5px; bottom: 5px;
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 3px;
  font-size: 11px; line-height: 15px; letter-spacing: 0.06em; color: var(--bo-text); background: #080907d9;
}

/* --- 底部：导航栏 --------------------------------------------------------- */
.boNav {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  /* §4：min(1100 px, 62vw)；窄屏再让出左下小地图（16 + 222）两侧各 16 px，不贴上去 */
  width: min(1140px, 64vw, calc(100vw - 508px)); height: 58px; padding: 0 12px 0 10px; z-index: 6;
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px 30px auto; align-items: center; column-gap: 10px;
}
.boNavBtn { width: 30px; height: 30px; color: var(--bo-text); border-color: var(--bo-edge); background: #13140b55; }
.boNavBtn:hover { border-color: #cdb77b88; }
.boTrackWrap { position: relative; height: 44px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; touch-action: none; }
.boTrack { display: flex; gap: 3px; height: 20px; align-items: center; }
/* 段宽按关键帧数，但每段至少 16 px（阶段号读得出）；下面那排阶段号用同一套 flex 参数，逐段对齐 */
.boSeg { position: relative; flex: 1 1 0; min-width: 16px; height: 20px; }
.boSegLine, .boSegFill { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; }
.boSegLine { right: 0; background: #a4a59450; }
.boSegFill { width: 0; background: var(--bo-gold-fill); }
.boSeg.passed .boSegFill { width: 100%; }
/* 关键帧刻度：时间轴上的小菱形 */
.boTick {
  position: absolute; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  transform: rotate(45deg); background: #a4a594aa;
  transition: transform 0.1s ease, background-color 0.1s linear;
}
.boTick.passed { background: var(--bo-gold-fill); }
.boTick.hover { background: var(--bo-bright); transform: rotate(45deg) scale(1.6); }
.boTick.current { opacity: 0; }
.boKnob {
  position: absolute; top: 50%; width: 7px; height: 18px; margin: -9px 0 0 -3.5px; z-index: 2; border-radius: 1px;
  background: #e4d9bb;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 12px rgba(223, 189, 104, 0.3);
}
.boGhost { background: transparent; border: 1px solid var(--bo-gold); box-shadow: none; opacity: 0.85; z-index: 3; }
.boNav.playing .boKnob:not(.boGhost) { animation: boKnobPlay 0.9s ease-in-out infinite; }
@keyframes boKnobPlay { 50% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 18px rgba(223, 189, 104, 0.75); } }
.boStageNums { display: flex; gap: 3px; margin-top: 3px; }
.boStageNum {
  flex: 1 1 0; min-width: 16px; overflow: hidden; text-align: center;
  font: 10px/12px var(--bo-num); color: #8d8f86; font-variant-numeric: tabular-nums;
}
.boStageNum.current { color: var(--bo-gold); }
.boNavTip {
  position: absolute; bottom: calc(100% + 2px); left: 0; transform: translateX(-50%);
  padding: 4px 9px; white-space: nowrap; pointer-events: none;
  font: 12px/1.4 var(--bo-font); color: var(--bo-bright); letter-spacing: 0.06em;
  background: var(--bo-panel-solid); border: 1px solid var(--bo-edge);
  opacity: 0; transition: opacity 0.08s linear;
}
.boNavTip.on { opacity: 1; }
.boNavSide { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; min-width: 128px; }
.boCounter { display: flex; align-items: center; gap: 8px; }
.boCount { font: 600 13px/16px var(--bo-num); color: var(--bo-bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.boFast {
  padding: 0 6px; font-size: 11px; line-height: 16px; color: var(--bo-bright); white-space: nowrap;
  border: 1px solid #cdb77b88; color: var(--bo-gold-text); background: var(--bo-sel-strong);
}
.boFast:empty { display: none; }
.boKeys { display: flex; align-items: center; gap: 3px; font-size: 10px; line-height: 13px; letter-spacing: 0.06em; color: var(--bo-faint); white-space: nowrap; }
.boKeys .boKbd { font-size: 9px; line-height: 12px; min-width: 13px; color: var(--bo-muted); }
.boKeys > span { margin-right: 6px; }
.boKeys > span:last-child { margin-right: 0; }
.boNav.empty .boTrackWrap { cursor: default; }

/* --- 全关总图外框 --------------------------------------------------------- */
/* 遮罩盖满整屏（导航栏两边那条也盖住，鼠标落不到后面的游戏画面上；点遮罩空处关图）；
   图框只占导航栏以上：导航栏叠在遮罩上面、照样能点，地图开着也能切关键帧 */
.boMapOverlay {
  position: absolute; inset: 0; padding-bottom: var(--bo-nav-room, 86px); z-index: 5; display: none;
  align-items: center; justify-content: center;
  background: rgba(3, 4, 4, 0.38);
}
.boMapOverlay.open { display: flex; }
/* 右上角是游戏的齿轮按钮（距右边约 52 px）：外框两边各让 60 px，窄窗口里关闭叉才不被它压住 */
.boMapFrame { width: min(92vw, calc(100vw - 120px)); height: calc(100% - 24px); display: flex; flex-direction: column; background: var(--bo-panel-solid); border: 1px solid var(--bo-edge); }
.boMapHead {
  flex: 0 0 44px; display: flex; align-items: center; gap: 22px;
  padding: 0 7px 0 18px; border-bottom: 1px solid var(--bo-line-strong);
}
.boMapTitle { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.boMapName { font: 700 17px/1.3 var(--bo-serif); color: var(--bo-bright); letter-spacing: 0.1em; }
.boMapLevel { font-size: 12px; color: var(--bo-muted); letter-spacing: 0.12em; }
.boLegend { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--bo-muted); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; }
.boLegendItem { display: inline-flex; align-items: center; gap: 6px; }
.boGlyph { position: relative; display: inline-block; width: 11px; height: 11px; flex: 0 0 auto; }
.boGlyph.enemy { width: 0; height: 0; border-left: 5.5px solid transparent; border-right: 5.5px solid transparent; border-bottom: 10px solid var(--bo-enemy); }
.boGlyph.friend { width: 8px; height: 8px; border-radius: 50%; background: var(--bo-friend); box-shadow: 0 0 0 1.5px #e6dfcd; }
.boGlyph.civ { width: 8px; height: 8px; border-radius: 50%; background: var(--bo-civ); box-shadow: 0 0 0 1.5px #e6dfcd; }
.boGlyph.poi { width: 8px; height: 8px; background: var(--bo-mapgold); transform: rotate(45deg); box-shadow: 0 0 0 1px #26231f; }
.boGlyph.next { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bo-mapgold); }
.boGlyph.player { width: 11px; height: 12px; background: var(--bo-mapgold); clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%); }
.boGlyph.kf { width: 11px; height: 11px; border-radius: 50%; background: #26231f; box-shadow: 0 0 0 1.5px #e6dfcd; }
/* 地标（2026-10-20）：kind 色的小方块 + 墨边（图例里用门的青色代表） */
.boGlyph.landmark { width: 8px; height: 8px; background: #3fe0e0; box-shadow: 0 0 0 1.2px #26231f; }
.boMapHint { margin-left: auto; font-size: 11.5px; color: var(--bo-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.boClose { color: var(--bo-text); }
.boMapBody { position: relative; flex: 1 1 auto; min-height: 0; }
.boMapCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.boMapCanvas.dragging { cursor: grabbing; }
.boMapCanvas:focus { outline: none; }

/* --- 全关总图 · 编辑布设（§4.4，Script_EditorBlockoutMapEdit） ------------------- */
/* 图头里的开关：开着时金边 + 选中条；右上角的数字 = 挪了几处 + 几个标记 */
.boEditToggle { flex: 0 0 auto; height: 30px; padding: 0 10px 0 8px; color: var(--bo-text); border-color: var(--bo-edge); letter-spacing: 0.08em; font-size: 12.5px; }
.boEditToggle.on { color: var(--bo-gold-hi); border-color: var(--bo-gold); background: var(--bo-sel-strong); box-shadow: inset 2px 0 0 var(--bo-gold); }
.boEditBadge { min-width: 16px; height: 16px; padding: 0 4px; font: 600 10px/16px var(--bo-num); text-align: center; color: #1b1a14; background: var(--bo-gold-fill); }
.boEditBadge:empty { display: none; }
.boMapHead > .boEditToggle + .boClose { margin-left: -14px; }

.boEditBar, .boEditInspector { position: absolute; z-index: 2; box-shadow: 0 12px 32px #0009; }
.boEditBar { top: 10px; left: 10px; display: flex; align-items: center; gap: 2px; padding: 3px; }
.boEditTool.on { color: var(--bo-gold-hi); background: var(--bo-sel-strong); box-shadow: inset 0 -2px 0 var(--bo-gold); }
.boEditSep { width: 1px; height: 18px; margin: 0 5px; background: var(--bo-line-strong); }
.boEditCount { padding: 0 8px 0 4px; font: 12px/30px var(--bo-num); color: var(--bo-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.boEditExport {
  height: 30px; margin-left: 6px; padding: 0 12px 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
  color: #1b1a14; background: var(--bo-gold-fill); border-color: var(--bo-gold);
}
.boEditExport:hover { color: #1b1a14; background: var(--bo-gold-hi); }
.boEditExport:disabled { color: #1b1a14; background: var(--bo-gold-fill); }

.boEditInspector { top: 10px; right: 10px; width: 272px; max-height: calc(100% - 20px); overflow: auto; padding: 10px 12px 12px; }
.boEditHead { font: 700 14px/1.35 var(--bo-serif); color: var(--bo-bright); letter-spacing: 0.06em; overflow-wrap: anywhere; }
.boEditSub { margin-top: 2px; font: 11px/1.45 var(--bo-num); color: var(--bo-faint); overflow-wrap: anywhere; }
.boEditHelp { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--bo-muted); padding-left: 8px; border-left: 1px solid var(--bo-line-strong); }
.boEditGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.boEditField { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.boEditLabel { font-size: 10.5px; letter-spacing: 0.1em; color: var(--bo-faint); }
.boEditInput, .boEditText {
  width: 100%; min-width: 0; margin: 0; padding: 4px 6px; border-radius: 0;
  font: 12px/1.4 var(--bo-num); color: var(--bo-bright); background: #0b0c0acc;
  border: 1px solid var(--bo-line-strong); outline: none; user-select: text;
}
.boEditInput:focus, .boEditText:focus { border-color: var(--bo-gold); }
.boEditText { display: block; margin-top: 10px; resize: vertical; min-height: 64px; font-family: var(--bo-font); font-size: 12.5px; line-height: 1.5; }
.boEditText::placeholder { color: #8a8c80; }
.boEditFrom { margin-top: 6px; font: 11px/1.4 var(--bo-num); color: var(--bo-faint); }
.boEditActions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.boEditAct { height: 26px; padding: 0 9px 0 7px; font-size: 12px; color: var(--bo-text); border-color: var(--bo-edge); }
.boEditAct svg { width: 14px; height: 14px; }
.boEditAct.danger:hover { color: #ffb4a4; }

/* --- 复制当前位置的备用框（剪贴板写不进去时才出现，§4.2） ------------------------- */
.boCopyBox {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 7;
  width: min(720px, calc(100vw - 32px)); display: flex; flex-direction: column;
  background: var(--bo-panel-solid); border: 1px solid var(--bo-edge); box-shadow: 0 20px 50px #000b;
}
.boCopyHead { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--bo-line); }
.boCopyTitle { font: 700 15px/1.3 var(--bo-serif); color: var(--bo-bright); letter-spacing: 0.08em; white-space: nowrap; }
.boCopyHint { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--bo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boCopyText {
  display: block; width: 100%; height: min(320px, 50vh); margin: 0; padding: 10px 14px; resize: none;
  border: 0; outline: none; background: transparent; color: var(--bo-text);
  font: 12px/1.6 var(--bo-num); white-space: pre; overflow: auto;
}

/* --- 中上：提示条 --------------------------------------------------------- */
.boToasts {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
}
.boToast {
  display: flex; align-items: center; gap: 10px; max-width: min(560px, 60vw);
  padding: 7px 16px 7px 10px; font-size: 13px; color: var(--bo-bright); letter-spacing: 0.06em;
  background: var(--bo-panel-solid); border: 1px solid var(--bo-edge);
  box-shadow: 0 12px 32px #0009;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease;
}
.boToast.on { opacity: 1; transform: none; }
.boToast.out { opacity: 0; transform: translateY(-4px); transition-duration: 0.35s; }
.boToastMark { flex: 0 0 auto; width: 3px; height: 15px; background: var(--bo-muted); }
.boToast.ok .boToastMark { background: var(--bo-ok); }
.boToast.warn .boToastMark { background: var(--bo-gold); }
.boToast.error .boToastMark { background: var(--bo-bad); }

/* --- 窄屏（≤ 1366 px）：卡片与小地图收一点，导航栏不碰小地图 ------------------ */
@media (max-width: 1366px) {
  .boCard { width: 352px; }
}
@media (max-height: 760px) {
  .boCard { padding-bottom: 10px; }
  .boHow { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .boRoot * { transition-duration: 0s !important; animation: none !important; }
}

/* --- 编辑器模式下的游戏 HUD：只留准星、弹药、受伤反馈（§4） -------------------- */
body.blockoutMode #hud :is(.hudTop, .hudBrief, .hudTitle, .hudSubtitle, .hudMinimap, .hudMarkers,
  .hudMissionGuide, .hudMissionArea, .hudMissionReturn, .hudForceStatus, .hudHint, .hudActions,
  .hudNote, .hudEpilogue, .hudCinematicPrompt) { display: none !important; }
body.blockoutMode #hud .hudFps { top: 56px; left: auto; right: 18px; }

/* --- 小窗口（应用内浏览器面板、半屏窗口）：收紧尺寸，导航栏占满小地图右边的底边 ---------------- */
@media (max-width: 1099px), (max-height: 719px) {
  .boCard { width: 300px; padding: 9px 10px 10px 12px; }
  .boStageNo { font-size: 18px; }
  .boStageTitle { font-size: 14px; }
  .boHow { margin-top: 7px; }
  .boChip { font-size: 11px; }
  .boMini { width: 150px; height: 150px; }
  .boNav {
    left: 178px; right: 12px; transform: none; width: auto; height: 52px;
    grid-template-columns: 28px minmax(0, 1fr) 28px 28px auto; column-gap: 8px; padding: 0 10px 0 8px;
  }
  .boNavBtn { width: 28px; height: 28px; }
  .boNavSide { min-width: 0; }
  .boKeys { display: none; }
  .boRoot { --bo-nav-room: 78px; }
  .boSeg, .boStageNum { min-width: 10px; }
  .boStageNum { font-size: 9px; }
  /* 导航栏占满了底边：右下角的弹药与状态读数抬到它上面，不被盖住 */
  body.blockoutMode #hud .hudCombat { bottom: 80px; }
  body.blockoutMode #hud .hudState { bottom: 156px; }
}
/* 高度不够时卡片只留「此时 / 下一步」，提示标签与备注让给小地图 */
@media (max-height: 600px) {
  .boHow, .boNotes { display: none; }
}
/* 很窄时右上那条挪到齿轮下面，不压左上的卡片 */
@media (max-width: 899px) {
  .boTopBar { top: 62px; right: 14px; }
  .boTopBar :is(.edVolumeRange, .edVolumeValue) { display: none; }
  .boLevelBtn { min-width: 0; max-width: 150px; }
  .boEraBanner { top: 104px; right: 14px; }
  .boLevelMenu { min-width: min(380px, calc(100vw - 28px)); }
  body.blockoutMode #hud .hudFps { top: 104px; }
}


/* --- 预演（§14.2，2026-10-18） ------------------------------------------- */
/* 卡片右上的「预演」按钮：同复制 / 记机位两个按钮，图标是 SVG 三角 */
.boPrevizBtn { flex: 0 0 auto; margin: -3px 0 0 0; color: var(--bo-gold); border-color: #cdb77b88; background: #13140b55; }
.boPrevizBtn:hover { border-color: var(--bo-gold); }
/* 播放中：卡片只剩「预演 · 标题 · 进度」那一块 */
.boPrevizBar { display: none; }
.boCard.previz > :not(.boPrevizBar) { display: none; }
.boCard.previz .boPrevizBar { display: block; }
.boPrevizTop { display: flex; align-items: center; gap: 10px; }
.boPrevizTag {
  flex: 0 0 auto; padding: 0 7px; font-size: 11.5px; line-height: 18px; letter-spacing: 0.16em;
  color: #15130c; background: var(--bo-gold-fill);
}
.boPrevizTitle { flex: 1 1 auto; min-width: 0; font: 700 15px/1.3 var(--bo-serif); color: var(--bo-bright); letter-spacing: 0.08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boPrevizTime { flex: 0 0 auto; font: 12px/18px var(--bo-num); color: var(--bo-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.boPrevizStop { flex: 0 0 auto; width: 26px; height: 26px; margin-right: -4px; color: var(--bo-text); border-color: var(--bo-edge); background: #13140b55; }
.boPrevizTrack { position: relative; height: 2px; margin: 11px 0 9px; background: #a4a59450; }
.boPrevizFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--bo-gold-fill); }
.boPrevizFill::after {
  content: ""; position: absolute; right: -3px; top: -6px; width: 6px; height: 14px; border-radius: 1px;
  background: #e4d9bb; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.boPrevizHint { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 15px; color: var(--bo-faint); letter-spacing: 0.06em; }
/* 导航栏不响应 */
.boNav.locked { pointer-events: none !important; opacity: 0.45; }
.boKeysPreviz { display: inline-flex; align-items: center; gap: 3px; }

/* --- 飞行观察（§4.3，2026-10-21） ----------------------------------------- */
/* 卡片右上的「飞行观察」按钮：同复制 / 记机位，进了飞行就亮金边 */
.boFlyBtn { flex: 0 0 auto; margin: -3px 0 0 0; color: var(--bo-text); border-color: var(--bo-edge); background: #13140b55; }
.boFlyBtn:hover { border-color: #cdb77b88; }
.boFlyBtn.on { color: var(--bo-gold); border-color: var(--bo-gold); background: var(--bo-sel-strong); }
/* 飞行中：卡片底多一条（预演播放时整张卡片只剩预演条，这一条跟着藏） */
.boFlyBar { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--bo-line-strong); }
.boFlyTop { display: flex; align-items: center; gap: 10px; }
.boFlyTag {
  flex: 0 0 auto; padding: 0 7px; font-size: 11.5px; line-height: 18px; letter-spacing: 0.16em;
  color: #15130c; background: var(--bo-gold-fill);
}
.boFlyName { flex: 1 1 auto; min-width: 0; font: 700 14px/1.3 var(--bo-serif); color: var(--bo-bright); letter-spacing: 0.08em; white-space: nowrap; }
.boFlySpeed { flex: 0 0 auto; font: 12px/18px var(--bo-num); color: var(--bo-gold-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.boFlyStop { flex: 0 0 auto; width: 26px; height: 26px; margin-right: -4px; color: var(--bo-text); border-color: var(--bo-edge); background: #13140b55; }
.boFlyPos { margin-top: 7px; font: 12px/17px var(--bo-num); color: var(--bo-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boFlyHint { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; margin-top: 6px; font-size: 11px; line-height: 15px; color: var(--bo-faint); letter-spacing: 0.06em; }
.boFlyHint > span { margin-right: 5px; }
.boFlyHint > span:last-child { margin-right: 0; }
.boKeysFly .boKbd { color: var(--bo-muted); }
/* 飞行中导航栏的「飞行」提示变金，提醒现在是相机在动 */
.flyOn .boKeysFly { color: var(--bo-gold-text); }
.flyOn .boKeysFly .boKbd { color: var(--bo-gold); border-color: #cdb77b88; }
/* 遮罩：白光 / 黑场盖 3D 画面，卡片、字幕、导航栏在它上面 */
.boPrevizOverlay { position: absolute; inset: 0; pointer-events: none; }
.boPrevizBlack, .boPrevizFlash { position: absolute; inset: 0; opacity: 0; }
.boPrevizBlack { background: #000; }
.boPrevizFlash { background: #fffdf6; }
/* 说明字（非台词，如「（耳鸣）」）：弱显示，字幕上面一点 */
.boPrevizCaption {
  position: absolute; left: 50%; bottom: 168px; transform: translateX(-50%); max-width: min(760px, 70vw);
  font: 14px/1.5 var(--bo-serif); color: #d8d6caCC; letter-spacing: 0.12em; text-align: center; pointer-events: none;
  text-shadow: 0 1px 3px #000c;
}
/* 字幕：底部居中、导航栏上方，「说话人 · 字幕」 */
.boPrevizSubs {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(880px, 76vw);
  display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none;
}
.boPrevizSub {
  display: inline-flex; align-items: baseline; gap: 10px; max-width: 100%; padding: 6px 16px 7px;
  background: linear-gradient(90deg, #08090700, #080907c8 12%, #080907c8 88%, #08090700);
  font: 19px/1.45 var(--bo-serif); color: var(--bo-bright); letter-spacing: 0.06em; text-align: center;
  text-shadow: 0 1px 2px #000;
}
.boPrevizSub.aside { font-size: 15px; color: var(--bo-muted); padding-top: 3px; padding-bottom: 3px; }
.boPrevizWho { flex: 0 0 auto; color: var(--bo-gold-text); font-size: 0.82em; letter-spacing: 0.14em; }
.boPrevizWho::after { content: "·"; margin-left: 10px; color: var(--bo-faint); }
/* 预演中游戏 HUD 整个让开（准星、弹药、受伤反馈都不该出现在镜头里） */
body.blockoutPreviz #hud { visibility: hidden !important; }
@media (max-width: 1099px), (max-height: 719px) {
  .boPrevizSubs { bottom: 84px; width: calc(100vw - 200px); left: calc(50% + 83px); }
  .boPrevizSub { font-size: 16px; }
  .boPrevizCaption { bottom: 140px; }
}

/* --- Timeline 过场面板（Script_EditorTimeline，docs/Data_EditorSuite.md「Timeline 过场」） ----------------------
   底部一条：头一行走带，下面「段 / 镜头 / 台词 / 事件」四条轨，整条时间轴铺满一屏宽。
   面板开着时导航栏与小地图让开（Timeline 就是这时候的导航），字幕抬到面板上面。 */
.boTimeline {
  position: absolute; left: 16px; right: 16px; bottom: 16px; pointer-events: auto;
  background: var(--bo-panel); border: 1px solid var(--bo-edge); box-shadow: 0 20px 50px #0009;
}
.boRoot.boTimelineOpen :is(.boNav, .boMini) { display: none; }
.boRoot.boTimelineOpen .boPrevizSubs { bottom: 186px; }
.boRoot.boTimelineOpen .boPrevizCaption { bottom: 250px; }
.tlHead { display: flex; align-items: center; gap: 14px; height: 34px; padding-right: 6px; border-bottom: 1px solid var(--bo-line-strong); }
.tlName {
  align-self: stretch; display: flex; align-items: center; padding: 0 14px 0 12px;
  border-left: 2px solid var(--bo-gold); background: var(--bo-sel);
  font: 15px/1 var(--bo-serif); color: var(--bo-bright); letter-spacing: 0.16em;
}
.tlTitle { color: var(--bo-muted); font-size: 12px; letter-spacing: 0.08em; white-space: nowrap; }
.tlSeg { flex: 1 1 auto; min-width: 0; color: var(--bo-gold-text); font-size: 12px; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlTransport { display: flex; gap: 2px; }
.tlBtn {
  width: 30px; height: 26px; padding: 0; border: 0; border-left: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--bo-text); font: 14px/1 var(--bo-font); cursor: pointer;
}
.tlBtn:hover { background: var(--bo-sel-strong); border-left-color: var(--bo-gold); color: var(--bo-bright); }
.tlTime { min-width: 148px; text-align: right; font: 12px/1 var(--bo-num); color: var(--bo-bright); letter-spacing: 0.04em; }
.tlStatus { color: var(--bo-faint); font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; cursor: default; }
.tlStatus.bad { color: var(--bo-bad); }
.tlClose { color: var(--bo-muted); }
.tlBody { display: grid; grid-template-columns: 58px 1fr; padding: 6px 14px 10px 0; }
.tlLabels { display: flex; flex-direction: column; }
.tlLabel { height: 21px; padding-right: 12px; text-align: right; font-size: 11px; line-height: 21px; letter-spacing: 0.14em; color: var(--bo-faint); }
.tlLabel:first-child { height: 16px; line-height: 16px; }
.tlLanes { position: relative; cursor: pointer; touch-action: none; }
.tlRuler { position: relative; height: 16px; border-bottom: 1px solid var(--bo-line); }
.tlTick { position: absolute; bottom: 0; width: 1px; height: 4px; background: var(--bo-line-strong); }
.tlTick.major { height: 8px; background: #c1bdab88; }
.tlTick b { position: absolute; left: 4px; bottom: 3px; font: 10px/1 var(--bo-num); font-weight: 400; color: var(--bo-faint); white-space: nowrap; }
.tlLane { position: relative; height: 18px; margin-top: 3px; background: #ffffff05; }
.tlItem {
  position: absolute; top: 2px; bottom: 2px; min-width: 2px; overflow: hidden; white-space: nowrap;
  font-size: 11px; line-height: 14px;
}
.tlItem.segItem { top: 0; bottom: 0; line-height: 18px; padding-left: 7px; background: var(--bo-sel-strong); border-left: 2px solid var(--bo-gold); color: var(--bo-gold-text); letter-spacing: 0.05em; }
.tlItem.shotItem { background: #c1bdab2a; border-left: 1px solid #c1bdab99; }
.tlItem.shotItem.alt { background: #c1bdab16; }
.tlItem.shotItem.move { background: #86c9dc2a; border-left-color: var(--bo-sync); }
.tlItem.lineItem { background: #e6cb913d; border-left: 1px solid var(--bo-gold); }
.tlItem.lineItem.bad { background: #d6604a55; border-left-color: var(--bo-bad); }
.tlItem.eventItem.range { background: #86c9dc26; border-left: 1px solid var(--bo-sync); }
.tlItem.eventItem.mark { width: 2px; top: 3px; bottom: 3px; background: var(--bo-sync); }
.tlItem.ev-black.range { background: #000000a8; border-left-color: #c1bdab66; }
.tlItem.ev-flash.range { background: #fffdf640; border-left-color: #fffdf6; }
.tlItem.ev-explosion, .tlItem.ev-shake.range { background: #d6604a66; border-left-color: var(--bo-bad); }
.tlItem.ev-explosion.mark { background: var(--bo-bad); }
.tlItem.ev-signal.mark { background: var(--bo-gold); }
.tlItem.ev-sfx.mark { background: #aaa99b; }
.tlItem.ev-slowmo { background: #8fca7a2a; border-left: 1px solid var(--bo-ok); }
.tlItem:hover { filter: brightness(1.45); }
.tlPlayhead { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--bo-gold-hi); pointer-events: none; box-shadow: 0 0 4px #ffe0a180; }
.tlPlayhead::before { content: ""; position: absolute; top: 0; left: -4px; width: 9px; height: 7px; background: var(--bo-gold-hi); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* --- 手机验收（§4.5，2026-10-23，Script_EditorBlockoutTouch） ------------------------------
   触屏层开着时（根上 boTouch、body 上 blockoutTouch）只动界面，游戏画面一样不动（枪、手、画质照 PC）：
   卡片收成一行（点标题展开）、右上「图层」按钮收起关卡下拉 / 图层开关 / 音量、小地图让位给左下摇杆、
   右下预演 / 飞行 / 地图大按钮（飞行中左边再一列升 / 降 / 加速）、导航栏铺满底边、按键提示与悬停提示收起。
   刘海与底部横条：index.html 的 viewport-fit=cover 下用 env(safe-area-inset-*) 留边。 */
body.blockoutTouch { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
/* iOS 的 100vh 是地址栏收起后的高度，比看得见的高：画布按可见高度铺（渲染尺寸本来取的就是 innerHeight，不铺会被纵向拉伸） */
body.blockoutTouch canvas#view { height: 100vh; height: 100dvh; }
/* 转视角的那层透明板：画布与 HUD 之上、编辑器界面（z 30）与开发工具（z 40）之下；加载画面还在时不出 */
.boTouchLook {
  position: fixed; inset: 0; z-index: 1;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#boot:not(.gone) ~ .boTouchLook { display: none; }

.boRoot.boTouch {
  --bo-gutter-l: max(12px, env(safe-area-inset-left));
  --bo-gutter-r: max(12px, env(safe-area-inset-right));
  --bo-gutter-t: max(12px, env(safe-area-inset-top));
  --bo-gutter-b: max(10px, env(safe-area-inset-bottom));
  --bo-touch-nav-h: 58px;
  /* 摇杆与大按钮的底边：导航栏上方再空 12 px */
  --bo-touch-above-nav: calc(var(--bo-gutter-b) + var(--bo-touch-nav-h) + 12px);
  --bo-nav-room: calc(var(--bo-gutter-b) + var(--bo-touch-nav-h) + 10px);
  -webkit-touch-callout: none;
}
.boTouch :is(.boStick, .boTouchActions, .boTouchFly, .boTouchMenuBtn) { pointer-events: auto; }
.boTouch :is(.boBtn, .boTrackWrap, .boCardTitle) { touch-action: manipulation; }
/* 悬停提示在触屏上会粘住不走：一律不出 */
.boTouch [data-tip]::after { display: none !important; }
/* 收起：按键提示、小地图（让位给摇杆，地图走右下按钮）、记机位（线上只能存本机草稿）、
   卡片上的预演 / 飞行钮（挪到右下大按钮）、编辑布设与图例（手机上不做批注） */
.boTouch :is(.boKeys, .boMini, .boSave, .boPrevizBtn, .boFlyBtn, .boFlyHint, .boPrevizHint, .boEditToggle, .boLegend) { display: none !important; }
/* 游戏 HUD：弹药与状态读数挪不开就收起（准星、受伤反馈、帧率照留） */
body.blockoutTouch.blockoutMode #hud :is(.hudCombat, .hudState) { display: none !important; }

/* 卡片：左上；收起时只剩一行（阶段号 + 标题 + 站位名 + 展开箭头），点这一行展开 / 收起 */
.boTouch .boCard {
  left: var(--bo-gutter-l); top: var(--bo-gutter-t);
  width: min(380px, calc(100vw - var(--bo-gutter-l) - 150px));
  max-height: calc(100dvh - var(--bo-gutter-t) - var(--bo-touch-above-nav) - 136px);
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 8px 8px 10px 12px;
}
.boTouch .boCardHead { align-items: center; }
.boTouch .boCardTitle { cursor: pointer; flex-wrap: nowrap; align-items: center; min-height: 36px; padding-top: 0; }
.boTouch :is(.boStageTitle, .boPlace) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boTouch .boStageTitle { flex: 0 1 auto; }
.boTouch .boPlace { flex: 1 1 0; }
.boCardChevron { flex: 0 0 auto; display: inline-flex; margin-left: auto; color: var(--bo-muted); transition: transform 0.15s ease; }
.boCardChevron svg { width: 16px; height: 16px; }
.boTouch .boCard:not(.collapsed) .boCardChevron { transform: rotate(180deg); }
.boTouch .boCopy { width: 40px; height: 40px; margin: 0; }
.boTouch .boCard.collapsed > :not(.boCardHead):not(.boFlyBar):not(.boPrevizBar):not(.boEmpty) { display: none; }
.boTouch .boCard.collapsed .boCardHead { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.boTouch .boCard.collapsed .boFlyBar { margin-top: 8px; padding-top: 7px; }
.boTouch .boCard.collapsed .boFlyPos { display: none; }
.boTouch .boFlyStop, .boTouch .boPrevizStop { width: 40px; height: 40px; }

/* 右上「图层」按钮（游戏齿轮的左边，与齿轮同高）；展开的面板里竖排关卡下拉、图层开关、音量、配置状态 */
.boTouchMenuBtn {
  position: absolute; top: 14px; right: 62px; height: 34px; padding: 0 10px 0 7px; gap: 5px; z-index: 8;
  background: var(--bo-panel); border: 1px solid var(--bo-edge); color: var(--bo-text);
  font-size: 12.5px; letter-spacing: 0.1em;
}
.boTouchMenuBtn.on { color: var(--bo-gold); border-color: var(--bo-gold); background: var(--bo-sel-strong), var(--bo-panel-solid); }
.boTouchIcon { display: inline-flex; }
.boTouchIcon svg { width: 20px; height: 20px; display: block; }
.boTouch .boTopBar { display: none; }
.boTouch.touchMenu .boTopBar {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; z-index: 8;
  top: 56px; right: var(--bo-gutter-r); height: auto; width: min(320px, calc(100vw - var(--bo-gutter-l) - var(--bo-gutter-r)));
  max-height: calc(100dvh - 56px - var(--bo-nav-room)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 10px; background: var(--bo-panel-solid); border: 1px solid var(--bo-edge); box-shadow: 0 20px 50px #000b;
}
.boTouch .boLevelBtn { width: 100%; max-width: none; min-width: 0; height: 44px; }
/* 面板会滚动（overflow 会裁掉绝对定位的下拉）：关卡列表改成就地展开 */
.boTouch .boLevelMenu { position: static; min-width: 0; margin-top: 6px; box-shadow: none; max-height: 46dvh; overflow-y: auto; touch-action: pan-y; }
.boTouch .boLevelItem { min-height: 44px; white-space: normal; }
.boTouch .boLevelNote { max-width: none; }
.boTouch .boLayers { justify-content: stretch; }
.boTouch .boLayer { flex: 1 1 0; width: auto; height: 44px; }
.boTouch .boTopBar .edVolume { height: 44px; padding: 0 12px 0 6px; }
.boTouch .boTopBar .edVolumeRange { display: block; flex: 1 1 auto; width: auto; height: 32px; }
.boTouch .boTopBar .edVolumeValue { display: inline; }
.boTouch .boTopBar .edVolumeMute { width: 34px; height: 34px; }
.boTouch .boStatus { width: 100%; height: 34px; justify-content: flex-start; padding: 0 12px; }
.boTouch .boStatusTip { position: static; width: auto; margin-top: 6px; }
.boTouch .boStatus:focus { flex-direction: column; align-items: flex-start; justify-content: center; height: auto; padding: 10px 12px; }
.boTouch .boEraBanner { top: 56px; right: var(--bo-gutter-r); }

/* 导航栏：铺满底边，按钮 44 px */
.boTouch .boNav {
  left: var(--bo-gutter-l); right: var(--bo-gutter-r); bottom: var(--bo-gutter-b); transform: none; width: auto;
  height: var(--bo-touch-nav-h); padding: 0 8px; column-gap: 8px;
  grid-template-columns: 44px minmax(0, 1fr) 44px 44px auto;
}
.boTouch .boNavBtn { width: 44px; height: 44px; }
.boTouch .boNavBtn svg { width: 20px; height: 20px; }
.boTouch .boTrackWrap { height: 52px; }
.boTouch :is(.boSeg, .boStageNum) { min-width: 8px; }
.boTouch .boKnob { width: 9px; height: 24px; margin: -12px 0 0 -4.5px; }
.boTouch .boNavSide { min-width: 0; }

/* 摇杆：左下，导航栏上方 */
.boStick {
  position: absolute; left: calc(var(--bo-gutter-l) + 6px); bottom: var(--bo-touch-above-nav); z-index: 4;
  width: 124px; height: 124px; touch-action: none;
}
.boStickRing {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid #c1bdab66; background: radial-gradient(circle, #0809074d 0, #080907a6 72%);
  box-shadow: 0 10px 30px #0006;
}
.boStickKnob {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: #e4d9bbc4; border: 1px solid #0009; box-shadow: 0 4px 14px #0008;
  transition: transform 0.12s ease-out;
}
.boStick.active .boStickKnob { transition: none; background: #ecdcb2; }
/* 拖出圈外 = 冲刺 / 飞行加速：圈亮金 */
.boStick.over .boStickRing { border-color: var(--bo-gold); box-shadow: 0 0 0 3px #edca8340, 0 10px 30px #0006; }

/* 右下大按钮：一列预演 / 飞行 / 地图；飞行中左边再一列升 / 降 / 加速 */
.boTouchActions, .boTouchFly {
  position: absolute; bottom: var(--bo-touch-above-nav); z-index: 4;
  display: flex; flex-direction: column; gap: 8px;
}
.boTouchActions { right: calc(var(--bo-gutter-r) + 4px); }
.boTouchFly { right: calc(var(--bo-gutter-r) + 4px + 58px + 10px); display: none; }
.touchFly .boTouchFly { display: flex; }
.boTouchBtn {
  width: 58px; height: 54px; flex-direction: column; gap: 2px;
  background: var(--bo-panel); border: 1px solid var(--bo-edge); color: var(--bo-text);
  box-shadow: 0 10px 28px #0008;
}
.boTouchBtn:hover { background: var(--bo-panel); color: var(--bo-text); }
.boTouchLabel { font-size: 11px; line-height: 13px; letter-spacing: 0.12em; white-space: nowrap; }
.boTouchBtn.on, .boTouchBtn.held, .boTouchBtn.on:hover {
  color: var(--bo-gold); border-color: var(--bo-gold); background: var(--bo-sel-strong), var(--bo-panel-solid);
}
.boTouchPreviz { color: var(--bo-gold); border-color: #cdb77b88; }
.boTouchPreviz:hover { color: var(--bo-gold); }

/* 总图开着：手指归地图，摇杆与按钮收起；预演中：摇杆变暗不吃手指，按钮只留「停止」 */
.touchMap :is(.boStick, .boTouchActions, .boTouchFly, .boTouchMenuBtn) { display: none !important; }
.touchPreviz .boStick { opacity: 0.3; pointer-events: none !important; }
.touchPreviz .boTouchActions > :not(.boTouchPreviz) { display: none; }
.touchPreviz .boTouchFly { display: none; }

/* 全关总图：齿轮那一行以下铺满，导航栏仍在下面 */
.boTouch .boMapOverlay { padding: calc(var(--bo-gutter-t) + 44px) var(--bo-gutter-r) var(--bo-nav-room) var(--bo-gutter-l); }
.boTouch .boMapFrame { width: 100%; height: 100%; }
.boTouch .boMapHead { flex-basis: 46px; gap: 10px; padding: 0 2px 0 12px; }
.boTouch .boMapName { font-size: 15px; }
.boTouch .boMapHint { font-size: 11px; }
.boTouch .boMapHead .boClose { width: 44px; height: 44px; }

/* 提示条、复制备用框、预演字幕 */
.boTouch .boToasts { top: calc(var(--bo-gutter-t) + 48px); width: calc(100vw - var(--bo-gutter-l) - var(--bo-gutter-r)); }
.boTouch .boToast { max-width: 100%; font-size: 12.5px; }
.boTouch .boCopyBox { top: 56px; width: calc(100vw - var(--bo-gutter-l) - var(--bo-gutter-r)); }
.boTouch .boCopyText { font-size: 11px; white-space: pre-wrap; user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
.boTouch .boCopyHint { white-space: normal; }
.boTouch .boPrevizSubs { left: 50%; width: calc(100vw - var(--bo-gutter-l) - var(--bo-gutter-r)); bottom: calc(var(--bo-touch-above-nav) + 62px); }
.boTouch .boPrevizSub { font-size: 15px; padding: 4px 10px 5px; }
.boTouch .boPrevizCaption { bottom: calc(var(--bo-touch-above-nav) + 120px); max-width: calc(100vw - 32px); font-size: 13px; }

/* 竖屏（窄）：右上那一行只放齿轮与「图层」，卡片挪到它下面铺满宽；帧率挪到左上空出来的角；导航栏去掉计数（卡片里有阶段号） */
@media (max-width: 560px) {
  .boTouch .boCard { top: calc(var(--bo-gutter-t) + 46px); width: calc(100vw - var(--bo-gutter-l) - var(--bo-gutter-r)); }
  .boTouch .boToasts { top: calc(var(--bo-gutter-t) + 96px); }
  .boTouch .boNav { grid-template-columns: 44px minmax(0, 1fr) 44px 44px; }
  .boTouch .boNavSide { display: none; }
  .boTouch .boMapLevel { display: none; }
  body.blockoutTouch.blockoutMode #hud .hudFps { top: max(18px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); right: auto; }
}

/* --- 白盒试玩（§17，2026-10-31） ------------------------------------------ */
/* 卡片右上的「试玩」按钮：同预演按钮的金边；面板开着时亮 */
.boPlayBtn { flex: 0 0 auto; margin: -3px 0 0 0; color: var(--bo-gold); border-color: #cdb77b88; background: #13140b55; }
.boPlayBtn:hover, .boPlayBtn.on { border-color: var(--bo-gold); background: var(--bo-sel-strong); }
.boRoot :is(.boPlayPanel, .boPlaySummary, .boPlayHud) { pointer-events: auto; }
.boPlayTag {
  flex: 0 0 auto; padding: 0 7px; font-size: 11.5px; line-height: 18px; letter-spacing: 0.16em;
  color: #15130c; background: var(--bo-gold-fill);
}
.boPlayTag.dead, .boPlayHud.dead .boPlayTag { background: var(--bo-bad); color: #fff3ee; }
.boPlayTag.abort { background: #a4a594; }
.boPlayHead { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--bo-line-strong); }
.boPlayTitle { flex: 1 1 auto; min-width: 0; font: 700 16px/1.3 var(--bo-serif); color: var(--bo-bright); letter-spacing: 0.08em; }
.boPlayClose { flex: 0 0 auto; width: 26px; height: 26px; margin-right: -4px; color: var(--bo-text); border-color: var(--bo-edge); background: #13140b55; }

/* 设置面板：卡片右边、右上工具条下面（不压关卡下拉）；不透明，地上的标签不透出来 */
.boPlayPanel {
  position: absolute; left: 412px; top: 66px; z-index: 5;
  width: min(440px, calc(100vw - 440px)); padding: 12px 14px 14px 16px;
  background: var(--bo-panel-solid);
}
.boPlayPresets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.boPlayPreset, .boPlayToggle {
  padding: 3px 10px; font-size: 12px; line-height: 18px; letter-spacing: 0.06em;
  color: var(--bo-text); border-color: var(--bo-line-strong); background: #13140b55;
}
.boPlayPreset:hover, .boPlayToggle:hover { border-color: #cdb77b88; }
.boPlayToggle.on { color: var(--bo-gold); border-color: var(--bo-gold); background: var(--bo-sel-strong); }
.boPlayRow { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; align-items: center; margin: 6px 0 0; }
.boPlayKey { color: var(--bo-faint); font-size: 12px; letter-spacing: 0.16em; }
.boPlaySelect {
  width: 100%; min-width: 0; height: 26px; padding: 0 6px;
  font: 12.5px/1 var(--bo-font); color: var(--bo-bright);
  background: #0c0d09; border: 1px solid var(--bo-edge); border-radius: 0;
}
.boPlaySelect:focus-visible { outline: 1px solid var(--bo-gold); outline-offset: 1px; }
.boPlayHint { margin: 7px 0 0 54px; font: 12px/17px var(--bo-num); color: var(--bo-muted); font-variant-numeric: tabular-nums; }
.boPlayHint.bad { color: var(--bo-bad); }
.boPlayToggles { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0 54px; }
.boPlayFoot { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--bo-line); }
.boPlayNote { flex: 1 1 auto; min-width: 0; font-size: 11.5px; line-height: 1.5; color: var(--bo-faint); }
.boPlayGo {
  flex: 0 0 auto; padding: 4px 16px; font: 700 13px/20px var(--bo-serif); letter-spacing: 0.2em;
  color: #15130c; background: var(--bo-gold-fill); border-color: var(--bo-gold);
}
.boPlayGo:hover { color: #15130c; background: var(--bo-gold-hi); }
.boPlaySecondary { flex: 0 0 auto; padding: 4px 12px; font-size: 12.5px; line-height: 20px; color: var(--bo-text); border-color: var(--bo-edge); background: #13140b55; }
.boPlaySecondary:hover { border-color: #cdb77b88; }

/* 试玩中顶部那条：居中、右上工具条下面（不压关卡下拉）；提示条让到它下面 */
.boPlayHud {
  position: absolute; top: 66px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: min(620px, calc(100vw - 840px)); min-width: 360px; padding: 8px 10px 8px 12px;
  background: var(--bo-panel-solid);
}
.boPlayHudTop { display: flex; align-items: center; gap: 10px; }
.boPlayStep { flex: 0 0 auto; font: 600 13px/18px "TzUiLatin", var(--bo-num); color: var(--bo-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.boPlayName { flex: 1 1 auto; min-width: 0; font: 700 14px/1.3 var(--bo-serif); color: var(--bo-bright); letter-spacing: 0.08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boPlayTime { flex: 0 0 auto; font: 12.5px/18px var(--bo-num); color: var(--bo-muted); font-variant-numeric: tabular-nums; }
.boPlayStop { flex: 0 0 auto; height: 24px; padding: 0 9px; font-size: 12px; color: var(--bo-text); border-color: var(--bo-edge); background: #13140b55; }
.boPlayHudBottom { display: flex; align-items: center; gap: 12px; margin-top: 5px; }
.boPlayGoal { flex: 1 1 auto; min-width: 0; color: var(--bo-gold-text); font-weight: 700; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boPlayEnemy { flex: 0 0 auto; font: 12.5px/18px var(--bo-num); color: #e7a08f; font-variant-numeric: tabular-nums; }
body.blockoutPlay .boToasts { top: 138px; }

/* 试玩的按键提示（§17.2 hint）：样子照游戏 HUD 的操作提示（Style_Game.css .hudAction）——米白字、柔和黑影、实心键帽，没有底板；
   在准星下面一截，不压底下的导航栏。字同编辑器（--bo-serif = 故事字体；它是按字表裁过的子集，编辑器文字不进字表，生字落到后面的宋体）。 */
.boPlayKeyHint {
  --c: #ece3cc;
  position: absolute; left: 50%; top: 50%; transform: translateX(-50%); margin-top: 11vh; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 0.45em;
  max-width: calc(100vw - 32px); box-sizing: border-box;
  font: 700 clamp(15px, 2.2vh, 23px)/1.35 var(--bo-serif); letter-spacing: 0.06em; color: var(--c); text-align: center;
  text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 1px 1px rgba(0,0,0,0.9);
  pointer-events: none; opacity: 0; transition: opacity 0.25s linear, color 0.2s linear;
}
.boPlayKeyHint.on { opacity: 1; }
.boPlayKeyHint.done { --c: #c4d9a2; }
.boPlayKeyHint kbd {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-width: 1.4em; height: 1.4em; padding: 0 0.32em;
  border-radius: 0.22em; background: var(--c); color: #15130f;
  font: 700 0.85em/1 "TzUiLatin", var(--bo-num); letter-spacing: 0; text-shadow: none;
  box-shadow: 0 0 3px rgba(0,0,0,0.6); transition: background 0.2s linear;
}
/* 试玩中导航栏不响应（翻关键帧会把场上的人搅乱） */
body.blockoutPlay .boNav { pointer-events: none !important; opacity: 0.45; }

/* 小结：画面正中 */
.boPlaySummary {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7;
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow: auto;
  padding: 14px 16px 14px 18px; background: var(--bo-panel-solid);
}
.boPlayTotals { display: flex; gap: 22px; margin-bottom: 12px; }
.boPlayStat { display: flex; flex-direction: column; gap: 1px; }
.boPlayStat b { font: 600 20px/1.1 "TzUiLatin", var(--bo-num); color: var(--bo-gold); font-variant-numeric: tabular-nums; }
.boPlayStat span { font-size: 11.5px; color: var(--bo-faint); letter-spacing: 0.16em; }
.boPlayLog { border-top: 1px solid var(--bo-line); }
.boPlayLogRow {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 22px 44px 70px; column-gap: 10px; align-items: center;
  padding: 4px 0; border-bottom: 1px solid var(--bo-line); font-size: 12.5px;
}
.boPlayLogNo { font: 12px/18px var(--bo-num); color: var(--bo-gold-text); }
.boPlayLogName { color: var(--bo-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boPlayLogMode { color: var(--bo-faint); font-size: 11.5px; text-align: center; }
.boPlayLogTime { font: 12px/18px var(--bo-num); color: var(--bo-muted); text-align: right; font-variant-numeric: tabular-nums; }
.boPlayLogResult { color: var(--bo-ok); font-size: 12px; text-align: right; white-space: nowrap; }
.boPlayLogRow.bad .boPlayLogResult { color: var(--bo-bad); }

@media (max-width: 1099px), (max-height: 719px) {
  .boPlayPanel { left: 328px; width: min(400px, calc(100vw - 340px)); }
  .boPlayHud { width: auto; min-width: 0; left: 328px; right: 12px; transform: none; }
  body.blockoutPlay .boToasts { top: 128px; }
}
@media (max-width: 899px) {
  .boPlayPanel { left: 14px; right: 14px; top: auto; bottom: 90px; width: auto; }
  .boPlayHud { left: 14px; right: 14px; top: 104px; }
  body.blockoutPlay .boToasts { top: 170px; }
}