/* ============================================================
   KRONOS ZHOU · 对话游戏助手 · 页面样式
   路径：helper/game-helper.css
   ------------------------------------------------------------
   在 helper/helper.css 的基础上追加游戏编辑器专属的部分：
     .gh-groups-*   对话组列表 + 事件行编辑区
     .gh-event*     事件行卡片（按类型着色）
     .gh-hud-*      HUD 布局预览与部件编辑
     .gh-theme-*    主题配色编辑与即时预览
     .gh-play-*     试玩 iframe
   颜色一律走站点变量，不写死，暗色 / 亮色都跟着走。
   ============================================================ */

/* ============================================================
   0. 公共小件
   ============================================================ */
.gh-muted { opacity: .62; font-size: .8rem; }
.gh-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .1rem .45rem; border-radius: 999px; font-size: .7rem;
  border: 1px solid var(--border-soft, #2a3242); opacity: .9;
}
.gh-mono { font-family: 'Consolas', 'Courier New', monospace; }
.gh-empty {
  padding: 1.2rem; text-align: center; font-size: .84rem; opacity: .6;
  border: 1px dashed var(--border-soft, #2a3242); border-radius: 10px;
}
.gh-kbd {
  padding: .05rem .35rem; border-radius: 4px; font-size: .75rem;
  border: 1px solid var(--border-soft, #2a3242);
  background: rgba(127,127,127,.12);
  font-family: 'Consolas', 'Courier New', monospace;
}

/* 变量 / 资源 / 属性 / 物品 / 结局 的编辑行 */
.gh-rows { display: flex; flex-direction: column; gap: .6rem; }
.gh-row {
  border: 1px solid var(--border-soft, #2a3242); border-radius: 10px;
  background: var(--bg-block, #161b23); overflow: hidden;
}
.gh-row-head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .7rem; border-bottom: 1px solid var(--border-soft, #2a3242);
}
/* 收 / 展：整条行头都能点，收起时把正文整块藏掉 */
.gh-row-head { cursor: pointer; user-select: none; }
.gh-row-head .gh-row-acts, .gh-row-head .gh-row-acts * { cursor: pointer; }
.gh-row-toggle {
  flex: none; width: 1.15rem; height: 1.15rem; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-soft, #2a3242); border-radius: 6px;
  background: transparent; color: inherit; font-size: .7rem; opacity: .75;
}
.gh-row-toggle:hover { opacity: 1; }
.gh-row.is-collapsed > .gh-row-body { display: none; }
.gh-row.is-collapsed > .gh-row-head { border-bottom-color: transparent; }
.gh-row-title { font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: .35rem; }
.gh-row-meta { font-size: .74rem; opacity: .6; }
.gh-row-acts { margin-left: auto; display: flex; gap: .3rem; }
.gh-row-body { padding: .6rem .7rem; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.gh-row-body .gh-span2 { grid-column: span 2; }
.gh-field { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; }
.gh-field > span { opacity: .72; font-size: .76rem; }
.gh-field input, .gh-field select, .gh-field textarea {
  width: 100%; padding: .35rem .5rem; border-radius: 8px; font: inherit;
  color: inherit; background: var(--bg-elevated, #1b212b);
  border: 1px solid var(--border-medium, #333c4d);
}
.gh-field input:focus, .gh-field select:focus, .gh-field textarea:focus {
  outline: none; border-color: var(--gh-accent, #5b8def);
}
.gh-field textarea { resize: vertical; min-height: 3.2rem; }
.gh-check { display: flex; align-items: center; gap: .35rem; font-size: .8rem; }
.gh-check input { width: auto; }

/* ============================================================
   1. 对话组：左侧列表（浮动）+ 中间事件行 + 右侧事件行目录
   ============================================================ */
.helper-card.gh-groups-card { padding-bottom: .8rem; }

.gh-groups-layout {
  display: grid;
  /* 左：章节 + 对话组；中：事件行（主角，占满剩下的宽度）；右：事件行目录。
     两侧只留「够看清字」的宽度，剩下的全给事件行 —— 这一列要放
     说话人 / 内容 / 语气 / 站位 / 头像…… 太窄就一列一个框，没法用。 */
  grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr) minmax(9.5rem, 11.5rem);
  gap: .9rem;
  /* 不加 align-items: start —— 让两边的侧栏撑满整行高度，
     sticky 才有可滑动的余量（这是 sticky 能生效的关键） */
}

/* ---- 左：章节 + 对话组（上下叠放，共用一层浮动外壳）
       并排时每块只剩十来个 rem，组名与章节名都被省略号吃掉；
       叠起来两块都能用满整栏宽度，文字才看得全。 ---- */
/* 外层：只是撑满整行高度 —— sticky 要有可滑动的余量才生效 */
.gh-side-col { min-width: 0; }
.gh-side-sticky {
  position: sticky;
  top: 4.2rem;                 /* 让开顶部那条 sticky 的操作条 */
  z-index: 20;
  max-height: calc(100vh - 5.4rem);
  display: flex; flex-direction: column; gap: .55rem;
  min-width: 0;
}

/* 章节：上面那一块。它是对下面那份对话组列表的筛选器，不需要太高 */
.gh-chapter-side {
  flex: none; min-width: 0;
  display: flex; flex-direction: column; gap: .35rem;
  padding: .55rem .5rem .6rem;
  border: 1px solid var(--border-soft, #2a3242);
  border-radius: 10px;
  background: var(--bg-block, #161b23);
}
.gh-chapter-head {
  display: flex; align-items: center; gap: .35rem;
  font-size: .76rem; opacity: .7; padding: 0 .15rem .1rem;
  border-bottom: 1px solid var(--border-soft, #2a3242);
}
.gh-chapter-list {
  flex: none; max-height: 11rem;
  overflow: auto; display: flex; flex-direction: column; gap: .2rem;
}
/* 章节条目复用 .gh-group-item 那一套视觉，只是稍微紧凑一点：名称 + 组数徽标 */
.gh-chapter-item { padding: .32rem .5rem; gap: .35rem; border-radius: 7px; }
.gh-chapter-item .gh-group-item-icon { font-size: .9rem; }

/* 对话组：下面那一块，把剩下的高度全占掉，列表自己滚 */
.gh-group-side {
  flex: 1 1 auto; min-height: 6rem; min-width: 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.gh-group-tools { flex: none; display: flex; flex-direction: column; gap: .45rem; }
.gh-group-tools .helper-search-input { padding-top: .4rem; padding-bottom: .4rem; }

.gh-group-list {
  flex: 1 1 auto; min-height: 4rem;
  overflow: auto; display: flex; flex-direction: column; gap: .3rem;
  padding-right: .15rem;
}
.gh-chapter-item .gh-group-item-name { font-size: .8rem; }
.gh-chapter-item .gh-group-item-count { font-size: .7rem; }

/* ---- 右：事件行目录（浮动） ---- */
.gh-event-outline { min-width: 0; }
.gh-outline-sticky {
  position: sticky;
  top: 4.2rem;
  z-index: 20;
  max-height: calc(100vh - 5.4rem);
  display: flex; flex-direction: column; gap: .35rem;
  padding: .55rem .5rem .6rem;
  border: 1px solid var(--border-soft, #2a3242);
  border-radius: 10px;
  background: var(--bg-block, #161b23);
}
.gh-outline-head {
  display: flex; align-items: center; gap: .35rem;
  font-size: .76rem; opacity: .7; padding: 0 .15rem .1rem;
  border-bottom: 1px solid var(--border-soft, #2a3242);
}
.gh-outline-count {
  font-size: .7rem; padding: 0 .35rem; border-radius: 999px;
  border: 1px solid var(--border-soft, #2a3242); opacity: .85;
}
/* 右侧面板里也放一个「添加事件行」：和工具栏那个共用 data-ev-act="add" 委托 */
.gh-outline-add {
  width: 100%; padding: .32rem .4rem; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: .76rem; text-align: center;
  border: 1px dashed var(--border-medium, #333c4d);
  background: var(--bg-elevated, #1b212b); color: inherit;
}
.gh-outline-add:hover {
  border-style: solid; border-color: var(--gh-accent, #5b8def);
  background: var(--gh-accent-soft, rgba(91,141,239,.14));
}
.gh-outline-list {
  flex: 1 1 auto; min-height: 3rem;
  overflow: auto; display: flex; flex-direction: column; gap: .12rem;
}
.gh-outline-item {
  display: flex; align-items: center; gap: .32rem; width: 100%;
  padding: .2rem .3rem; border-radius: 7px; cursor: pointer; text-align: left;
  border: 1px solid transparent; background: none; color: inherit; font: inherit;
  font-size: .74rem; line-height: 1.45;
  border-left: 3px solid var(--gh-event-color, #5b8def);
}
.gh-outline-item:hover { background: rgba(127,127,127,.12); }
.gh-outline-item.is-active {
  background: rgba(91,141,239,.16);
  border-color: var(--gh-accent, #5b8def);
  border-left-color: var(--gh-event-color, #5b8def);
}
.gh-outline-num {
  flex: none; min-width: 1.5rem; text-align: right;
  font-family: 'Consolas', 'Courier New', monospace; font-size: .7rem; opacity: .55;
}
.gh-outline-icon { flex: none; }
.gh-outline-text {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gh-outline-empty, .gh-outline-more {
  padding: .5rem .35rem; font-size: .72rem; opacity: .55; line-height: 1.6;
}

/* 分支事件里的小分支在右侧目录里也有自己的一条：
   缩进 + 绿色虚线 + 🌿，一眼和「事件行」区分开 */
.gh-outline-branch {
  margin-left: .9rem;
  padding: .16rem .3rem .16rem .38rem;
  width: calc(100% - .9rem);
  border-left: 3px dotted rgba(22, 163, 74, .75);
  background: linear-gradient(90deg, rgba(22, 163, 74, .1), transparent 65%);
  border-radius: 0 7px 7px 0;
  font-size: .71rem;
  opacity: .95;
}
.gh-outline-branch:hover { background: rgba(22, 163, 74, .2); }
.gh-outline-branch.is-active {
  background: rgba(22, 163, 74, .26);
  border-color: rgba(22, 163, 74, .8);
  border-left-color: #4ade80;
}
.gh-outline-branch-icon { flex: none; font-size: .68rem; }
.gh-outline-branch-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #4ade80;
}
.gh-outline-branch-count {
  flex: none; font-size: .66rem; opacity: .6;
  font-family: 'Consolas', 'Courier New', monospace;
}
.gh-group-item {
  display: flex; align-items: center; gap: .45rem; width: 100%;
  padding: .45rem .6rem; border-radius: 9px; cursor: pointer; text-align: left;
  border: 1px solid var(--border-soft, #2a3242);
  background: var(--bg-block, #161b23); color: inherit; font: inherit;
}
.gh-group-item:hover { border-color: var(--gh-accent, #5b8def); }
.gh-group-item.active {
  border-color: var(--gh-accent, #5b8def);
  background: var(--gh-accent-soft, rgba(91,141,239,.14));
}
.gh-group-item.is-start::after {
  content: '起始'; font-size: .66rem; opacity: .8;
  border: 1px solid currentColor; border-radius: 999px; padding: 0 .3rem;
}
.gh-group-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.gh-group-item-count { font-size: .7rem; opacity: .6; }
.gh-group-item-icon { font-size: .95rem; }

.gh-group-main { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }

.gh-group-head {
  display: grid; gap: .5rem;
  padding: .7rem .8rem; border-radius: 10px;
  border: 1px solid var(--border-soft, #2a3242);
  background: var(--bg-block, #161b23);
}
.gh-group-head-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gh-group-head .gh-field input { max-width: 100%; }
.gh-group-head-grid { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr 8rem; }

.gh-event-toolbar {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .45rem .1rem;
}
.gh-event-toolbar .gh-spacer { flex: 1; }

.gh-events { display: flex; flex-direction: column; gap: .55rem; }
.gh-event-empty { padding: 1.4rem; text-align: center; font-size: .84rem; opacity: .62; }

/* 事件行区域最底下的「添加事件行」：和顶部工具栏 / 右侧列表里那个是同一套委托，
   长对话组写到末尾时不用再滚回顶部。 */
.gh-event-add-bottom {
  display: block; width: 100%;
  padding: .6rem .8rem; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: .82rem; text-align: center;
  border: 1px dashed var(--border-medium, #333c4d);
  background: transparent; color: inherit; opacity: .85;
}
.gh-event-add-bottom:hover {
  opacity: 1; border-style: solid; border-color: var(--gh-accent, #5b8def);
  background: var(--gh-accent-soft, rgba(91,141,239,.14));
}

/* ---------------- 事件行卡片 ---------------- */
.gh-event {
  border: 1px solid var(--border-soft, #2a3242); border-radius: 10px;
  background: var(--bg-block, #161b23);
  border-left: 4px solid var(--gh-event-color, #5b8def);
  overflow: hidden;
}
.gh-event.is-collapsed .gh-event-body { display: none; }
.gh-event.is-dragging { opacity: .5; }
.gh-event.is-target { outline: 2px dashed var(--gh-accent, #5b8def); outline-offset: 2px; }

.gh-event-head {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .45rem .6rem; cursor: pointer; user-select: none;
}
.gh-event-head:hover { background: rgba(127,127,127,.06); }
.gh-event-num {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; opacity: .6; min-width: 1.6rem; height: 1.25rem;
  padding: 0 .3rem; border-radius: 6px;
  background: rgba(127, 127, 127, .1);
  font-family: 'Consolas', 'Courier New', monospace;
}
.gh-event-type {
  display: inline-flex; align-items: center; gap: .25rem; flex: none;
  font-size: .74rem; padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid var(--gh-event-color, #5b8def);
  color: var(--gh-event-color, #5b8def);
  background: color-mix(in srgb, var(--gh-event-color, #5b8def) 12%, transparent);
}
.gh-event-summary {
  flex: 1; min-width: 4rem; font-size: .82rem; opacity: .85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gh-event-acts { display: flex; gap: .25rem; flex: none; }
.gh-event-body {
  padding: .6rem .7rem .7rem; display: grid; gap: .55rem;
  /* 事件行那一列现在很宽，字段按 12rem 起排：一屏能同时看到
     4~5 个字段，而不是一列一个框往下堆 */
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  border-top: 1px dashed var(--border-soft, #2a3242);
}
.gh-event-body .gh-span-all { grid-column: 1 / -1; }
.gh-event-body .gh-main-field textarea { min-height: 4.6rem; }

/* 事件行里的嵌套表格（选项 / 分支 / 效果） */
.gh-subrows {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: .45rem;
  border: 1px dashed var(--border-soft, #2a3242); border-radius: 10px; padding: .5rem;
}
.gh-subrows-head { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.gh-subrows-head .gh-spacer { flex: 1; }
.gh-subrow {
  border: 1px solid var(--border-soft, #2a3242); border-radius: 8px;
  padding: .45rem .5rem; background: rgba(127,127,127,.05);
  display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.gh-subrow-head {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem;
  font-size: .76rem; opacity: .8;
}
.gh-subrow-head .gh-spacer { flex: 1; }
.gh-subrow .gh-nested { grid-column: 1 / -1; }

/* 可视化条件构建器（「条件跳转」的分支条件）：组内关系 + 一行行「左值 比较 右值」 */
.gh-cond { gap: .5rem; }
.gh-cond-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .8rem; }
.gh-cond-title { font-weight: 600; }
.gh-cond-logic { display: flex; align-items: center; gap: .3rem; }
.gh-cond-logic select {
  font: inherit; font-size: .76rem; padding: .18rem .35rem; border-radius: 8px;
  color: inherit; background: var(--bg-elevated, #1b212b);
  border: 1px solid var(--border-medium, #333c4d);
}
.gh-cond-row {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  border: 1px solid var(--border-soft, #2a3242); border-radius: 8px;
  padding: .3rem .4rem; background: rgba(127,127,127,.05);
}
.gh-cond-row select,
.gh-cond-row input[type="number"] {
  font: inherit; font-size: .76rem; padding: .18rem .35rem; border-radius: 8px;
  color: inherit; background: var(--bg-elevated, #1b212b);
  border: 1px solid var(--border-medium, #333c4d);
  max-width: 12rem;
}
.gh-cond-row .gh-cond-num { width: 5.5rem; }
.gh-cond-join { font-size: .76rem; opacity: .7; min-width: 1.9rem; }
.gh-cond-negate { font-size: .74rem; }
.gh-cond-foot { display: flex; align-items: center; gap: .5rem; }
.gh-cond-preview {
  display: flex; flex-direction: column; gap: .15rem;
  font-size: .76rem; padding: .3rem .45rem; border-radius: 8px;
  background: rgba(127,127,127,.07);
}
.gh-cond-preview-tag { opacity: .6; margin-right: .35rem; }
.gh-cond-expr { font-size: .72rem; opacity: .62; word-break: break-all; }
.gh-cond-raw { display: flex; flex-direction: column; gap: .3rem; }
.gh-cond-raw-head { display: flex; align-items: center; gap: .5rem; font-size: .76rem; opacity: .85; }
.gh-cond-raw input {
  font-size: .76rem; padding: .2rem .4rem; border-radius: 8px; color: inherit;
  background: var(--bg-elevated, #1b212b);
  border: 1px dashed var(--border-medium, #333c4d);
}

/* ============================================================
   2. HUD 编辑
   ============================================================ */
.gh-hud-toggles { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; margin-bottom: .7rem; }
.gh-hud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start; }

.gh-hud-preview-wrap { display: flex; flex-direction: column; gap: .5rem; }
.gh-hud-preview {
  position: relative; min-height: 15rem; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border-medium, #333c4d);
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: space-between;
}
.gh-hud-bar {
  display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem;
  min-height: 2.1rem; font-size: .78rem;
}
.gh-hud-bar.is-top { border-bottom: 1px solid rgba(127,127,127,.25); }
.gh-hud-bar.is-bottom { border-top: 1px solid rgba(127,127,127,.25); }
.gh-hud-slot {
  flex: 1; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  min-height: 1.5rem; border-radius: 8px; padding: .1rem .25rem;
  border: 1px dashed transparent;
}
.gh-hud-slot.is-center { justify-content: center; }
.gh-hud-slot.is-right { justify-content: flex-end; }
.gh-hud-slot.active { border-color: var(--gh-accent, #5b8def); background: rgba(91,141,239,.08); }
.gh-hud-slot-empty { font-size: .7rem; opacity: .45; }

.gh-hud-widget {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .45rem; border-radius: 999px; font-size: .74rem;
  border: 1px solid rgba(127,127,127,.4); background: rgba(0,0,0,.18);
  cursor: pointer; white-space: nowrap;
}
.gh-hud-widget:hover { border-color: var(--gh-accent, #5b8def); }
.gh-hud-widget.active { border-color: var(--gh-accent, #5b8def); background: rgba(91,141,239,.2); }
.gh-hud-widget .gh-hud-widget-del { opacity: .5; margin-left: .15rem; }
.gh-hud-widget .gh-hud-widget-del:hover { opacity: 1; }
.gh-hud-widget-bar {
  width: 3.4rem; height: .42rem; border-radius: 999px; overflow: hidden;
  background: rgba(127,127,127,.35);
}
.gh-hud-widget-bar i { display: block; height: 100%; width: 60%; background: currentColor; }

.gh-hud-slots { display: flex; flex-wrap: wrap; gap: .35rem; }
.gh-hud-slot-pick {
  font-size: .74rem; padding: .2rem .55rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-soft, #2a3242); background: var(--bg-block, #161b23);
  color: inherit;
}
.gh-hud-slot-pick.active { border-color: var(--gh-accent, #5b8def); background: rgba(91,141,239,.14); }

.gh-hud-editor { display: flex; flex-direction: column; gap: .5rem; }
.gh-hud-editor-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gh-hud-kinds { display: flex; flex-wrap: wrap; gap: .3rem; }
.gh-hud-kind {
  font-size: .74rem; padding: .2rem .5rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-soft, #2a3242); background: var(--bg-block, #161b23); color: inherit;
}
.gh-hud-kind.active { border-color: var(--gh-accent, #5b8def); background: rgba(91,141,239,.14); }
.gh-hud-fields {
  display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  border: 1px solid var(--border-soft, #2a3242); border-radius: 10px; padding: .6rem;
  background: var(--bg-block, #161b23);
}

/* ============================================================
   3. 主题编辑
   ============================================================ */
.gh-theme-layout { display: grid; grid-template-columns: 1fr minmax(16rem, 22rem); gap: .9rem; align-items: start; }
.gh-theme-main { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }

.gh-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.gh-preset {
  display: flex; flex-direction: column; gap: .25rem; align-items: flex-start;
  padding: .4rem .6rem; border-radius: 10px; cursor: pointer; color: inherit; font: inherit;
  border: 1px solid var(--border-soft, #2a3242); background: var(--bg-block, #161b23);
}
.gh-preset:hover { border-color: var(--gh-accent, #5b8def); }
.gh-preset.active { border-color: var(--gh-accent, #5b8def); background: rgba(91,141,239,.12); }
.gh-preset-name { font-size: .78rem; }
.gh-preset-dots { display: flex; gap: .18rem; }
.gh-preset-dots i { width: .7rem; height: .7rem; border-radius: 50%; display: block; }

.gh-colors { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.gh-color-field { display: flex; align-items: center; gap: .45rem; font-size: .78rem; }
.gh-color-field input[type="color"] {
  width: 2rem; height: 1.6rem; padding: 0; border: 1px solid var(--border-medium, #333c4d);
  border-radius: 6px; background: none; cursor: pointer;
}
.gh-color-field input[type="text"] {
  flex: 1; min-width: 4rem; padding: .28rem .45rem; border-radius: 7px; font: inherit; font-size: .76rem;
  color: inherit; background: var(--bg-elevated, #1b212b);
  border: 1px solid var(--border-medium, #333c4d);
  font-family: 'Consolas', 'Courier New', monospace;
}
.gh-color-field > span { min-width: 5.2rem; opacity: .72; }

.gh-theme-preview {
  position: sticky; top: 4.4rem;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border-medium, #333c4d);
  min-height: 20rem; display: flex; flex-direction: column;
}
.gh-theme-preview .gh-tp-top { padding: .4rem .6rem; font-size: .74rem; display: flex; justify-content: space-between; }
.gh-theme-preview .gh-tp-stage { flex: 1; display: flex; align-items: flex-end; padding: .8rem; }
.gh-theme-preview .gh-tp-dialog {
  width: 100%; padding: .7rem .8rem; border-radius: 12px;
}
.gh-theme-preview .gh-tp-speaker { font-size: .82rem; font-weight: 700; margin-bottom: .3rem; }
.gh-theme-preview .gh-tp-text { font-size: .86rem; line-height: 1.8; }
.gh-theme-preview .gh-tp-choices { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.gh-theme-preview .gh-tp-choice { font-size: .8rem; padding: .3rem .5rem; border-radius: 8px; }

/* ============================================================
   4. 试玩
   ============================================================ */
.gh-play-frame-wrap {
  margin-top: .7rem; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border-medium, #333c4d);
  background: #05070c;
}
.gh-play-frame { display: block; width: 100%; height: 68vh; min-height: 26rem; border: 0; }

/* ============================================================
   5. 事件类型选择弹层
   ============================================================ */
.gh-event-types {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.gh-event-type-group { grid-column: 1 / -1; font-size: .78rem; opacity: .6; margin-top: .3rem; }
.gh-event-type {
  display: flex; gap: .55rem; align-items: flex-start; text-align: left;
  padding: .6rem .7rem; border-radius: 10px; cursor: pointer; color: inherit; font: inherit;
  border: 1px solid var(--border-soft, #2a3242); background: var(--bg-block, #161b23);
}
.gh-event-type:hover { border-color: var(--gh-event-color, #5b8def); }
.gh-event-type-icon { font-size: 1.1rem; line-height: 1.2; }
.gh-event-type-text { display: flex; flex-direction: column; gap: .15rem; }
.gh-event-type-name { font-size: .86rem; font-weight: 600; }
.gh-event-type-desc { font-size: .74rem; opacity: .68; line-height: 1.6; }

/* 文案字段下面的「插入变量」下拉（引擎显示时会把 {id} 算成当前值） */
.gh-interp { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.gh-insert-var {
  font: inherit; font-size: .76rem; padding: .2rem .4rem;
  border-radius: 8px; color: inherit; cursor: pointer;
  background: var(--bg-elevated, #1b212b);
  border: 1px dashed var(--border-medium, #333c4d);
}
.gh-insert-var:hover { border-style: solid; border-color: var(--gh-accent, #5b8def); }
.gh-interp-hint { font-size: .72rem; opacity: .55; }

/* ============================================================
   5.1 补几个 helper.css 里没有的小类
   （helper.css 是建库助手在用的，不去动它，缺什么在这里补）
   ============================================================ */
.helper-btn-add {
  border-style: dashed;
  font-size: .8rem;
}
.helper-btn-add:hover { border-style: solid; }
.helper-textarea-code {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: .78rem;
  line-height: 1.7;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.helper-card-title-sub { margin-top: 1.1rem; }

/* ============================================================
   5.2 对话组全局预览（思维导图式流程图）
   ============================================================ */
.gh-graph-btn { margin-left: auto; }
.gh-graph-dialog {
  width: min(96vw, 86rem);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.gh-graph-toolbar {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin: .5rem 0 .6rem;
}
.gh-graph-legend {
  display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-size: .72rem; opacity: .78; margin-left: .3rem;
}
.gh-graph-legend i {
  display: inline-block; width: .85rem; height: 0; margin-right: .22rem;
  border-top: 2px solid currentColor; vertical-align: middle;
}
.gh-graph-hint { margin-left: auto; font-size: .72rem; opacity: .55; }

.gh-graph-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 58vh;
  overflow: hidden;
  border: 1px solid var(--border-medium, #333c4d);
  border-radius: 12px;
  background:
    radial-gradient(circle at 1px 1px, rgba(127,127,127,.22) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg-block, #161b23);
  cursor: grab;
  touch-action: none;      /* 手机上用手指拖，而不是滚页面 */
  user-select: none;
}
.gh-graph-canvas.is-dragging { cursor: grabbing; }
.gh-graph-svg { display: block; width: 100%; height: 100%; }

/* ---- 节点 ---- */
.gh-graph-node { cursor: pointer; }
.gh-graph-node rect {
  fill: var(--bg-elevated, #1b212b);
  stroke: rgba(127,127,127,.55);
  stroke-width: 1.2;
}
.gh-graph-node:hover rect { stroke: var(--gh-accent, #5b8def); }
.gh-graph-node.is-start rect { stroke: var(--gh-accent, #5b8def); stroke-width: 2; }
.gh-graph-node.is-active rect { fill: rgba(91,141,239,.18); stroke: var(--gh-accent, #5b8def); }
.gh-graph-node.is-unreachable rect { stroke-dasharray: 5 4; }
.gh-graph-node.is-unreachable .gh-graph-node-title { opacity: .7; }
.gh-graph-node.is-missing rect { stroke: rgba(229,72,77,.85); stroke-dasharray: 4 3; }
.gh-graph-node text { fill: currentColor; pointer-events: none; }
.gh-graph-node-title { font-size: 12.5px; font-weight: 600; }
.gh-graph-node-meta { font-size: 10.5px; opacity: .62; }

/* ---- 边 ---- */
.gh-graph-edge { fill: none; stroke: rgba(127,127,127,.75); stroke-width: 1.4; }
.gh-graph-edge.is-choice { stroke: #f5a524; }
.gh-graph-edge.is-branch { stroke: #38bdf8; }
.gh-graph-edge.is-call { stroke: #2dd4bf; stroke-dasharray: 6 4; }
.gh-graph-edge.is-special { stroke: rgba(127,127,127,.6); stroke-dasharray: 3 3; }
.gh-graph-edge.is-bad { stroke: #e5484d; stroke-dasharray: 4 3; }
.gh-graph-edge-label { font-size: 10.5px; fill: currentColor; opacity: .92; }
.gh-graph-edge-label-bg { fill: var(--bg-block, #161b23); opacity: .95; }
.gh-graph-arrow { fill: rgba(127,127,127,.85); }
.gh-graph-arrow-choice { fill: #f5a524; }
.gh-graph-arrow-branch { fill: #38bdf8; }
.gh-graph-arrow-call { fill: #2dd4bf; }
.gh-graph-arrow-bad { fill: #e5484d; }

@media (max-width: 720px) {
  .gh-graph-canvas { min-height: 52vh; }
  .gh-graph-hint { display: none; }
}

/* ============================================================
   6. 窄屏
   ============================================================ */
@media (max-width: 1100px) {
  /* 窄一点就收起右侧目录（它只是导航，正文还在），左侧章节与对话组仍浮动 */
  .gh-groups-layout { grid-template-columns: minmax(17rem, 19rem) minmax(0, 1fr); }
  .gh-event-outline { display: none; }
}
@media (max-width: 960px) {
  .gh-groups-layout { grid-template-columns: 1fr; }
  /* 单列时取消浮动：跟在正文后面正常滚动 */
  .gh-side-sticky, .gh-outline-sticky { position: static; max-height: none; }
  .gh-group-list { max-height: 16rem; }
  .gh-chapter-list { max-height: 12rem; }
  .gh-hud-grid { grid-template-columns: 1fr; }
  .gh-theme-layout { grid-template-columns: 1fr; }
  .gh-theme-preview { position: static; }
  .gh-group-head-grid { grid-template-columns: 1fr 1fr; }
  .gh-play-frame { height: 60vh; }
}
@media (max-width: 720px) {
  .gh-event-body { grid-template-columns: 1fr; }
  .gh-row-body { grid-template-columns: 1fr 1fr; }
  .gh-event-types { grid-template-columns: 1fr; }
}

/* ============================================================
   7. 编辑器骨架：①~⑦ 横向流程条 + 整页宽正文
   ------------------------------------------------------------
   流程入口横排在正文上方：竖向放左边要吃掉十几 rem，事件行那一列
   就会挤到放不下几个字段。横排 + 一条总进度，主编辑区能占满整页；
   每一步仍然带图标、实时摘要与完成勾，选中那一步有呼吸光条。
   ============================================================ */

/* 这一页是三栏编辑器，比站点的常规内容宽：
   .app-root / .helper-wrap 都只在这一页放大（game-helper.css 只被这一页引） */
.app-root { max-width: 1680px; }
.helper-wrap { max-width: 104rem; }

.gh-step-bar {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: 1rem;
  padding: .55rem .7rem .5rem;
  border: 1px solid var(--border-soft, #2a3242);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(91, 141, 239, .09), rgba(91, 141, 239, 0) 60%),
    var(--bg-block, #161b23);
  box-shadow: 0 18px 40px -34px rgba(0, 0, 0, .95);
}

/* 顶部那条总进度：文字 + 进度条，压在流程按钮下面一行 */
.gh-step-bar-foot {
  display: flex; align-items: center; gap: .55rem;
  padding: 0 .15rem;
}
.gh-step-progress { flex: none; font-size: .72rem; opacity: .6; }
.gh-step-track {
  flex: 0 1 18rem;
  height: .3rem; border-radius: 999px; overflow: hidden;
  background: rgba(127, 127, 127, .22);
}
.gh-step-track > i {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gh-accent, #5b8def), #3ecf8e);
  transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.gh-step-bar-hint {
  margin-left: auto; flex: none;
  font-size: .7rem; opacity: .45;
}

/* ---- 横向流程按钮 ---- */
.helper-steps-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 0;
}

.helper-steps-horizontal .helper-step {
  position: relative;
  flex: 1 1 8.5rem;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .55rem;
  border-radius: 10px;
  border: 1px solid var(--border-soft, #2a3242);
  background: var(--bg-elevated, #1b212b);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: .8;
  overflow: hidden;
  transition: opacity .18s ease, transform .18s ease, background .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}
.helper-steps-horizontal .helper-step:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: var(--gh-accent, #5b8def);
  box-shadow: 0 12px 24px -20px rgba(91, 141, 239, 1);
}
.helper-steps-horizontal .helper-step:focus-visible {
  outline: 2px solid var(--gh-accent, #5b8def);
  outline-offset: 2px;
}

.helper-steps-horizontal .helper-step.active {
  opacity: 1;
  border-color: var(--gh-accent, #5b8def);
  background: linear-gradient(120deg, rgba(91, 141, 239, .24), rgba(91, 141, 239, .08));
  font-weight: 600;
  box-shadow: 0 12px 26px -20px rgba(91, 141, 239, .95);
}
/* 选中那一格底部一条呼吸光条（横排里就放在下沿） */
.helper-steps-horizontal .helper-step.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gh-accent, #5b8def), transparent);
  box-shadow: 0 0 12px rgba(91, 141, 239, .9);
  animation: gh-step-glow 1.8s ease-in-out infinite;
}
@keyframes gh-step-glow {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.helper-steps-horizontal .helper-step-dot {
  position: relative;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 9px;
  font-size: .9rem; line-height: 1;
  border: 1px solid var(--border-soft, #2a3242);
  background: var(--bg-block, #161b23);
  transition: transform .2s cubic-bezier(.2, .9, .3, 1.3), border-color .18s ease, background .18s ease;
}
.helper-steps-horizontal .helper-step:hover .helper-step-dot { transform: scale(1.1); }
.helper-steps-horizontal .helper-step.active .helper-step-dot {
  border-color: var(--gh-accent, #5b8def);
  background: rgba(91, 141, 239, .22);
  transform: scale(1.06);
}
.helper-steps-horizontal .helper-step.is-done .helper-step-dot {
  border-color: rgba(62, 207, 142, .5);
}
/* 完成的那几步：图标右下角挂一个小勾 */
.helper-steps-horizontal .helper-step.is-done .helper-step-dot::after {
  content: '✓';
  position: absolute;
  right: -2px; bottom: -3px;
  font-size: .6rem; font-weight: 700; line-height: 1;
  color: #3ecf8e;
  text-shadow: 0 0 6px rgba(62, 207, 142, .85);
}

.helper-steps-horizontal .helper-step-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .05rem;
}
.helper-steps-horizontal .helper-step-label {
  font-size: .8rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.helper-steps-horizontal .helper-step-num {
  font-size: .68rem; opacity: .58;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.helper-steps-horizontal .helper-step-idx {
  flex: none;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: .68rem; opacity: .3;
}
.helper-steps-horizontal .helper-step.active .helper-step-idx { opacity: .7; }

/* ============================================================
   8. 事件行底部的「快捷添加」
   ============================================================ */
.gh-quick-add {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .15rem;
  padding: .6rem .7rem;
  border: 1px solid var(--border-soft, #2a3242);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(91, 141, 239, .06), rgba(91, 141, 239, 0) 60%),
    var(--bg-block, #161b23);
}
.gh-quick-add-label {
  font-size: .72rem; opacity: .6; letter-spacing: .06em;
}
.gh-quick-add-btns {
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.gh-quick-btn {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .34rem .7rem .34rem .5rem;
  border-radius: 999px;
  font: inherit; font-size: .78rem; color: inherit;
  cursor: pointer;
  border: 1px solid var(--border-medium, #333c4d);
  background: var(--bg-elevated, #1b212b);
  transition: transform .16s cubic-bezier(.2, .9, .3, 1.25), border-color .16s, background .16s, box-shadow .16s;
}
.gh-quick-btn:hover {
  transform: translateY(-2px);
  border-color: var(--gh-accent, #5b8def);
  background: var(--gh-accent-soft, rgba(91, 141, 239, .14));
  box-shadow: 0 10px 22px -18px rgba(91, 141, 239, 1);
}
.gh-quick-btn:active { transform: translateY(0) scale(.98); }
.gh-quick-btn:focus-visible { outline: 2px solid var(--gh-accent, #5b8def); outline-offset: 2px; }
.gh-quick-icon { font-size: .95rem; line-height: 1; }

/* ============================================================
   9. 细节美化（只在游戏助手这一页生效，helper.css 是建库助手在用的）
   ============================================================ */

/* 卡片：一道很淡的顶光，层次比纯色块清楚 */
.helper-card {
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(127, 127, 127, .05), rgba(127, 127, 127, 0) 70px),
    var(--bg-block, #161b23);
  box-shadow: 0 18px 40px -38px rgba(0, 0, 0, .95);
}
.helper-card-title { font-size: .95rem; }
.helper-card-title > span { display: inline-flex; align-items: center; gap: .35rem; }

/* 输入控件：聚焦时给一圈柔和的光，而不是只换边框色 */
.gh-field input:focus, .gh-field select:focus, .gh-field textarea:focus,
.helper-input:focus, .helper-textarea:focus, .helper-select:focus {
  outline: none;
  border-color: var(--gh-accent, #5b8def);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, .16);
}

/* 布尔字段：勾选框那一行也给一个独立的格位（世界表里会用到） */
.gh-field-bool { gap: .3rem; }
.gh-field-bool .gh-check { padding-top: .3rem; }
.gh-field-bool .helper-hint { display: block; }

/* 事件行卡片：悬停时左边那道类型色亮一点，看得出「鼠标在谁身上」 */
.gh-event { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.gh-event:hover {
  border-color: var(--border-medium, #333c4d);
  box-shadow: 0 14px 30px -28px rgba(0, 0, 0, 1);
}
.gh-event:not(.is-collapsed) {
  box-shadow: 0 16px 34px -30px rgba(0, 0, 0, 1);
}
.gh-event.is-collapsed:hover { transform: translateX(2px); }

/* 折叠时摘要更清楚一点 */
.gh-event.is-collapsed .gh-event-summary { opacity: .95; }

/* 展开的事件行：正文区垫一层很淡的底色，和折叠状态一眼分得开 */
.gh-event-body {
  background: linear-gradient(180deg, rgba(127, 127, 127, .05), rgba(127, 127, 127, 0) 60%);
}
.gh-event.is-collapsed .gh-event-head { border-left-color: transparent; }

/* 工具栏：做成一条真正的工具条，长对话组往下滚时还「粘」在顶上。
   z-index 低于左右两列浮动块（20），免得盖住它们。 */
.gh-event-toolbar {
  position: sticky;
  top: 4.2rem;
  z-index: 15;
  padding: .45rem .55rem;
  border: 1px solid var(--border-soft, #2a3242);
  border-radius: 10px;
  background: rgba(18, 22, 29, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gh-event-toolbar .helper-btn-mini { opacity: .85; }
.gh-event-toolbar .helper-btn-mini:hover { opacity: 1; }

/* 事件类型选择弹层：卡片式按钮，鼠标移上去整块亮起来 */
.gh-event-type {
  position: relative;
  transition: transform .16s cubic-bezier(.2, .9, .3, 1.2), border-color .16s, background .16s, box-shadow .16s;
}
.gh-event-type:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--gh-event-color, #5b8def) 12%, var(--bg-block, #161b23));
  box-shadow: 0 14px 30px -24px var(--gh-event-color, #5b8def);
}
.gh-event-type-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem; flex: none;
  border-radius: 9px;
  border: 1px solid var(--border-soft, #2a3242);
  background: var(--bg-elevated, #1b212b);
}
.gh-event-type-group {
  letter-spacing: .1em; font-weight: 600;
  padding-bottom: .2rem;
  border-bottom: 1px dashed var(--border-soft, #2a3242);
}

/* 对话组 / 章节 / 事件目录的条目：悬停时给一点位移，不是只换边框色 */
.gh-group-item, .gh-outline-item, .gh-chapter-item {
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.gh-group-item:hover, .gh-chapter-item:hover { transform: translateX(2px); }
.gh-group-item.active { box-shadow: inset 3px 0 0 var(--gh-accent, #5b8def); }

/* 「＋ 添加事件行」那颗大按钮：主色淡描边 + 悬停上浮 */
.gh-event-add-bottom {
  transition: opacity .16s, border-color .16s, background .16s, transform .16s;
}
.gh-event-add-bottom:hover { transform: translateY(-1px); }

/* ============================================================
   分支事件（对话组内部的分支）· 跳转类型 · 目标选择器 · 加载遮罩
   ============================================================ */

/* 对话组底部的「＋ 添加分支事件」 */
.gh-event-add-bottom.gh-event-add-branch {
  border-style: solid;
  border-color: rgba(22, 163, 74, .5);
  color: #4ade80;
  background: rgba(22, 163, 74, .08);
}
.gh-event-add-bottom.gh-event-add-branch:hover {
  border-color: rgba(22, 163, 74, .85);
  background: rgba(22, 163, 74, .16);
}

/* 分支事件卡片里的分区 */
.gh-branch-block {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: .5rem;
  border-top: 1px dashed var(--border-soft, #2a3242);
  padding-top: .55rem;
}
.gh-branch-head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .8rem;
}
.gh-branch-head .gh-spacer { flex: 1; }
.gh-branch {
  border: 1px solid var(--border-soft, #2a3242); border-radius: 10px;
  background: rgba(22, 163, 74, .05);
  padding: .5rem .6rem; display: flex; flex-direction: column; gap: .5rem;
}
.gh-branch-top {
  display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap;
}
.gh-branch-top .gh-field { flex: 1 1 12rem; }
.gh-branch-top .gh-spacer { flex: 1; }
.gh-branch-events { display: flex; flex-direction: column; gap: .5rem; }
.gh-branch-empty { font-size: .76rem; opacity: .6; }
.gh-branch-add { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.gh-branch-id { font-size: .7rem; opacity: .5; }
/* 分支里的收尾行（分支结束跳转设置）：一眼看出它不能被删 */
.gh-event.is-system { border-left: 3px solid #0ea5e9; }
.gh-event.is-system .gh-event-num { opacity: .55; }
.gh-system-tag {
  font-size: .68rem; padding: 0 .35rem; border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, .55); color: #38bdf8;
}
/* 分支嵌套在事件行里时，卡片本身要窄一点、别跟外层卡片抢视觉 */
.gh-event-in-branch > .gh-event-head { background: rgba(22, 163, 74, .06); }

/* 跳转类型 + 跳转到 */
.gh-jump { display: flex; gap: .45rem; align-items: flex-end; flex-wrap: wrap; }
.gh-jump .gh-jump-type { flex: 0 0 6.2rem; }
.gh-jump .gh-jump-target { flex: 1 1 9rem; min-width: 8rem; }
.gh-jump-other { flex: none; }

/* HUD 按钮设置 */
.gh-hud-buttons {
  display: grid; gap: .35rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  margin-bottom: .8rem;
}
.gh-hud-buttons .gh-check { align-items: flex-start; }
.gh-hud-buttons .gh-check-hint { font-size: .7rem; opacity: .58; display: block; margin-top: .1rem; }

/* 目标选择器（「跳转到 → 其他」） */
.gh-target-toolbar { display: flex; gap: .5rem; align-items: center; margin: .5rem 0 .6rem; flex-wrap: wrap; }
.gh-target-toolbar .helper-search-input { flex: 1 1 12rem; }
.gh-target-list {
  max-height: 58vh; overflow: auto; display: flex; flex-direction: column; gap: .55rem;
  padding-right: .2rem;
}
.gh-target-chapter {
  border: 1px solid var(--border-soft, #2a3242); border-radius: 10px;
  padding: .45rem .55rem; background: rgba(127, 127, 127, .05);
}
.gh-target-chapter-title { font-size: .8rem; font-weight: 600; margin-bottom: .35rem; opacity: .85; }
.gh-target-group { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .18rem 0; }
.gh-target-btn {
  border: 1px solid var(--border-medium, #333c4d); border-radius: 8px;
  background: var(--bg-elevated, #1b212b); color: inherit;
  padding: .2rem .5rem; font-size: .78rem; cursor: pointer;
}
.gh-target-btn:hover { border-color: var(--gh-accent, #5b8def); }
.gh-target-btn.is-current { border-color: var(--gh-accent, #5b8def); background: rgba(91, 141, 239, .16); }
.gh-target-branches { display: flex; gap: .3rem; flex-wrap: wrap; padding-left: 1.1rem; }
.gh-target-empty { font-size: .78rem; opacity: .6; padding: .5rem 0; }

/* 首屏加载遮罩 */
.helper-loading {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 11, 16, .82);
  backdrop-filter: blur(3px);
  transition: opacity .22s ease;
}
.helper-loading[hidden] { display: none; }
.helper-loading.is-gone { opacity: 0; pointer-events: none; }
.helper-loading-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.helper-loading-spinner {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 2px solid rgba(127, 127, 127, .3);
  border-top-color: var(--gh-accent, #5b8def);
  animation: gh-loading-spin .8s linear infinite;
}
@keyframes gh-loading-spin { to { transform: rotate(360deg); } }
.helper-loading-title { font-size: .95rem; font-weight: 600; }
.helper-loading-sub { font-size: .76rem; opacity: .6; }


/* 滚动条：侧栏一多，默认滚动条太抢眼 */
.gh-group-list, .gh-chapter-list, .gh-outline-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 127, 127, .45) transparent;
}
.gh-group-list::-webkit-scrollbar,
.gh-chapter-list::-webkit-scrollbar,
.gh-outline-list::-webkit-scrollbar { width: 8px; height: 8px; }
.gh-group-list::-webkit-scrollbar-thumb,
.gh-chapter-list::-webkit-scrollbar-thumb,
.gh-outline-list::-webkit-scrollbar-thumb {
  background: rgba(127, 127, 127, .38); border-radius: 999px;
}
.gh-group-list::-webkit-scrollbar-thumb:hover,
.gh-chapter-list::-webkit-scrollbar-thumb:hover,
.gh-outline-list::-webkit-scrollbar-thumb:hover { background: rgba(127, 127, 127, .62); }
.gh-group-list::-webkit-scrollbar-track,
.gh-chapter-list::-webkit-scrollbar-track,
.gh-outline-list::-webkit-scrollbar-track { background: transparent; }

/* 选项卡 / 弹层按钮的键盘可达性统一一下 */
.gh-group-item:focus-visible,
.gh-outline-item:focus-visible,
.gh-event-type:focus-visible,
.gh-hud-kind:focus-visible,
.gh-preset:focus-visible,
.gh-quick-btn:focus-visible,
.helper-btn:focus-visible {
  outline: 2px solid var(--gh-accent, #5b8def);
  outline-offset: 2px;
}

/* 空状态 / 提示块统一圆角 */
.gh-empty, .gh-event-empty { border-radius: 12px; }

/* 流程条窄屏时收紧一点（它本来就是横排，只是挤瘦一些） */
@media (max-width: 1080px) {
  .helper-steps-horizontal .helper-step {
    flex: 1 1 7rem;
    padding: .34rem .45rem;
  }
  .helper-steps-horizontal .helper-step-num { display: none; }
  .gh-step-bar-hint { display: none; }
}
@media (max-width: 720px) {
  .gh-quick-add-btns { gap: .28rem; }
  .gh-quick-btn { padding: .3rem .55rem; font-size: .74rem; }
  .gh-quick-btn .gh-quick-icon { display: none; }
  .helper-steps-horizontal .helper-step {
    flex: 0 1 auto;
    padding: .3rem .5rem;
  }
  .helper-steps-horizontal .helper-step-text { flex-direction: row; align-items: baseline; gap: .3rem; }
  .helper-steps-horizontal .helper-step-idx { display: none; }
  .helper-steps-horizontal .helper-step .helper-step-dot { width: 1.35rem; height: 1.35rem; font-size: .78rem; }
  .helper-steps-horizontal .helper-step.is-done .helper-step-dot::after { display: none; }
}

/* 动画敏感的用户：把进场的位移与脉冲关掉 */
@media (prefers-reduced-motion: reduce) {
  .helper-steps-horizontal .helper-step,
  .helper-steps-horizontal .helper-step-dot,
  .gh-quick-btn,
  .gh-step-track > i { transition: none; }
  .helper-steps-horizontal .helper-step.active::after { animation: none; }
}


/* ============================================================
   完整手册：右下角固定圆形入口 + 手册正文排版
   ------------------------------------------------------------
   编辑器里所有指导性的灰色小字都搬进了 helper/game-helper-manual.md，
   这里只管两件事：那颗「无论何时都在」的圆按钮，以及 md 渲染出来的排版。
   ============================================================ */
.gh-fab {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 65;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .05rem;
  width: 3.5rem; height: 3.5rem; padding: 0;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--gh-accent, #5b8def);
  background: radial-gradient(circle at 32% 28%, rgba(91,141,239,.34), rgba(14,17,22,.96) 70%);
  color: inherit; font: inherit;
  box-shadow: 0 10px 26px rgba(0,0,0,.42), 0 0 0 0 rgba(91,141,239,.45);
  transition: transform .16s ease, box-shadow .2s ease, border-color .16s;
}
.gh-fab:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: var(--gh-accent, #5b8def);
  box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 0 6px rgba(91,141,239,.14);
}
.gh-fab:active { transform: translateY(0) scale(.98); }
.gh-fab:focus-visible { outline: 2px solid var(--gh-accent, #5b8def); outline-offset: 3px; }
.gh-fab-icon { font-size: 1.18rem; line-height: 1; }
.gh-fab-text { font-size: .6rem; line-height: 1; opacity: .82; letter-spacing: .04em; }
@media (max-width: 720px) {
  .gh-fab { right: .9rem; bottom: .9rem; width: 3rem; height: 3rem; }
  .gh-fab-icon { font-size: 1rem; }
  .gh-fab-text { display: none; }
}

/* ---- 手册正文（md 渲染出来的东西） ---- */
.gh-manual { max-width: 62rem; }
.gh-manual > *:first-child { margin-top: 0; }
.gh-manual .gh-manual-h1 { font-size: 1.3rem; margin: 1.1rem 0 .6rem; }
.gh-manual .gh-manual-h2 {
  font-size: 1.12rem; margin: 1.7rem 0 .6rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--border-soft, #2a3242);
}
.gh-manual .gh-manual-h3 { font-size: .98rem; margin: 1.2rem 0 .4rem; }
.gh-manual .gh-manual-h4,
.gh-manual .gh-manual-h5,
.gh-manual .gh-manual-h6 { font-size: .9rem; margin: 1rem 0 .35rem; }
.gh-manual p { margin: .5rem 0; line-height: 1.85; }
.gh-manual ul, .gh-manual ol { margin: .45rem 0 .7rem; padding-left: 1.35rem; }
.gh-manual li { margin: .18rem 0; line-height: 1.8; }
.gh-manual ul { list-style: disc; }
.gh-manual ol { list-style: decimal; }
.gh-manual li > ul, .gh-manual li > ol { margin: .18rem 0 .18rem; }
.gh-manual code {
  font-family: 'Consolas', 'Courier New', monospace; font-size: .86em;
  padding: .06rem .3rem; border-radius: 5px;
  background: rgba(127,127,127,.16); border: 1px solid rgba(127,127,127,.14);
}
.gh-manual .gh-manual-pre {
  margin: .7rem 0; padding: .7rem .85rem; border-radius: 10px; overflow: auto;
  background: rgba(0,0,0,.3); border: 1px solid var(--border-soft, #2a3242);
  font-family: 'Consolas', 'Courier New', monospace; font-size: .8rem; line-height: 1.7;
  white-space: pre;
}
.gh-manual .gh-manual-quote {
  margin: .7rem 0; padding: .5rem .85rem; border-left: 3px solid var(--gh-accent, #5b8def);
  background: rgba(91,141,239,.08); border-radius: 0 8px 8px 0; opacity: .95;
}
.gh-manual .gh-manual-quote p:first-child { margin-top: 0; }
.gh-manual .gh-manual-quote p:last-child { margin-bottom: 0; }
.gh-manual .gh-manual-hr {
  margin: 1.4rem 0; border: none; border-top: 1px solid var(--border-soft, #2a3242);
}
.gh-manual .gh-manual-table {
  width: 100%; margin: .7rem 0; border-collapse: collapse; font-size: .82rem;
}
.gh-manual .gh-manual-table th,
.gh-manual .gh-manual-table td {
  border: 1px solid var(--border-soft, #2a3242); padding: .35rem .55rem;
  text-align: left; vertical-align: top; line-height: 1.7;
}
.gh-manual .gh-manual-table th { background: rgba(127,127,127,.12); font-weight: 600; }
.gh-manual .gh-manual-loading,
.gh-manual .gh-manual-error { opacity: .8; }
.gh-manual .gh-manual-error { color: #f87171; }
.gh-manual a { color: var(--gh-accent, #5b8def); text-decoration: underline; }
/* ============================================================
   10. 文档类旁白：编辑器里的「预览」+ 说话人下拉 + 快捷键角标
   ------------------------------------------------------------
   这几块的样式都建立在 game-helper.html 里引的
   ../games/game-player.css 上：那个文件的 .kzgame-doc* 负责
   「容器长什么样」（信纸 / 手机屏幕 / 报纸…），这里只管
   「它在编辑器里怎么被端出来」以及编辑器自己的两个小控件。
   ============================================================ */

/* 事件行上的「预览」按钮：只出现在「文档类旁白」这一行 */
.gh-doc-preview-btn {
  border-color: var(--gh-accent, #5b8def);
  color: var(--gh-accent, #5b8def);
}
.gh-doc-preview-btn:hover {
  background: var(--gh-accent-soft, rgba(91, 141, 239, .14));
}

/* 预览那一层：盖住整个编辑器，点空白处关闭 */
.gh-doc-preview {
  z-index: 2400;   /* 要高过编辑器自己的弹层（helper-dialog 是 1200 上下） */
}
.gh-doc-preview .kzgame-doc-close { display: none; }
.gh-doc-preview .gh-doc-preview-tip {
  max-width: 40rem;
  text-align: center;
  font-size: .8rem;
  line-height: 1.6;
  opacity: .72;
  color: #e8ecf3;
}
body.gh-doc-preview-open { overflow: hidden; }

/* 快捷添加按钮上的「Alt+1」角标 */
.gh-quick-btn { position: relative; }
.gh-quick-key {
  position: absolute;
  top: -.42rem;
  right: -.28rem;
  padding: 0 .26rem;
  border-radius: 999px;
  background: var(--gh-accent, #5b8def);
  color: #0b0e13;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.05rem;
  letter-spacing: 0;
  pointer-events: none;
}

/* 说话人：下拉只列中文名，敲英文名也能搜到（.gh-speaker-list 是自绘的候选列表） */
.gh-speaker-field { position: relative; }
.gh-speaker-box { position: relative; }
.gh-speaker-box input { width: 100%; }
.gh-speaker-hint { display: block; margin-top: .2rem; font-size: .68rem; opacity: .55; }
.gh-speaker-list {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + .2rem);
  max-height: 15rem;
  overflow: auto;
  padding: .25rem;
  border: 1px solid var(--border-soft, #2a3242);
  border-radius: 10px;
  background: var(--panel-bg, #161b23);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
}
.gh-speaker-list[hidden] { display: none; }
.gh-speaker-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  padding: .32rem .5rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .82rem;
  text-align: left;
  cursor: pointer;
}
.gh-speaker-item:hover,
.gh-speaker-item:focus-visible {
  background: var(--gh-accent-soft, rgba(91, 141, 239, .14));
  outline: none;
}
.gh-speaker-item-name { font-weight: 600; }
.gh-speaker-item-role { font-size: .72rem; opacity: .6; }
.gh-speaker-empty { padding: .45rem .5rem; font-size: .78rem; opacity: .6; }

/* 演出效果那一行的「范围 · 止」下拉：选项文字比较长，别把卡片撑爆 */
.gh-field select[data-path$="spanEnd"] { max-width: 100%; }

/* ============================================================
   11. 更新日志弹窗
   ------------------------------------------------------------
   结构：一条版本一个 .gh-cl-item（版本徽标 + 日期 + 标题 + 改动列表），
   第一条算「最新」并高亮；数据在 game-helper-changelog.json
   （file:// 时退回 game-helper-changelog-data.js 的副本）。
   每次打开这一页都会自动弹一次，顶栏那颗「📜 更新日志」随时能再打开。
   ============================================================ */
.gh-changelog-list {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  max-height: min(60vh, 34rem);
  overflow-y: auto;
  padding-right: .2rem;
}
.gh-cl-item {
  border: 1px solid var(--border-soft, #2a3242);
  border-left: 3px solid var(--border-soft, #2a3242);
  border-radius: 10px;
  padding: .75rem .9rem;
  background: rgba(127, 127, 127, .045);
}
.gh-cl-item.is-latest {
  border-left-color: var(--gh-accent, #5b8def);
  background: var(--gh-accent-soft, rgba(91, 141, 239, .1));
}
.gh-cl-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .35rem;
}
.gh-cl-version {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
}
.gh-cl-badge {
  padding: 0 .42rem;
  border-radius: 999px;
  background: var(--gh-accent, #5b8def);
  color: #0b0e13;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.35rem;
}
.gh-cl-date {
  margin-left: auto;
  font-size: .76rem;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.gh-cl-title {
  font-size: .86rem;
  font-weight: 600;
  opacity: .9;
  margin-bottom: .4rem;
}
.gh-cl-changes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .28rem;
}
.gh-cl-changes li {
  position: relative;
  padding-left: .95rem;
  font-size: .82rem;
  line-height: 1.75;
}
.gh-cl-changes li::before {
  content: '·';
  position: absolute;
  left: .3rem;
  opacity: .55;
}
.gh-cl-item.is-latest .gh-cl-changes li::before {
  content: '✦';
  font-size: .68rem;
  left: .18rem;
  color: var(--gh-accent, #5b8def);
  opacity: .9;
}
.gh-cl-empty {
  padding: .8rem .2rem;
  font-size: .84rem;
  opacity: .7;
  line-height: 1.8;
}
.gh-changelog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .85rem;
}
.gh-changelog-note {
  font-size: .74rem;
  opacity: .6;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .gh-cl-date { margin-left: 0; width: 100%; }
  .gh-changelog-foot { flex-direction: column; align-items: stretch; }
}