/**
 * LingVerse · 弹窗公共样式（B 顶 × C 中 / 扁平钮）
 * ─────────────────────────────────────────────────────────────
 * 从确认弹窗 / 红包 / 突破 / 加群等迭代中抽离，后续新弹窗优先复用本文件。
 *
 * 用法速查
 * 1) 标准确认壳（gameConfirm / gameAlert / gamePrompt 与手写一致）：
 *    <div class="modal-content modal--decorated gc-dialog" data-tone="jade|warn|danger">
 *      <div class="gc-head">
 *        <div class="gc-rule" aria-hidden="true"></div>
 *        <div class="gc-title">标题</div>
 *        <!-- 不要 .gc-kicker 副标题；信息放 gc-mid -->
 *      </div>
 *      <div class="gc-mid">… gc-q / gc-sub / gc-loot / gc-detail / gc-irrev / gc-note …</div>
 *      <div class="gc-foot modal-btn-row">
 *        <button class="modal-btn modal-btn--outline">取消</button>
 *        <button class="modal-btn modal-btn--jade gc-foot__ok">确认</button>
 *      </div>
 *    </div>
 *
 * 2) 仅复用「短色条左齐头」的叠卡/表单弹窗（不必挂 gc-dialog）：
 *    <div class="modal-content modal--decorated your-modal">
 *      <div class="gc-head">…同 1…</div>
 *      <div class="modal-body-padded">…业务内容…</div>
 *      <div class="gc-foot">或 modal-btn-row …</div>
 *    </div>
 *    （:has(> .gc-head) 时 padding:0，由 head/mid/foot 自管留白）
 *
 * 3) 按钮：modal-btn + --outline | --jade | --gold | --danger | --orange | --full
 *
 * 铁律（与 Agents.md 一致）
 * - 无左竖条 / 无通栏装饰顶条；短色条 .gc-rule 仅 36px
 * - 主钮扁平：浅底 + 描边，无实心渐变 / 无投影
 * - 语义色：jade 正向 · gold 提醒 · danger 不可逆
 *
 * iOS / 旧 WebKit 兼容
 * - 基线样式只用 var()/rgba/hex（iOS 12+ 可用）
 * - color-mix 一律放在 @supports 内作增强；勿单独作为唯一 background/border
 * - 按钮显式 -webkit-appearance:none，避免系统原生钮皮盖过扁平样式
 *
 * 业务专属样式仍放各域文件（如 .bt-dialog、.rp-form、.join-group-channel）
 */

/* ═══════════════════════════════════════════════════════════════
   弹窗底部按钮行 + 通用扁平钮
   ═══════════════════════════════════════════════════════════════ */
.modal-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.modal-btn-row > * { flex: 1; }

.modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
    border-radius: var(--radius-md, 8px);
    font-family: inherit;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow: none;
    filter: none;
    text-shadow: none;
    /* iOS Safari：未声明 appearance 时，背景若无效会回落成系统原生按钮皮 */
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.modal-btn:hover { filter: none; }
.modal-btn:active { opacity: 0.88; }

/* 基线：主题 token / 固定 alpha（不依赖 color-mix） */
.modal-btn--gold {
    background: var(--gradient-gold, rgba(183, 120, 31, 0.12));
    border-color: var(--border-gold, rgba(183, 120, 31, 0.40));
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
}
.modal-btn--gold:hover {
    background: var(--gradient-gold, rgba(183, 120, 31, 0.18));
    border-color: var(--border-gold, rgba(183, 120, 31, 0.55));
}
.modal-btn--outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.modal-btn--outline:hover {
    background: var(--bg-active, rgba(42, 42, 38, 0.04));
    border-color: var(--border-gold, var(--border-color));
    color: var(--text-primary);
}
.modal-btn--orange {
    background: var(--bg-orange-glass, rgba(154, 107, 61, 0.12));
    border: 1px solid var(--border-orange, rgba(154, 107, 61, 0.40));
    color: var(--accent-orange, #9a6b3d);
}
.modal-btn--orange:hover {
    background: var(--bg-orange-glass, rgba(154, 107, 61, 0.18));
}
.modal-btn--danger {
    background: rgba(183, 58, 49, 0.10);
    border: 1px solid rgba(183, 58, 49, 0.36);
    color: var(--text-danger, var(--accent-crimson));
    font-weight: 600;
}
.modal-btn--danger:hover {
    background: rgba(183, 58, 49, 0.16);
    border-color: rgba(183, 58, 49, 0.48);
}
.modal-btn--jade {
    background: var(--gradient-jade, rgba(22, 128, 106, 0.12));
    border: 1px solid var(--border-jade, rgba(22, 128, 106, 0.40));
    color: var(--text-jade, var(--accent-jade));
    font-weight: 600;
}
.modal-btn--jade:hover {
    background: var(--gradient-jade, rgba(22, 128, 106, 0.18));
    border-color: var(--border-jade, rgba(22, 128, 106, 0.55));
}
.modal-btn--full { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   gameConfirm / gameAlert / gamePrompt · B顶 × C中（问劫笺）
   顶部：短色条 + 左齐标题；中间：居中主问/代价；底部：语义双钮
   ═══════════════════════════════════════════════════════════════ */
/* 三连选择器压过 game-panels 的
   .modal--decorated:not(:has(> .modal-header-deco)) { padding: 16px 20px }
   圆角对齐 B顶×C中 原型 .bc { border-radius: 14px }（全局 --radius-lg 为 12px，须显式覆盖） */
body.game-page .modal-content.modal--decorated.gc-dialog,
.modal-content.modal--decorated.gc-dialog,
.gc-dialog {
    --gc-tone: var(--accent-jade);
    --gc-radius: 14px;
    --gc-radius-inner: 10px;
    --gc-radius-btn: 8px;
    padding: 0;
    max-width: 392px;
    width: 90%;
    border-radius: var(--gc-radius);
    /* 基线边框：不用 color-mix，保证旧 iOS 仍有可见描边 */
    border-color: var(--border-gold, var(--border-color));
    /* 实色底板：禁止半透明/透底导致日志与弹窗叠字错位 */
    background: var(--bg-card, var(--bg-panel)) !important;
    background-image: none !important;
    overflow: hidden;
    isolation: isolate;
}
body.game-page .gc-dialog > .gc-head,
body.game-page .gc-dialog > .gc-mid,
body.game-page .gc-dialog > .gc-foot,
.gc-dialog > .gc-head,
.gc-dialog > .gc-mid,
.gc-dialog > .gc-foot {
    background: transparent;
}
.gc-dialog[data-tone="warn"] { --gc-tone: var(--accent-gold); }
.gc-dialog[data-tone="danger"] { --gc-tone: var(--accent-crimson); }
.gc-dialog[data-tone="gold"] { --gc-tone: var(--accent-gold); }

/* 头：可单独挂在非 gc-dialog 的 modal--decorated 上（叠卡弹窗） */
.gc-head {
    position: relative;
    padding: 18px 48px 0 18px; /* 右侧留给统一关闭 × */
    text-align: left;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   统一关闭叉 · 右上角（新版弹窗唯一 × 样式）
   ─────────────────────────────────────────────────────────────
   历史分叉：44 圆钮带阴影 / 30 方角红悬停 / 40 方角铭文紫 / 各 head 微调 top-right
   统一：32 扁平方角、无投影、绝对定位右上，压过各域局部覆盖。
   底栏「关闭」文字钮仍可保留作次要出口；主关闭入口为右上 ×。
   ═══════════════════════════════════════════════════════════════ */
body.game-page .modal-header-close,
.modal-header-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    appearance: none;
    -webkit-appearance: none;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    box-shadow: none;
    filter: none;
    text-shadow: none;
    transform: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
body.game-page .modal-header-close:hover,
body.game-page .modal-header-close:focus-visible,
.modal-header-close:hover,
.modal-header-close:focus-visible {
    color: var(--text-primary);
    border-color: var(--border-gold, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    outline: none;
    transform: none;
    box-shadow: none;
}
body.game-page .modal-header-close:active,
.modal-header-close:active {
    opacity: 0.88;
}

/* 压过各业务弹窗对 × 尺寸/位置/圆角/阴影的分叉覆盖 */
body.game-page .auto-process-modal-overlay .modal-header-close,
body.game-page .inscription-modal-overlay .modal-header-close,
body.game-page .da-head .modal-header-close,
body.game-page .xc-head .modal-header-close,
body.game-page .lf-head .modal-header-close,
body.game-page .tx-head .modal-header-close,
body.game-page .lk-head .modal-header-close,
body.game-page .vb-head .modal-header-close,
body.game-page .rf-head .modal-header-close,
body.game-page .nd-head .modal-header-close,
body.game-page .eql-head .modal-header-close,
body.game-page .er-head .modal-header-close,
body.game-page .pd-head .modal-header-close,
body.game-page .as-head .modal-header-close,
body.game-page .gc-head .modal-header-close,
body.game-page .modal-header-deco .modal-header-close,
body.game-page .craft-gc-head .modal-header-close {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
    font-size: 18px;
}
/* 炼造主壳：head 自带 chrome 内边距，× 贴齐标题行右上 */
body.game-page .craft-modal-chrome .craft-gc-head .modal-header-close {
    top: 0;
    right: 0;
}
body.game-page .auto-process-modal-overlay .modal-header-close:hover,
body.game-page .auto-process-modal-overlay .modal-header-close:focus-visible,
body.game-page .inscription-modal-overlay .modal-header-close:hover,
body.game-page .inscription-modal-overlay .modal-header-close:focus-visible {
    color: var(--text-primary);
    border-color: var(--border-gold, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    transform: none;
}
.gc-rule {
    width: 36px;
    height: 3px;
    border-radius: 999px;
    margin-bottom: 12px;
    /* 基线：实色短条；有 color-mix 时再升级为渐变 */
    background: var(--gc-tone, var(--accent-jade));
}
.gc-dialog[data-tone="danger"] .gc-rule {
    background: var(--accent-crimson);
}
.gc-dialog[data-tone="warn"] .gc-rule,
.gc-dialog[data-tone="gold"] .gc-rule {
    background: var(--accent-gold);
}
.gc-title {
    font-family: var(--font-serif, "Songti SC", STSong, "Noto Serif SC", serif);
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}
/* 副标题已退役：新版弹窗只用 gc-title，勿再挂 gc-kicker */
.gc-kicker {
    display: none !important;
}

.gc-mid {
    padding: 16px 16px 4px;
    text-align: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    flex: 1 1 auto;
    max-height: 55vh;
    max-height: min(55vh, 420px);
}
.gc-mid.is-form {
    text-align: left;
}
.gc-q {
    font-family: var(--font-serif, "Songti SC", STSong, "Noto Serif SC", serif);
    font-size: 17px;
    line-height: 1.55;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    text-wrap: pretty;
}
.gc-q em,
.gc-q .name {
    font-style: normal;
    color: var(--text-gold);
    font-weight: 600;
}
.gc-sub {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--text-secondary);
    text-wrap: pretty;
}
.gc-sub .danger { color: var(--accent-crimson); font-weight: 600; }
.gc-body {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
    text-wrap: pretty;
    text-align: center;
    max-height: 100%;
}

.gc-loot {
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.gc-loot__item {
    padding: 10px 8px 9px;
    border-radius: var(--gc-radius-inner, 10px);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
}
.gc-loot__k {
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.gc-loot__v {
    margin-top: 3px;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
}

.gc-detail {
    margin: 14px 0 0;
    padding: 4px 12px;
    border-radius: var(--gc-radius-inner, 10px);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    text-align: left;
}
.gc-detail__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 12px;
}
.gc-detail__row + .gc-detail__row {
    border-top: 1px dashed var(--border-color);
}
.gc-detail__k { color: var(--text-muted); flex-shrink: 0; }
.gc-detail__v {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}
.gc-detail__v--mono {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    color: var(--text-gold);
    font-weight: 600;
}

.gc-irrev {
    margin: 12px 0 0;
    padding: 9px 11px;
    border-radius: var(--gc-radius-btn, 8px);
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--accent-crimson);
    background: rgba(183, 58, 49, 0.08);
    border: 1px solid rgba(183, 58, 49, 0.28);
}
.gc-note {
    margin: 10px 0 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-muted);
}
.gc-input-wrap {
    margin-top: 14px;
    text-align: left;
}
.gc-input {
    width: 100%;
}

.gc-foot {
    display: flex;
    gap: 10px;
    margin: 4px 0 0;
    padding: 14px 16px 16px;
    flex-shrink: 0;
}
.gc-foot.modal-btn-row { margin-top: 4px; }
.gc-foot > .modal-btn {
    flex: 1 1 0;
    min-width: 0;
    letter-spacing: 1px;
    /* 原型 .btn { border-radius: 8px }，覆盖 .modal-btn 的 radius-md 漂移 */
    border-radius: var(--gc-radius-btn, 8px);
}
.gc-dialog .gc-input,
.gc-dialog .app-input.gc-input {
    border-radius: var(--gc-radius-btn, 8px);
}
.gc-foot > .gc-foot__ok,
.gc-foot > .modal-btn--full {
    flex: 1.15 1 0;
}

/* 确认闸口主钮 · 扁平语义（与 outline 取消钮同权结构，靠色区分；无实心渐变/投影） */
.gc-dialog .gc-foot > .modal-btn,
.gc-dialog .gc-foot__ok,
.gc-dialog .modal-btn--full {
    box-shadow: none;
    filter: none;
    text-shadow: none;
}
.gc-dialog .gc-foot__ok.modal-btn--danger,
.gc-dialog .modal-btn--full.modal-btn--danger {
    background: rgba(183, 58, 49, 0.12);
    border: 1px solid rgba(183, 58, 49, 0.40);
    color: var(--text-danger, var(--accent-crimson));
    font-weight: 600;
    box-shadow: none;
}
.gc-dialog .gc-foot__ok.modal-btn--danger:hover,
.gc-dialog .modal-btn--full.modal-btn--danger:hover {
    background: rgba(183, 58, 49, 0.18);
    border-color: rgba(183, 58, 49, 0.55);
}
.gc-dialog .gc-foot__ok.modal-btn--jade,
.gc-dialog .modal-btn--full.modal-btn--jade {
    background: var(--gradient-jade, rgba(22, 128, 106, 0.12));
    border: 1px solid var(--border-jade, rgba(22, 128, 106, 0.40));
    color: var(--text-jade, var(--accent-jade));
    font-weight: 600;
    box-shadow: none;
}
.gc-dialog .gc-foot__ok.modal-btn--jade:hover,
.gc-dialog .modal-btn--full.modal-btn--jade:hover {
    background: var(--gradient-jade, rgba(22, 128, 106, 0.18));
    border-color: var(--border-jade, rgba(22, 128, 106, 0.55));
}
.gc-dialog .gc-foot__ok.modal-btn--gold,
.gc-dialog .modal-btn--full.modal-btn--gold {
    background: var(--gradient-gold, rgba(183, 120, 31, 0.12));
    border: 1px solid var(--border-gold, rgba(183, 120, 31, 0.40));
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
    box-shadow: none;
}
.gc-dialog .gc-foot__ok.modal-btn--gold:hover,
.gc-dialog .modal-btn--full.modal-btn--gold:hover {
    background: var(--gradient-gold, rgba(183, 120, 31, 0.18));
    border-color: var(--border-gold, rgba(183, 120, 31, 0.55));
}
.gc-dialog .gc-foot > .modal-btn--outline:hover {
    background: var(--bg-active, rgba(42, 42, 38, 0.04));
    border-color: var(--border-gold, var(--border-color));
    color: var(--text-primary);
    filter: none;
}

@media (max-width: 640px) {
    .gc-dialog {
        max-width: 392px;
        max-width: min(392px, 100%);
    }
    .gc-head { padding: 16px 14px 0; }
    .gc-mid { padding: 14px 14px 2px; }
    .gc-foot { padding: 12px 14px 14px; }
    .gc-title { font-size: 17px; }
    .gc-q { font-size: 16px; }
}

/* 主题层压过：确保 gc 扁平底栏不被通用按钮皮肤盖住（基线 token，无 color-mix） */
body.game-page .gc-dialog .gc-foot > .modal-btn,
body.game-page .gc-dialog .gc-foot > .modal-btn:hover,
body.game-page .gc-dialog .gc-foot > .modal-btn:focus-visible,
body.game-page .gc-dialog .gc-foot__ok,
body.game-page .gc-dialog .modal-btn--full {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}
body.game-page .gc-dialog .gc-foot > .modal-btn--gold,
body.game-page .gc-dialog .gc-foot__ok.modal-btn--gold,
body.game-page .gc-dialog .modal-btn--full.modal-btn--gold {
    background: var(--gradient-gold, rgba(183, 120, 31, 0.12)) !important;
    border: 1px solid var(--border-gold, rgba(183, 120, 31, 0.40)) !important;
    color: var(--text-gold, var(--accent-gold)) !important;
}
body.game-page .gc-dialog .gc-foot > .modal-btn--gold:hover,
body.game-page .gc-dialog .gc-foot__ok.modal-btn--gold:hover,
body.game-page .gc-dialog .modal-btn--full.modal-btn--gold:hover {
    background: var(--gradient-gold, rgba(183, 120, 31, 0.18)) !important;
    border-color: var(--border-gold, rgba(183, 120, 31, 0.55)) !important;
}
body.game-page .gc-dialog .gc-foot > .modal-btn--jade,
body.game-page .gc-dialog .gc-foot__ok.modal-btn--jade,
body.game-page .gc-dialog .modal-btn--full.modal-btn--jade {
    background: var(--gradient-jade, rgba(22, 128, 106, 0.12)) !important;
    border: 1px solid var(--border-jade, rgba(22, 128, 106, 0.40)) !important;
    color: var(--text-jade, var(--accent-jade)) !important;
}
body.game-page .gc-dialog .gc-foot > .modal-btn--jade:hover,
body.game-page .gc-dialog .gc-foot__ok.modal-btn--jade:hover,
body.game-page .gc-dialog .modal-btn--full.modal-btn--jade:hover {
    background: var(--gradient-jade, rgba(22, 128, 106, 0.18)) !important;
    border-color: var(--border-jade, rgba(22, 128, 106, 0.55)) !important;
}
body.game-page .gc-dialog .gc-foot > .modal-btn--danger,
body.game-page .gc-dialog .gc-foot__ok.modal-btn--danger,
body.game-page .gc-dialog .modal-btn--full.modal-btn--danger {
    background: rgba(183, 58, 49, 0.12) !important;
    border: 1px solid rgba(183, 58, 49, 0.40) !important;
    color: var(--text-danger, var(--accent-crimson)) !important;
}
body.game-page .gc-dialog .gc-foot > .modal-btn--danger:hover,
body.game-page .gc-dialog .gc-foot__ok.modal-btn--danger:hover {
    background: rgba(183, 58, 49, 0.18) !important;
    border-color: rgba(183, 58, 49, 0.55) !important;
}
body.game-page .gc-dialog .gc-foot > .modal-btn--outline {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}
body.game-page .gc-dialog .gc-foot > .modal-btn--outline:hover {
    background: var(--bg-active, rgba(42, 42, 38, 0.04)) !important;
    border-color: var(--border-gold, var(--border-color)) !important;
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   color-mix 增强层（Safari 16.2+ / 现代 Chrome）
   旧 iOS 整块跳过，基线 token 样式继续生效
   ═══════════════════════════════════════════════════════════════ */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .modal-btn--gold {
        background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
        border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    }
    .modal-btn--gold:hover {
        background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
        border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    }
    .modal-btn--outline:hover {
        background: color-mix(in srgb, var(--text-primary) 4%, transparent);
        border-color: color-mix(in srgb, var(--accent-gold) 35%, var(--border-color));
    }
    .modal-btn--orange {
        background: color-mix(in srgb, var(--accent-orange, #9a6b3d) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent-orange, #9a6b3d) 40%, transparent);
    }
    .modal-btn--orange:hover {
        background: color-mix(in srgb, var(--accent-orange, #9a6b3d) 18%, transparent);
    }
    .modal-btn--danger {
        background: color-mix(in srgb, var(--jimo-crimson, var(--accent-crimson)) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--jimo-crimson, var(--accent-crimson)) 36%, transparent);
    }
    .modal-btn--danger:hover {
        background: color-mix(in srgb, var(--jimo-crimson, var(--accent-crimson)) 16%, transparent);
        border-color: color-mix(in srgb, var(--jimo-crimson, var(--accent-crimson)) 48%, transparent);
    }
    .modal-btn--jade {
        background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent-jade) 40%, transparent);
    }
    .modal-btn--jade:hover {
        background: color-mix(in srgb, var(--accent-jade) 18%, transparent);
        border-color: color-mix(in srgb, var(--accent-jade) 55%, transparent);
    }

    body.game-page .modal-content.modal--decorated.gc-dialog,
    .modal-content.modal--decorated.gc-dialog,
    .gc-dialog {
        border-color: color-mix(in srgb, var(--gc-tone) 22%, var(--border-color));
    }
    .gc-rule {
        background: linear-gradient(
            90deg,
            var(--gc-tone, var(--accent-jade)),
            color-mix(in srgb, var(--accent-gold) 70%, transparent)
        );
    }
    .gc-dialog[data-tone="danger"] .gc-rule {
        background: linear-gradient(
            90deg,
            var(--accent-crimson),
            color-mix(in srgb, var(--accent-gold) 50%, transparent)
        );
    }
    .gc-dialog[data-tone="warn"] .gc-rule,
    .gc-dialog[data-tone="gold"] .gc-rule {
        background: linear-gradient(
            90deg,
            var(--accent-gold),
            color-mix(in srgb, var(--accent-crimson) 40%, transparent)
        );
    }
    .gc-detail__row + .gc-detail__row {
        border-top: 1px dashed color-mix(in srgb, var(--border-color) 85%, transparent);
    }
    .gc-irrev {
        background: color-mix(in srgb, var(--accent-crimson) 8%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent-crimson) 28%, var(--border-color));
    }

    .gc-dialog .gc-foot__ok.modal-btn--danger,
    .gc-dialog .modal-btn--full.modal-btn--danger {
        background: color-mix(in srgb, var(--accent-crimson) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent-crimson) 40%, transparent);
    }
    .gc-dialog .gc-foot__ok.modal-btn--danger:hover,
    .gc-dialog .modal-btn--full.modal-btn--danger:hover {
        background: color-mix(in srgb, var(--accent-crimson) 18%, transparent);
        border-color: color-mix(in srgb, var(--accent-crimson) 55%, transparent);
    }
    .gc-dialog .gc-foot__ok.modal-btn--jade,
    .gc-dialog .modal-btn--full.modal-btn--jade {
        background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent-jade) 40%, transparent);
    }
    .gc-dialog .gc-foot__ok.modal-btn--jade:hover,
    .gc-dialog .modal-btn--full.modal-btn--jade:hover {
        background: color-mix(in srgb, var(--accent-jade) 18%, transparent);
        border-color: color-mix(in srgb, var(--accent-jade) 55%, transparent);
    }
    .gc-dialog .gc-foot__ok.modal-btn--gold,
    .gc-dialog .modal-btn--full.modal-btn--gold {
        background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    }
    .gc-dialog .gc-foot__ok.modal-btn--gold:hover,
    .gc-dialog .modal-btn--full.modal-btn--gold:hover {
        background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
        border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    }
    .gc-dialog .gc-foot > .modal-btn--outline:hover {
        background: color-mix(in srgb, var(--text-primary) 4%, transparent);
        border-color: color-mix(in srgb, var(--accent-gold) 35%, var(--border-color));
    }

    body.game-page .gc-dialog .gc-foot > .modal-btn--gold,
    body.game-page .gc-dialog .gc-foot__ok.modal-btn--gold,
    body.game-page .gc-dialog .modal-btn--full.modal-btn--gold {
        background: color-mix(in srgb, var(--accent-gold) 12%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent) !important;
    }
    body.game-page .gc-dialog .gc-foot > .modal-btn--gold:hover,
    body.game-page .gc-dialog .gc-foot__ok.modal-btn--gold:hover,
    body.game-page .gc-dialog .modal-btn--full.modal-btn--gold:hover {
        background: color-mix(in srgb, var(--accent-gold) 18%, transparent) !important;
        border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent) !important;
    }
    body.game-page .gc-dialog .gc-foot > .modal-btn--jade,
    body.game-page .gc-dialog .gc-foot__ok.modal-btn--jade,
    body.game-page .gc-dialog .modal-btn--full.modal-btn--jade {
        background: color-mix(in srgb, var(--accent-jade) 12%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--accent-jade) 40%, transparent) !important;
    }
    body.game-page .gc-dialog .gc-foot > .modal-btn--jade:hover,
    body.game-page .gc-dialog .gc-foot__ok.modal-btn--jade:hover,
    body.game-page .gc-dialog .modal-btn--full.modal-btn--jade:hover {
        background: color-mix(in srgb, var(--accent-jade) 18%, transparent) !important;
        border-color: color-mix(in srgb, var(--accent-jade) 55%, transparent) !important;
    }
    body.game-page .gc-dialog .gc-foot > .modal-btn--danger,
    body.game-page .gc-dialog .gc-foot__ok.modal-btn--danger,
    body.game-page .gc-dialog .modal-btn--full.modal-btn--danger {
        background: color-mix(in srgb, var(--accent-crimson) 12%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--accent-crimson) 40%, transparent) !important;
    }
    body.game-page .gc-dialog .gc-foot > .modal-btn--danger:hover,
    body.game-page .gc-dialog .gc-foot__ok.modal-btn--danger:hover {
        background: color-mix(in srgb, var(--accent-crimson) 18%, transparent) !important;
        border-color: color-mix(in srgb, var(--accent-crimson) 55%, transparent) !important;
    }
    body.game-page .gc-dialog .gc-foot > .modal-btn--outline:hover {
        background: color-mix(in srgb, var(--text-primary) 4%, transparent) !important;
        border-color: color-mix(in srgb, var(--accent-gold) 35%, var(--border-color)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   道体登记 / 道体重塑（gc-dialog 族 · 三选一）
   ═══════════════════════════════════════════════════════════════ */
.gd-dialog {
    max-width: 380px;
    width: 90%;
}
.gd-mid {
    padding-top: 12px;
}
.gd-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--gc-radius-inner, 10px);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
}
.gd-status__k {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.gd-status__v {
    font-family: var(--font-serif, "Songti SC", STSong, serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text-jade, var(--accent-jade));
}
.gd-status__v.is-empty {
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 1px;
}
.gd-dialog[data-tone="gold"] .gd-status__v:not(.is-empty) {
    color: var(--text-gold, var(--accent-gold));
}
.gd-mid .gc-sub {
    margin-top: 10px;
    margin-bottom: 0;
}
.gd-opts {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}
.gd-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 12px 14px;
    border-radius: var(--gc-radius-inner, 10px);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.gd-opt__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.gd-opt__label {
    font-family: var(--font-serif, "Songti SC", STSong, serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 1.3;
}
.gd-opt__hint {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 1px;
}
.gd-opt__meta {
    flex-shrink: 0;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.gd-opt.is-pick:hover,
.gd-opt.is-reshape:hover {
    border-color: color-mix(in srgb, var(--accent-jade) 42%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 8%, var(--bg-panel));
}
.gd-dialog[data-tone="gold"] .gd-opt.is-reshape:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-panel));
}
.gd-opt.is-pick .gd-opt__meta {
    color: var(--text-jade, var(--accent-jade));
    font-weight: 600;
}
.gd-opt.is-reshape .gd-opt__meta {
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
}
.gd-opt.is-current {
    border-color: color-mix(in srgb, var(--accent-jade) 36%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 10%, var(--bg-panel));
    cursor: default;
}
.gd-dialog[data-tone="gold"] .gd-opt.is-current {
    border-color: color-mix(in srgb, var(--accent-gold) 36%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-panel));
}
.gd-opt.is-current .gd-opt__label {
    color: var(--text-jade, var(--accent-jade));
}
.gd-dialog[data-tone="gold"] .gd-opt.is-current .gd-opt__label {
    color: var(--text-gold, var(--accent-gold));
}
.gd-opt.is-current .gd-opt__meta {
    color: var(--text-jade, var(--accent-jade));
    font-weight: 600;
}
.gd-dialog[data-tone="gold"] .gd-opt.is-current .gd-opt__meta {
    color: var(--text-gold, var(--accent-gold));
}
.gd-opt.is-disabled:not(.is-current) {
    opacity: 0.55;
    cursor: not-allowed;
}
.gd-opt:disabled {
    cursor: not-allowed;
}
.gd-opt:active:not(:disabled):not(.is-disabled) {
    opacity: 0.92;
}
.gd-mid .gc-note {
    margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   showDecoratedActionDialog · 通用操作笺（da-dialog / gc 工厂）
   subtitle→gc-title；valueHtml/descHtml 入 mid；actionsHtml 入 foot
   ═══════════════════════════════════════════════════════════════ */
body.game-page .modal-content.modal--decorated.gc-dialog.da-dialog,
.modal-content.modal--decorated.gc-dialog.da-dialog,
.gc-dialog.da-dialog {
    display: flex;
    flex-direction: column;
    width: min(92vw, 400px);
    max-width: 400px;
    max-height: min(88dvh, 680px);
    overflow: hidden;
    padding: 0;
    background: var(--bg-card, var(--bg-panel)) !important;
}
.da-head {
    position: relative;
    padding: 16px 48px 8px 16px;
    flex-shrink: 0;
    background: var(--bg-card, var(--bg-panel));
    z-index: 1;
}
.da-head .gc-rule { margin-bottom: 10px; }
/* 关闭 × 样式见文件顶部统一 .modal-header-close */
body.game-page .gc-dialog.da-dialog .gc-mid.da-mid,
.gc-dialog.da-dialog .gc-mid.da-mid,
.da-mid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    text-align: left;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px 14px 12px;
    scrollbar-width: none;
}
.da-mid::-webkit-scrollbar { display: none; }
.da-hero {
    text-align: center;
    margin: 0 0 10px;
    font-variant-numeric: tabular-nums;
}
.da-hero .modal-header-deco__num {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}
.da-desc {
    margin: 0 0 10px;
    text-align: center;
}
.da-foot {
    flex-shrink: 0;
    margin-top: 0;
    padding: 10px 14px max(12px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}
@media (min-width: 768px) {
    body.game-page .modal-content.modal--decorated.gc-dialog.da-dialog,
    .modal-content.modal--decorated.gc-dialog.da-dialog,
    .gc-dialog.da-dialog {
        width: min(92vw, 440px);
        max-width: 440px;
    }
}