/* 万魔渊副本列表面板 + 守关面板样式。
 * chrome 复用 gc-panel(game-panels.css),弹窗复用 gc-dialog(game-dialog.css)。
 * 本文件只定义面板内和弹窗内的业务组件,不覆盖 gc-dialog 的基础样式。
 */

/* === 副本面板组件 === */
.instance-notice {
    margin: 0 0 var(--space-14); padding: var(--space-10) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 22%, transparent);
    border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent-gold) 5%, transparent);
    color: var(--text-muted); font-size: var(--font-label); line-height: 1.6;
}
.instance-notice__title { margin-bottom: var(--space-2); color: var(--text-gold); font-size: var(--font-label); font-weight: 700; }
.instance-section { margin-bottom: var(--space-20); }
.instance-section-title {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: var(--space-10); font-size: var(--font-body-lg); font-weight: 700; letter-spacing: 1px;
}
.instance-section-title__count { font-size: var(--font-caption); color: var(--text-gold); font-weight: 500; }
.instance-list { display: flex; flex-direction: column; gap: var(--space-10); }
.instance-card {
    padding: var(--space-14); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: var(--bg-card); transition: border-color .2s;
}
.instance-card--danger { border-color: color-mix(in srgb, var(--accent-crimson) 20%, transparent); }
.instance-card__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.instance-card__name { font-family: var(--font-serif); font-size: var(--font-action); font-weight: 700; letter-spacing: 1px; }
.instance-card__status { font-size: var(--font-micro); padding: var(--space-2) var(--space-8); border-radius: var(--radius-pill); font-weight: 600; }
.instance-card__status--open { background: color-mix(in srgb, var(--accent-jade) 12%, transparent); color: var(--text-jade); border: 1px solid var(--border-jade); }
.instance-card__status--closed { background: color-mix(in srgb, var(--text-muted) 10%, transparent); color: var(--text-muted); border: 1px solid var(--border-color); }
.instance-card__status--dead { background: color-mix(in srgb, var(--accent-crimson) 10%, transparent); color: var(--text-red); border: 1px solid color-mix(in srgb, var(--accent-crimson) 22%, transparent); }
.instance-card__desc { font-size: var(--font-label); color: var(--text-muted); line-height: 1.65; margin: 0 0 var(--space-10); }
.instance-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-10); }
.instance-card__tag { font-size: var(--font-micro); padding: var(--space-2) var(--space-8); border-radius: var(--radius-xs); font-weight: 500; white-space: nowrap; }
.instance-card__tag--danger { background: color-mix(in srgb, var(--accent-crimson) 7%, transparent); color: var(--text-red); border: 1px solid color-mix(in srgb, var(--accent-crimson) 18%, transparent); }
.instance-card__tag--pvp { background: color-mix(in srgb, var(--accent-purple) 8%, transparent); color: var(--accent-purple); border: 1px solid color-mix(in srgb, var(--accent-purple) 18%, transparent); }
.instance-card__tag--reward { background: var(--gradient-jade); color: var(--text-jade); border: 1px solid var(--border-jade); }
.instance-card__tag--faction { background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-color); }
.instance-card__info-btns { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-10); }
.instance-info-btn--shop {
    border-color: color-mix(in srgb, var(--accent-gold, #c9a227) 35%, transparent);
    color: var(--text-gold, #c9a227);
}
/* 魔渊边市兑换列表 */
.wm-shop-balance {
    font-size: var(--font-label);
    color: var(--text-secondary);
    margin: 0 0 var(--space-10);
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold, #c9a227) 22%, transparent);
    background: color-mix(in srgb, var(--accent-gold, #c9a227) 6%, transparent);
}
.wm-shop-balance__num { color: var(--text-gold, #c9a227); font-weight: 700; }
.wm-shop-balance__eff {
    display: block;
    margin-top: var(--space-4);
    font-size: var(--font-label);
    color: var(--text-muted, #888);
}
.wm-shop-row__auto {
    color: var(--accent-jade, #3d9a7a);
    font-size: var(--font-caption);
    font-weight: 500;
}
.wm-shop-quick {
    margin: 0 0 var(--space-10);
}
.wm-shop-quick__btn {
    width: 100%;
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold, #c9a227) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold, #c9a227) 12%, transparent);
    color: var(--text-gold, #c9a227);
    font-size: var(--font-body);
    font-weight: 600;
    cursor: pointer;
}
.wm-shop-quick__btn:hover {
    background: color-mix(in srgb, var(--accent-gold, #c9a227) 20%, transparent);
}
.wm-shop-balance__hint {
    display: block;
    margin-top: var(--space-4);
    font-size: var(--font-micro);
    color: var(--text-muted);
    line-height: 1.45;
}
.wm-shop-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-height: min(52vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.wm-shop-list::-webkit-scrollbar { display: none; }
.wm-shop-sec {
    margin: var(--space-4) 0 0;
    padding: var(--space-4) var(--space-2);
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-gold, #c9a227);
}
.wm-shop-row {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    /* 使用主题 token，避免 --surface-elevated 缺失时回退 #fff 导致夜间白底 */
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    background: var(--bg-card);
}
.wm-shop-row.is-locked { opacity: 0.72; }
.wm-shop-row__main { flex: 1; min-width: 0; }
.wm-shop-row__name {
    font-size: var(--font-body);
    font-weight: 650;
    color: var(--text-primary);
    line-height: 1.35;
}
.wm-shop-row__desc {
    margin-top: var(--space-2);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.4;
}
.wm-shop-row__cost {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-secondary);
}
.wm-shop-row__cost b { color: var(--text-gold, #c9a227); }
.wm-shop-row__limit {
    margin-top: var(--space-2);
    font-size: var(--font-micro);
    color: var(--text-muted, var(--text-secondary));
}
.wm-shop-row__limit.is-soldout,
.wm-shop-row.is-soldout .wm-shop-row__name {
    color: color-mix(in srgb, var(--text-danger, #b54a4a) 85%, var(--text-secondary));
}
.wm-shop-row__btn {
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--accent-jade, #3d8b6e) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade, #3d8b6e) 10%, transparent);
    color: var(--text-jade, #2f6b54);
    font-size: var(--font-label);
    font-weight: 650;
    padding: var(--space-6) var(--space-12);
    border-radius: var(--radius-pill);
    cursor: pointer;
}
.wm-shop-row__btn.is-disabled,
.wm-shop-row__btn:disabled {
    cursor: not-allowed;
    border-color: color-mix(in srgb, var(--text-muted) 30%, transparent);
    background: transparent;
    color: var(--text-muted);
}
.wm-shop-row__actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
}
/* #12427 批量兑换勾选框：44×44 命中区包住原生勾选框（全局金色口径） */
.wm-shop-row__check {
    align-self: center;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.wm-shop-row__check input[type='checkbox'] {
    accent-color: var(--text-gold, #c9a227);
}
.wm-shop-row__btn--bulk {
    border-color: color-mix(in srgb, var(--text-gold, #c9a227) 40%, transparent);
    background: color-mix(in srgb, var(--text-gold, #c9a227) 12%, transparent);
    color: var(--text-gold, #c9a227);
    padding: var(--space-6) var(--space-10);
    font-size: var(--font-caption);
}
/* 可选兑换次数：随主题 token，避免夜间白底 */
.wm-shop-row__qty {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-6);
    flex-wrap: wrap;
}
.wm-shop-row__qty-label {
    font-size: var(--font-micro);
    color: var(--text-muted);
    flex-shrink: 0;
}
.wm-shop-row__qty-input {
    width: 4.2em;
    min-width: 3.5em;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    background: var(--bg-input, var(--bg-card));
    color: var(--text-primary);
    font-size: var(--font-label);
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
.wm-shop-row__qty-input::-webkit-outer-spin-button,
.wm-shop-row__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wm-shop-row__qty-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-gold, #c9a227) 55%, transparent);
}
.wm-shop-row__qty-maxhint {
    font-size: var(--font-micro);
    color: var(--text-muted);
}
.instance-card__prefs {
    margin: 0 0 var(--space-10);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-crimson) 16%, transparent);
    background: color-mix(in srgb, var(--accent-crimson) 4%, transparent);
}
.instance-card__prefs-title {
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-8);
}
.instance-card__prefs-hint {
    font-size: var(--font-micro);
    font-weight: 500;
    color: var(--text-muted);
    margin-left: var(--space-4);
}
.instance-card__pref {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-label);
    color: var(--text-secondary);
    margin: 0 0 var(--space-6);
    cursor: pointer;
    user-select: none;
}
.instance-card__pref:last-child { margin-bottom: 0; }
.instance-card__pref input {
    width: 15px;
    height: 15px;
    accent-color: var(--accent-jade, #3d8b6e);
    flex-shrink: 0;
}
.instance-info-btn {
    flex: 1; height: 32px; border: 1px solid var(--border-color); background: var(--bg-input);
    border-radius: var(--radius-sm); font-size: var(--font-caption); font-weight: 500; color: var(--text-secondary);
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--space-4);
    transition: all .15s; font-family: inherit; -webkit-appearance: none; appearance: none;
}
.instance-info-btn:hover { border-color: var(--border-gold); color: var(--text-gold); background: color-mix(in srgb, var(--accent-gold) 5%, transparent); }
.instance-card__acts {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
}
.instance-btn {
    flex: 0 0 auto; min-height: 44px; padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md); font-size: var(--font-label); font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .15s; font-family: inherit; border: 1px solid transparent;
    -webkit-appearance: none; appearance: none;
}
.instance-card__acts > .instance-btn { width: 100%; }
.instance-card__feed {
    margin-top: var(--space-12);
    padding-top: var(--space-10);
    border-top: 1px dashed color-mix(in srgb, var(--accent-crimson) 20%, transparent);
}
.instance-card__feed-title {
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
}
.instance-card__feed-empty {
    margin: 0;
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.5;
}
.instance-card__feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-height: 168px;
    overflow-y: auto;
}
.instance-card__feed-item {
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-secondary);
}
.instance-card__feed-item--death { color: var(--text-red); }
.instance-card__feed-item--kicked { color: var(--text-gold); }
/* #13643 悬赏榜定位：行内小钮，与说明文字同行、右靠不挤压换行 */
.instance-card__feed-item:has(.instance-card__feed-loc) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
}
.instance-card__feed-line { flex: 1 1 auto; min-width: 0; }
.instance-card__feed-loc {
    flex: 0 0 auto;
    font-size: var(--font-caption);
    line-height: 1.5;
    padding: 0 var(--space-8);
    border: 1px solid color-mix(in srgb, var(--accent-crimson) 24%, transparent);
    background: color-mix(in srgb, var(--accent-crimson) 6%, transparent);
    color: var(--text-red);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.instance-card__feed-loc:hover { background: color-mix(in srgb, var(--accent-crimson) 12%, transparent); }
.instance-card__feed-loc:focus-visible {
    outline: 2px solid var(--text-gold);
    outline-offset: 2px;
}
.instance-btn:focus-visible {
    outline: 2px solid var(--text-gold);
    outline-offset: 2px;
}
.instance-btn--primary { border: 1px solid color-mix(in srgb, var(--accent-crimson) 32%, transparent); background: color-mix(in srgb, var(--accent-crimson) 8%, transparent); color: var(--text-red); }
.instance-btn--primary:hover { background: color-mix(in srgb, var(--accent-crimson) 14%, transparent); }
.instance-btn--primary:disabled { opacity: .45; cursor: not-allowed; }
.instance-btn--ghost { border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent); background: transparent; color: var(--text-muted); }
.instance-btn--ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--text-muted) 8%, transparent); }
.instance-btn--ghost:disabled { opacity: .4; cursor: not-allowed; }
.instance-card__hint { font-size: var(--font-label); color: var(--text-muted); text-align: center; padding: var(--space-8) 0; line-height: 1.6; }
.instance-card__hunt { margin-top: var(--space-10); padding-top: var(--space-10); border-top: 1px dashed color-mix(in srgb, var(--accent-crimson) 20%, transparent); }
.instance-card__hunt-info { font-size: var(--font-label); color: var(--text-muted); margin-bottom: var(--space-8); }
.instance-card__hunt-info b { color: var(--text-red); }
.instance-card__hunt-btns { display: flex; gap: var(--space-8); }
.instance-card__hunt-btns .instance-btn { flex: 1; }
.instance-placeholder { padding: var(--space-16) var(--space-14); text-align: center; border: 1px dashed color-mix(in srgb, var(--accent-gold) 25%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-gold) 4%, transparent); color: var(--text-gray); font-size: var(--font-label); }

/* === 守关面板组件 === */
.gate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-bottom: var(--space-16); }
.gate-card { padding: var(--space-12) var(--space-8); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); cursor: pointer; text-align: center; transition: all .15s; display: flex; flex-direction: column; gap: var(--space-4); align-items: center; -webkit-appearance: none; appearance: none; font-family: inherit; }
.gate-card:hover { border-color: color-mix(in srgb, var(--accent-gold) 30%, transparent); }
.gate-card.is-active { border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent); background: color-mix(in srgb, var(--accent-gold) 6%, transparent); }
.gate-card__icon { font-size: var(--font-heading); line-height: 1; }
.gate-card__name { font-family: var(--font-serif); font-size: var(--font-body); font-weight: 700; }
.gate-card__risk { font-size: var(--font-micro); font-weight: 600; padding: var(--space-2) var(--space-6); border-radius: var(--radius-xs); }
.gate-card__risk--high { background: color-mix(in srgb, var(--accent-crimson) 10%, transparent); color: var(--text-red); }
.gate-card__risk--mid { background: color-mix(in srgb, var(--accent-gold) 10%, transparent); color: var(--text-gold); }
.gate-card__risk--low { background: color-mix(in srgb, var(--accent-jade) 10%, transparent); color: var(--text-jade); }

.seat-card { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; margin-bottom: var(--space-14); }
.seat-card__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-10) var(--space-14); background: var(--bg-input); border-bottom: 1px solid var(--border-color); }
.seat-card__realm { font-family: var(--font-serif); font-size: var(--font-body-lg); font-weight: 700; }
.seat-card__body { padding: var(--space-12) var(--space-14); }
.seat-card__occupant { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-8); }
.seat-card__name { font-size: var(--font-body); font-weight: 600; }
.seat-card__faction { font-size: var(--font-micro); padding: var(--space-2) var(--space-6); border-radius: var(--radius-xs); font-weight: 600; }
.faction--taichu { background: color-mix(in srgb, var(--accent-gold) 10%, transparent); color: var(--text-gold); }
.faction--moyuan { background: color-mix(in srgb, var(--accent-crimson) 10%, transparent); color: var(--text-red); }
.faction--jiuxiao { background: var(--bg-input); color: var(--text-secondary); }
.faction--sanxiu { background: var(--bg-input); color: var(--text-muted); }
.seat-card__stats { display: flex; gap: var(--space-16); font-size: var(--font-caption); color: var(--text-muted); margin-bottom: var(--space-10); }
.seat-card__stat span { font-weight: 600; color: var(--text-secondary); }
.seat-card__acts { display: flex; gap: var(--space-8); }
.seat-card__btn { flex: 1; height: 32px; border-radius: var(--radius-sm); font-size: var(--font-label); font-weight: 600; cursor: pointer; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; font-family: inherit; -webkit-appearance: none; appearance: none; }
.seat-card__btn--challenge { border-color: color-mix(in srgb, var(--accent-crimson) 30%, transparent); background: color-mix(in srgb, var(--accent-crimson) 7%, transparent); color: var(--text-red); }
.seat-card__btn--occupy { border-color: color-mix(in srgb, var(--accent-jade) 30%, transparent); background: color-mix(in srgb, var(--accent-jade) 7%, transparent); color: var(--text-jade); }
.seat-card__btn--snapshot { border-color: color-mix(in srgb, var(--accent-gold, #c9a227) 35%, transparent); background: color-mix(in srgb, var(--accent-gold, #c9a227) 9%, transparent); color: var(--text-gold, #b8860b); }
.seat-card__btn--release { border-color: color-mix(in srgb, var(--text-muted) 30%, transparent); background: color-mix(in srgb, var(--text-muted) 7%, transparent); color: var(--text-muted); }
.seat-card__tag { font-size: var(--font-caption); font-weight: 600; color: var(--text-jade); padding: var(--space-2) var(--space-8); border-radius: var(--radius-xs); background: color-mix(in srgb, var(--accent-jade) 10%, transparent); }
.seat-card__hint { font-size: var(--font-caption); line-height: 1.45; color: var(--text-muted); margin: 0 0 var(--space-10); }
.seat-empty { text-align: center; padding: var(--space-16); font-size: var(--font-label); color: var(--text-muted); margin-bottom: var(--space-10); }

/* === 弹窗内业务样式(不覆盖 gc-dialog 基础)== */
.lore-text { font-size: var(--font-body); color: var(--text-secondary); line-height: 1.85; }
.lore-text p { margin-bottom: var(--space-14); text-indent: 2em; }
.lore-text p:last-child { margin-bottom: 0; }
.rule-list { display: flex; flex-direction: column; gap: var(--space-10); }
.rule-item { display: flex; gap: var(--space-10); align-items: flex-start; padding: var(--space-10) var(--space-12); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-input); }
.rule-item__icon { flex: 0 0 24px; font-size: var(--font-title); text-align: center; line-height: 1.5; }
.rule-item__title { font-size: var(--font-label); font-weight: 700; margin-bottom: var(--space-4); }
.rule-item__text { font-size: var(--font-caption); color: var(--text-muted); line-height: 1.65; }