/* 弹窗系统样式 */

#modal-container {
  /* absolute 而非 fixed：以 #app（整卡，max-width:500px）为定位基准，不是浏览器视口——
     否则宽屏桌面上弹窗会按整个窗口的宽高居中/撑大，跟玩家看到的整卡对不上。 */
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 须高于 .editor-quick-input（3000），否则弹窗底栏主按钮会被右下角悬浮钮挡住 */
  z-index: 6000;
}

#modal-container.quick-insert-top {
  z-index: 10000;
}

/* 教程期间触发的弹窗（如「关闭教程？」二次确认）抬至教程 UI（9100）之上，
   避免被退出按钮 / 任务条 / 气泡遮挡；仍低于 quick-insert-top（10000）以维持分层顺序 */
#modal-container.above-tutorial {
  z-index: 9500;
}

.modal-overlay {
  /* 同上：绝对定位在 #modal-container（= #app 整卡）范围内，不是整个浏览器窗口 */
  position: absolute;
  inset: 0;
  background: var(--modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 16px;
}
.modal-overlay.active {
  opacity: 1;
}

.modal {
  background: var(--modal-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: min(92%, 420px);
  max-height: 80vh;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  transition: transform 0.2s ease;
  /* 弹窗作为容器查询容器，内部 padding/按钮高度跟随弹窗宽度缩放；
   * 字号则统一以用户设置 --font-size 为基准；
   * 与 #app-scale-inner 同基准（1.375），保证弹窗与主视图字号视觉一致。 */
  font-size: calc(var(--font-size) * 1.375);
  container-type: inline-size;
  --ui-pad-xs-y: clamp(3px, 1.43cqi, 6px);
  --ui-pad-xs-x: clamp(6px, 2.38cqi, 10px);
  --ui-pad-sm-y: clamp(5px, 1.9cqi, 8px);
  --ui-pad-sm-x: clamp(7px, 2.86cqi, 12px);
  --ui-pad-md-y: clamp(6px, 2.38cqi, 10px);
  --ui-pad-md-x: clamp(8px, 3.33cqi, 14px);
  --ui-btn-min-h-sm: clamp(30px, 9.52cqi, 40px);
  --ui-btn-min-h-md: clamp(34px, 10.95cqi, 46px);
}
.modal-overlay.active .modal {
  transform: translateY(0);
}

/* 教程多 highlight 步（如 basics「那么来调整一下试试吧」框 4 row）需要 bubble 落到 modal 外。
   modal-overlay 加 .tutorial-bubble-room：modal 贴顶 + max-height 缩短，#app 底部腾出 ~150px
   给 bubble + margin。modal-body 内仍可滚动看全部内容，4 ring 仍各自定位到 row。
   stop / 步切换时由 engine 移除 class，对其他场景零影响。 */
.modal-overlay.tutorial-bubble-room {
  align-items: flex-start;
  padding-top: 12px;
}
.modal-overlay.tutorial-bubble-room .modal {
  max-height: calc(100% - 160px);
  min-height: 220px;
}

.modal-wide {
  max-width: min(94%, 520px);
}

/* 图片模式版面美化：调试模式下挂 #modal-container 时使用；去掉白底卡片壳，内容在遮罩 flex 内居中 */
.modal.modal-beauty-chromeless {
  background: transparent;
  border: none;
  box-shadow: none;
  width: min(94%, 520px);
  max-width: min(94%, 520px);
  max-height: none;
  height: auto;
  flex: 0 0 auto;
  transform: none;
  transition: none;
}
.modal-overlay.active .modal.modal-beauty-chromeless {
  transform: none;
}
.modal.modal-beauty-chromeless .modal-body {
  padding: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: min(86vh, 100%);
  flex: none;
}
.modal.modal-beauty-chromeless .media-beauty-modal-host {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  max-height: min(78vh, 100%);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* 裁切舞台遮罩仅限 modal-body 内，底栏须叠在最上层以免「使用此区域」被挡住 */
.modal.modal-cover-crop .modal-body {
  position: relative;
  z-index: 0;
}
.modal.modal-cover-crop .modal-footer {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}
.modal.modal-cover-crop .modal-footer .btn {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.modal-fullscreen {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: clamp(8px, 3.33cqi, 14px) clamp(10px, 4.29cqi, 18px);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  min-width: 0;
}

.modal-title {
  font-size: calc(var(--font-size) * 1.0625);
  font-weight: bold;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-close-btn {
  width: clamp(28px, 8.57cqi, 36px);
  height: clamp(28px, 8.57cqi, 36px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: calc(var(--font-size) * 1.25);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.modal-close-btn:active {
  background: var(--bg-hover);
}

.modal-body {
  padding: clamp(8px, 3.81cqi, 16px);
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.modal-body p {
  font-size: var(--ui-fs-12);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 设置：美化 JSON 模板 / 导入弹窗内的文本区域（等宽、高度随视口变化） */
.settings-theme-json-field {
  box-sizing: border-box;
  width: 100%;
  min-height: min(36vh, var(--ui-modal-body-max-h));
  max-height: min(52vh, calc(var(--ui-modal-body-max-h) * 0.9));
  font-family: ui-monospace, monospace;
  font-size: calc(var(--font-size) * 0.875);
  line-height: 1.45;
  resize: none;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: clamp(8px, 2.86cqi, 12px) clamp(10px, 4.29cqi, 18px);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.modal-footer .btn {
  min-height: clamp(32px, 9.52cqi, 40px);
  font-size: calc(var(--font-size) * 0.9375);
  min-width: 0;
  flex: 0 0 auto;
  padding: clamp(5px, 1.9cqi, 8px) clamp(8px, 3.81cqi, 16px);
}

/* 编辑器弹窗：强制统一尺寸与排版，覆盖各弹窗内联差异 */
.modal-editor {
  max-width: min(92%, 420px) !important;
}
.modal-editor.modal-wide {
  max-width: min(94%, 520px) !important;
}
/* 媒体模式布局自定义弹窗：高度撑大些，让 9:16 大预览更舒展 */
.modal-editor.media-layout-modal {
  max-height: 92vh !important;
}
.modal-editor .modal-title {
  font-size: var(--ui-fs-11) !important;
}
.modal-editor .modal-body { font-size: var(--ui-fs-10) !important; }
/* 排除内在标题与分段按钮：否则 inherit 会把仿宋等无粗体面的主题字塞给 label，font-weight:700 仍像正文。
   同时排除文字排版弹窗与游戏正文预览：二者靠 parser 输出的 inline font-family 展示字体，
   inherit !important 优先级高于无 !important 的 inline style，会导致「点了字体但预览/实机不变」。 */
.modal-editor .modal-body *:not(.toggle-track):not(.toggle-thumb):not(.form-label):not(.widget-editor-section-label):not(.widget-editor-toggle-row-label):not(.widget-editor-panel-section-title):not(.section-title):not(.widget-choice-seg-btn):not(.widget-ic-mode-seg-btn):not(.widget-editor-row-title):not(.typography-modal-wrap):not(.typography-modal-wrap *):not(.game-text-mode):not(.game-text-mode *) {
  font-family: inherit !important;
}
.modal-editor .btn,
.modal-editor .modal-footer .btn {
  min-height: var(--ui-btn-min-h-sm) !important;
  font-size: var(--ui-fs-10) !important;
  padding: var(--ui-pad-xs-y) var(--ui-pad-sm-x) !important;
}
.modal-editor input[type="text"],
.modal-editor input[type="number"],
.modal-editor input[type="password"],
.modal-editor textarea,
.modal-editor select {
  font-size: var(--ui-fs-10) !important;
  padding: var(--ui-pad-xs-y) var(--ui-pad-sm-x) !important;
}
/* 弹窗内列表项紧凑化 */
.modal-editor .list-item-title {
  font-size: var(--ui-fs-11) !important;
}
.modal-editor .list-item-sub {
  font-size: var(--ui-fs-10) !important;
}
.modal-editor .list-item {
  padding: var(--ui-pad-xs-y) var(--ui-pad-sm-x) !important;
}

/* 编辑器弹窗内部统一分组小框 */
.modal-editor .modal-group {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  padding: clamp(4px, 1.9cqi, 8px);
  margin-bottom: clamp(4px, 1.9cqi, 8px);
}
.modal-editor .modal-group-title {
  font-size: calc(var(--font-size) * 0.875);
  color: var(--text-muted);
  margin-bottom: clamp(3px, 1.43cqi, 6px);
}

.modal-input {
  margin-top: 8px;
}

/* 画面效果：RGB 闪屏预览色块（全局变量边框与圆角） */
.modal-fx-rgb-preview {
  width: 100%;
  max-width: min(100%, 280px);
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  box-sizing: border-box;
  background: rgb(255, 255, 255);
}

/* 弹窗打开时禁止背景滚动 */
body.modal-open {
  overflow: hidden;
}

/* ==============================
   教程弹窗样式
   ============================== */
.tutorial-modal {
  max-width: 520px;
}
.tutorial-modal .modal-title {
  font-size: var(--ui-fs-15);
}

.tutorial-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 进度指示器 */
.tutorial-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.tutorial-counter {
  font-size: var(--ui-fs-12);
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.tutorial-dots {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.tutorial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  transition: background 0.2s, transform 0.2s;
}
.tutorial-dot.active {
  background: var(--accent-color);
  transform: scale(1.3);
}
.tutorial-dot.done {
  background: var(--color-preset-3);
}

/* 正文区域 */
.tutorial-body {
  font-size: var(--ui-fs-11);
  line-height: 1.8;
  color: var(--text-secondary);
}
.tutorial-body p {
  margin: 8px 0;
}
.tutorial-body ul,
.tutorial-body ol {
  margin: 6px 0;
  padding-left: 20px;
}
.tutorial-body li {
  margin: 4px 0;
  line-height: 1.7;
}
.tutorial-body code {
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--ui-fs-10);
  color: var(--color-preset-2);
  font-family: monospace;
}
.tutorial-body strong {
  color: var(--text-primary);
}

/* 示例/高亮框 */
.tutorial-example {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent-color);
  border-radius: var(--radius-sm);
  padding: var(--ui-pad-md-y) var(--ui-pad-md-x);
  margin: var(--ui-pad-md-y) 0;
  font-size: var(--ui-fs-10);
  line-height: 1.7;
}
.tutorial-example-title {
  font-size: var(--ui-fs-12);
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 6px;
  text-transform: none;
}

/* 底部导航按钮 */
.tutorial-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}
.tutorial-footer .btn {
  min-height: var(--ui-btn-min-h-sm);
  padding: var(--ui-pad-sm-y) var(--ui-pad-lg-x);
  font-size: var(--ui-fs-11);
}
.tutorial-btn-skip {
  font-size: var(--ui-fs-12) !important;
  color: var(--text-muted) !important;
  padding: 8px 12px !important;
}

/* JS 内联 font-size 硬编码 → 跟随用户字号设置按比例缩放 */
.modal [style*="font-size:9px"] { font-size: calc(var(--font-size) * 0.5625) !important; }
.modal [style*="font-size:10px"] { font-size: calc(var(--font-size) * 0.625) !important; }
.modal [style*="font-size:11px"] { font-size: calc(var(--font-size) * 0.6875) !important; }
.modal [style*="font-size:12px"] { font-size: calc(var(--font-size) * 0.75) !important; }
.modal [style*="font-size:13px"] { font-size: calc(var(--font-size) * 0.8125) !important; }
.modal [style*="font-size:14px"] { font-size: calc(var(--font-size) * 0.875) !important; }
.modal [style*="font-size:15px"] { font-size: calc(var(--font-size) * 0.9375) !important; }
.modal [style*="font-size:16px"] { font-size: calc(var(--font-size) * 1) !important; }
.modal [style*="font-size:18px"] { font-size: calc(var(--font-size) * 1.125) !important; }
.modal [style*="font-size:48px"] { font-size: calc(var(--font-size) * 3) !important; }
/* JS 内联 padding 硬编码 → 跟随弹窗宽度缩放 */
.modal [style*="padding:8px 10px"] { padding: clamp(6px, 1.9cqi, 8px) clamp(8px, 2.38cqi, 10px) !important; }
.modal [style*="padding:8px 12px"] { padding: clamp(6px, 1.9cqi, 8px) clamp(10px, 2.86cqi, 12px) !important; }
.modal [style*="padding:10px 12px"] { padding: clamp(8px, 2.38cqi, 10px) clamp(10px, 2.86cqi, 12px) !important; }
.modal [style*="padding:10px 14px"] { padding: clamp(8px, 2.38cqi, 10px) clamp(11px, 3.33cqi, 14px) !important; }

/* 小屏弹窗响应式：移动端额外放大（覆盖上方规则） */
@media (max-width: 640px) {
  .modal-overlay {
    padding: 8px;
  }
  .modal {
    max-height: 88vh;
    border-radius: 9px;
  }

  /* JS 内联写死尺寸 -> 统一变量（可调） */
  .modal [style*="font-size:11px"] { font-size: var(--ui-fs-11) !important; }
  .modal [style*="font-size:12px"] { font-size: var(--ui-fs-12) !important; }
  .modal [style*="font-size:13px"] { font-size: var(--ui-fs-13) !important; }
  .modal [style*="font-size:14px"] { font-size: var(--ui-fs-14) !important; }
  .modal [style*="font-size:15px"] { font-size: var(--ui-fs-15) !important; }
  .modal [style*="font-size:16px"] { font-size: var(--ui-fs-16) !important; }

  .modal [style*="padding:4px 10px"] { padding: var(--ui-pad-xs-y) var(--ui-pad-sm-x) !important; }
  .modal [style*="padding:6px 8px"] { padding: var(--ui-pad-sm-y) var(--ui-pad-sm-x) !important; }
  .modal [style*="padding:8px 10px"] { padding: var(--ui-pad-md-y) var(--ui-pad-sm-x) !important; }
  .modal [style*="padding:8px 12px"] { padding: var(--ui-pad-md-y) var(--ui-pad-md-x) !important; }
  .modal [style*="padding:10px 12px"] { padding: calc(var(--ui-pad-md-y) + 1px) var(--ui-pad-md-x) !important; }
  .modal [style*="padding:10px 14px"] { padding: calc(var(--ui-pad-md-y) + 1px) calc(var(--ui-pad-md-x) + 2px) !important; }

  .modal [style*="min-height:30px"] { min-height: var(--ui-btn-min-h-sm) !important; }
  .modal [style*="min-height:32px"] { min-height: var(--ui-btn-min-h-sm) !important; }
  .modal [style*="min-height:34px"] { min-height: var(--ui-btn-min-h-md) !important; }
  .modal [style*="min-height:36px"] { min-height: var(--ui-btn-min-h-md) !important; }
}

/* 页面预览弹窗：与主界面竖栏游玩区比例一致（变量状态栏、媒体层、名字条贴在正文框上沿、正文区与立绘编辑虚线同位同高），整卡缩放、内部不纵向滚动 */
.modal-body.resource-preview-modal-body {
  /* transform:scale 后子项仍占未缩放布局高度，若 hidden 会把整块裁没；纵向可滚以收住溢出绘制 */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /*
   * 弹窗 .modal 高度多为「内容撑开」，子项 flex:1 + min-height:0 会把本区压成 0，配合 overflow:hidden 整块预览被裁没。
   * 用 min(固定上限, vh) 保证有占位且不大过 max-height，避免 min 与 max 打架。
   */
  min-height: min(300px, 70vh);
  max-height: min(76vh, 720px);
  padding: 10px 12px !important;
}
.resource-preview-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-height: min(280px, 65vh);
  width: 100%;
  /* transform:scale 时子元素会超出 slot 的占位盒，hidden 会裁掉顶/侧；与 flex 纵向居中叠加时易表现为「状态栏半截在可视外」 */
  overflow: visible;
}
.resource-preview-scale-host {
  flex: 1 1 auto;
  min-height: min(260px, 60vh);
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
  box-sizing: border-box;
  overflow: visible;
}
.resource-preview-scale-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex-shrink: 0;
  min-width: 120px;
  min-height: min(240px, 55vh);
}
/* scaleInner：JS 写入 500×889 + transform:scale，作为容器查询上下文 */
.resource-preview-root .rp-scale-inner {
  box-sizing: border-box;
  container-type: size;
  container-name: stage-card;
  font-size: calc(var(--font-size) * 1.375);
  /* position 由 JS inline 设为 absolute；此处只确保子元素可以相对定位 */
}
/* rp-device 用 inset:0 绝对定位撑满 scaleInner，不依赖 flex 也不依赖 height:100% */
.rp-device {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  box-sizing: border-box;
  /* 与实机 #app-scale-inner 一致：只有左右边框，无上下边框 */
  --game-nav-h: clamp(28px, 12.8cqmin, 64px);
  --game-bottom-tap-min: clamp(28px, 5cqb, 44px);
  gap: clamp(2px, 0.4cqb, 5px);
  padding: clamp(1px, 0.3cqb, 4px) 0;
}
/* safe-area padding 由主页面处理，预览不需要 */
.rp-preview-nav.nav-bar {
  flex-shrink: 0;
  box-sizing: border-box;
  height: var(--game-nav-h);
  min-height: var(--game-nav-h);
  max-height: var(--game-nav-h);
  align-items: stretch;
  pointer-events: none;
}
/* 预览按钮必须与游戏主页面一致，不受 base.css @media !important 干扰 */
.rp-preview-nav.nav-bar .btn {
  pointer-events: none;
  flex: 1 !important;
  align-self: stretch !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 clamp(2px, 0.5cqmin, 6px) !important;
  font-size: calc(var(--font-size) * 1.375) !important;
  padding: 0 clamp(6px, 1cqmin, 12px) !important;
  box-sizing: border-box !important;
}
/* 状态栏：与 layout.css .game-media-layer > #status-bar 完全一致的定位和尺寸 */
.rp-device .game-media-layer .status-bar.rp-preview-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: var(--gm-z-status, 4);
  box-sizing: border-box;
  pointer-events: auto;
  max-height: clamp(60px, 32cqb, 120px);
  min-height: 0;
  border-bottom: 1px solid var(--border-light);
  overflow: visible;
}
.rp-device .game-media-layer .status-bar.rp-preview-status.has-avatar {
  min-height: 0;
}
/* 收起按钮定位：展开时贴在状态栏底边外侧（top:100%），与实机一致 */
.rp-device .game-media-layer .rp-preview-status.status-bar--dir-top:not(.status-bar--collapsed) .status-bar-toggle {
  position: absolute;
  top: 100%;
  right: clamp(4px, 0.8cqmin, 10px);
  left: auto;
  bottom: auto;
  z-index: 1;
}
/* 收起态：栏体高度归零，内容隐藏，只留按钮 */
.rp-device .game-media-layer .rp-preview-status.status-bar--dir-top.status-bar--collapsed:not(.hidden) {
  max-height: none !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}
.rp-device .game-media-layer .rp-preview-status.status-bar--dir-top.status-bar--collapsed:not(.hidden) .status-avatar,
.rp-device .game-media-layer .rp-preview-status.status-bar--dir-top.status-bar--collapsed:not(.hidden) .status-values {
  display: none !important;
}
.rp-device .game-media-layer .rp-preview-status.status-bar--dir-top.status-bar--collapsed:not(.hidden) .status-bar-toggle {
  top: 0 !important;
  margin-top: 0 !important;
  right: clamp(4px, 0.8cqmin, 10px);
  left: auto;
  bottom: auto;
}
.rp-device .game-media-layer .rp-preview-status .status-avatar {
  width: clamp(40px, 22cqmin, 96px);
  height: clamp(40px, 22cqmin, 96px);
}
.rp-preview-game-area.game-area {
  flex: 1;
  min-height: 0;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  touch-action: none;
  background: color-mix(in srgb, var(--bg-tertiary) 50%, var(--bg-primary));
}
.rp-preview-game-area.game-area.is-media-mode {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: hidden;
}
.rp-preview-game-area.game-area:not(.is-media-mode) .game-stage-aspect {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.rp-preview-game-area.game-area.is-media-mode .game-stage-aspect {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  overflow: hidden;
}
.rp-preview-game-area .game-media-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 与测试页 .tester-stage-card .game-media-layer 一致：状态栏须在 CG 之下仍保持可点，叠层顺序与 z-index 变量与测试卡片对齐 */
  isolation: isolate;
  --gm-z-bg: 0;
  --gm-z-character: 2;
  --gm-z-fx: 3;
  --gm-z-status: 9;
  --gm-z-cg: 5;
  --gm-z-name: 6;
}
.rp-preview-game-area .rp-preview-choice-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: min(10%, 72px) 6%;
  box-sizing: border-box;
  /* 覆盖 .choice-area 的底栏样式：此层是绝对定位的全屏叠层，不是底栏 */
  max-height: none;
  overflow-y: auto;
  background: transparent;
  border-top: none;
}
.rp-preview-game-area .rp-preview-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3px, 1.4cqmin, 10px);
  width: min(96%, 400px);
  max-width: 100%;
}
.rp-preview-game-area .rp-preview-choice-sample-btn {
  opacity: 0.92;
  cursor: default;
  font-size: calc(var(--font-size) * 1.125) !important;
  min-height: clamp(36px, 6cqb, 52px) !important;
  padding: clamp(4px, 1cqmin, 8px) clamp(8px, 2cqmin, 14px) !important;
}
/* CG 模式独占：状态栏 + 选项层在 CG 显示时都隐藏，CG 是单独一页（与主游戏 .game-area.is-cg-mode 一致） */
.rp-preview-game-area.is-cg-mode .rp-preview-choice-layer,
.rp-preview-game-area.is-cg-mode .status-bar {
  display: none;
}
/* 必须同时给出 top+bottom，本层才有明确高度，子项 height:% 才能相对游玩主区解析（与立绘位置弹窗里「正文区」虚线同一套：左右 6%、底 4%） */
.rp-media-text-dock {
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  bottom: 4%;
  z-index: 7;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: clamp(3px, 1.5cqmin, 8px);
  pointer-events: none;
  box-sizing: border-box;
}
.rp-media-text-dock .game-media-name {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  align-self: flex-start;
}
/* CG 全屏时仅由 JS 隐藏名字条；不得隐藏整块 dock，否则正文预览与「……」占位一并消失，表现为空白 */
/* 与 layout.css .game-media-text-dock > .game-text-mode 完全一致 */
.rp-preview-text.game-text-mode {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  height: calc(100% * 22 / 96);
  min-height: 0;
  max-height: calc(100% * 22 / 96);
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(6px, 2cqmin, 14px) clamp(8px, 2.5cqmin, 16px);
  margin: 0;
  background: color-mix(in srgb, var(--visual-textbox-bg, var(--bg-secondary)) 62%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid color-mix(in srgb, var(--accent-color, var(--border-color)) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-glow, var(--accent-color, #88aaff)) 18%, transparent),
              0 0 16px color-mix(in srgb, var(--accent-glow, var(--accent-color, #88aaff)) 22%, transparent);
  border-radius: var(--radius-sm);
  pointer-events: auto;
  cursor: pointer;
}
.modal-body.resource-preview-modal-body .rp-preview-text .text-paragraph.visible {
  opacity: 1 !important;
  color: var(--text-primary) !important;
}

/* 插入媒体：底栏两键贴右成组（覆盖窄屏下 .modal-footer 双列网格把两键拉到左右两端） */
.modal.image-insert-modal .modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.modal.image-insert-modal .modal-footer .btn {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}
.rp-preview-audio {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  font-size: calc(var(--font-size) * 0.75);
  color: var(--text-secondary);
  line-height: 1.45;
  word-break: break-word;
}

.rp-preview-selection {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-primary));
  padding: 8px;
  box-sizing: border-box;
}

.rp-preview-selection-title {
  font-size: calc(var(--font-size) * 0.75);
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.rp-preview-selection-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.rp-preview-selection-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.rp-preview-selection-label {
  font-size: calc(var(--font-size) * 0.75);
  color: var(--text-muted);
}

.rp-preview-selection-value {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(var(--font-size) * 0.75);
  color: var(--text-primary);
  word-break: break-all;
}

.rp-preview-selection-value-text {
  min-height: 20px;
}

.rp-preview-selection-thumb {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--border-light);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}