/* ============================================================
   小王创房 · 界面样式
   亮色为主 · 支持自定义主题调色盘
   （明暗模式 / 主色调 / 圆角 / 字号，全部由 JS 注入 CSS 变量）
   ============================================================ */

/* ---------- 亮色（默认） ---------- */
:root {
    /* 主色（调色盘可覆盖） */
    --brand: #f0a70a;
    --brand-2: #d98c00;
    --brand-ink: #4a3200;
    --brand-soft: rgba(240, 167, 10, .12);

    --blue: #2f7cf6;
    --blue-soft: rgba(47, 124, 246, .10);
    --red: #e8384f;
    --red-soft: rgba(232, 56, 79, .10);
    --green: #12a67a;
    --green-soft: rgba(18, 166, 122, .10);

    /* 表面 */
    --bg-0: #f4f6fa;
    --bg-1: #ffffff;
    --panel: #ffffff;
    --panel-2: #f7f9fc;
    --line: #e5e9f0;
    --line-strong: #d2d8e4;

    --text: #1a2033;
    --text-2: #59637a;
    --text-3: #8b94a8;

    --shadow-1: 0 1px 3px rgba(24, 34, 62, .06), 0 4px 14px rgba(24, 34, 62, .05);
    --shadow-2: 0 10px 34px rgba(24, 34, 62, .14);

    /* 交互态 */
    --hover: rgba(20, 30, 60, .045);
    --active: rgba(20, 30, 60, .07);
    --input-bg: #f7f9fc;
    --scrim: rgba(20, 26, 44, .35);

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --fs-scale: 1;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 暗色 ---------- */
html[data-theme="dark"] {
    --bg-0: #0b0f1a;
    --bg-1: #131826;
    --panel: #161d2e;
    --panel-2: #1b2336;
    --line: #262f44;
    --line-strong: #38435c;

    --text: #e8ecf7;
    --text-2: #a2adc4;
    --text-3: #6f7a92;

    --shadow-1: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .28);
    --shadow-2: 0 14px 40px rgba(0, 0, 0, .55);

    --hover: rgba(255, 255, 255, .05);
    --active: rgba(255, 255, 255, .08);
    --input-bg: rgba(255, 255, 255, .045);
    --scrim: rgba(4, 7, 14, .68);

    --brand-ink: #241a02;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    color: var(--text);
    background: var(--bg-0);
    font-size: calc(15px * var(--fs-scale));
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color .25s var(--ease), color .25s var(--ease);
}

/* ============ 布局 ============ */
.wrap {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px 96px;
}

/* ============ 顶栏 ============ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(24, 34, 62, .04);
}

.topbar-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.logo {
    width: 36px; height: 36px;
    border-radius: 11px;
    background: linear-gradient(140deg, var(--brand), var(--brand-2));
    display: grid; place-items: center;
    font-weight: 800;
    font-size: 16px;
    color: var(--brand-ink);
    flex: 0 0 auto;
    box-shadow: 0 4px 12px rgba(240, 167, 10, .28);
}

.brand { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand b { font-size: 15.5px; letter-spacing: .2px; white-space: nowrap; }
.brand span { font-size: 10.5px; color: var(--text-3); letter-spacing: 1.2px; text-transform: uppercase; }

.topbar-spacer { flex: 1; }

/* 图标按钮 */
.icon-btn {
    width: 36px; height: 36px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text-2);
    display: grid; place-items: center;
    cursor: pointer;
    font-size: 17px;
    transition: all .18s var(--ease);
    flex: 0 0 auto;
    padding: 0;
    line-height: 1;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn:active { transform: scale(.94); }

/* ============ 服务器切换 ============ */
.server-switch {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.server-switch button {
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
    white-space: nowrap;
}

.server-switch button.on {
    background: linear-gradient(140deg, var(--brand), var(--brand-2));
    color: var(--brand-ink);
    box-shadow: 0 2px 8px rgba(240, 167, 10, .26);
}

/* ============ 卡片 ============ */
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    margin-top: 13px;
    overflow: hidden;
    transition: background-color .25s var(--ease), border-color .25s var(--ease);
}

.card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 16px 11px;
}

.card-head .dot {
    width: 3px; height: 15px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    flex: 0 0 auto;
}

.card-head h2 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .1px;
}

.card-head .sub {
    font-size: 11.5px;
    color: var(--text-3);
    margin-left: auto;
    font-weight: 500;
}

.card-body { padding: 0 16px 16px; }

/* ============ 地图选择（横向滑动，省高度） ============ */
.map-grid {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 8px 8px 4px;         /* 上/左/右留白：避免次数徽标被 overflow 裁掉 */
    margin: -8px -8px 0;          /* 抵消留白，视觉位置不变 */
    scrollbar-width: none;        /* Firefox 隐藏滚动条 */
}
.map-grid::-webkit-scrollbar { display: none; }

.map-grid > * {
    flex: 0 0 auto;
    width: 132px;                 /* 固定卡宽，一屏露 2.8 张，暗示可滑动 */
    scroll-snap-align: start;
}

.map-item {
    padding: 11px 12px;
    border-radius: var(--r-md);
    background: var(--panel-2);
    border: 1.5px solid var(--line);
    cursor: pointer;
    transition: all .2s var(--ease);
    position: relative;          /* 次数徽标定位基准 */
}

.map-item:hover { border-color: var(--line-strong); }
.map-item:active { transform: scale(.985); }

.map-item.on {
    background: var(--brand-soft);
    border-color: var(--brand);
    box-shadow: 0 3px 12px rgba(240, 167, 10, .16);
}

.map-item .m-name {
    font-size: 13px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
    color: var(--text);
}

.map-item .m-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 10.5px;
    color: var(--text-3);
}

.map-item .m-tag {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 9.5px;
    font-weight: 700;
}

.map-item.on .m-tag {
    background: rgba(240, 167, 10, .18);
    color: var(--brand-2);
}

/* ============ 建房次数徽标 ============ */
.map-item .m-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-2);
    background: var(--panel);
    border: 1.5px solid var(--line);
    box-shadow: 0 1px 4px rgba(16, 24, 40, .08);
    pointer-events: none;        /* 不挡点击 */
}

/* 最高频次：跟品牌色走 */
.map-item .m-count.hot {
    color: #fff;
    background: linear-gradient(160deg, var(--brand), var(--brand-2));
    border-color: transparent;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 40%, transparent);
}

/* 选中卡片上的徽标，避免和品牌色描边撞色 */
.map-item.on .m-count {
    background: var(--panel);
    border-color: var(--brand);
    color: var(--brand-2);
}
/* 选中时「最高频次」仍保持实心，确保一眼可辨 */
.map-item.on .m-count.hot {
    background: linear-gradient(160deg, var(--brand), var(--brand-2));
    border-color: transparent;
    color: #fff;
}

/* ============ 卡片底部汇总栏 ============ */
.map-stat-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--line);
    font-size: 11px;
    color: var(--text-3);
    flex-wrap: wrap;
}

.map-stat-bar .msb-item { display: inline-flex; align-items: baseline; gap: 3px; }

.map-stat-bar b {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--brand-2);
    font-variant-numeric: tabular-nums;
}

.map-stat-bar .msb-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--line-strong);
    flex: 0 0 auto;
}

/* ============ 表单行 ============ */
.row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }

.row .r-label {
    font-size: 13px;
    color: var(--text-2);
    flex: 0 0 auto;
    min-width: 74px;
    font-weight: 600;
}

.input {
    flex: 1;
    min-width: 0;
    background: var(--input-bg);
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text);
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: inherit;
    transition: all .18s var(--ease);
    outline: none;
    width: 100%;
}

.input:focus {
    border-color: var(--brand);
    background: var(--panel);
    box-shadow: 0 0 0 3px rgba(240, 167, 10, .14);
}

.input::placeholder { color: var(--text-3); }

/* ============ 分段控件 ============ */
.seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    flex: 1;
    min-width: 0;
}

.seg button {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 5px;
    border-radius: 7px;
    cursor: pointer;
    transition: all .18s var(--ease);
    font-family: inherit;
    white-space: nowrap;
}

.seg button:hover { color: var(--text); }

.seg button.on {
    background: linear-gradient(140deg, var(--brand), var(--brand-2));
    color: var(--brand-ink);
    box-shadow: 0 2px 7px rgba(240, 167, 10, .24);
}

/* ============ 标签页 ============ */
.tabs {
    display: flex;
    gap: 5px;
    padding: 0 16px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs button {
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
    white-space: nowrap;
    flex: 0 0 auto;
}

.tabs button.on {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-2);
}

.tab-panel { display: none; }
.tab-panel.on { display: block; animation: fadeUp .25s var(--ease); }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============ 属性行 ============ */
.attr-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.attr-row:last-child { border-bottom: 0; }

.attr-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}

.attr-name { font-size: 13px; font-weight: 700; color: var(--text); }

.attr-name .ic {
    font-size: 14px;
    margin-right: 4px;
    vertical-align: -1px;
}

.attr-val {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand-2);
    background: var(--brand-soft);
    padding: 2px 9px;
    border-radius: 999px;
}

.attr-cur { font-size: 11px; color: var(--text-3); font-weight: 600; margin-left: auto; }

.opts { display: flex; flex-wrap: wrap; gap: 5px; }

.opt {
    border: 1.5px solid var(--line);
    background: var(--panel-2);
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .16s var(--ease);
    font-family: inherit;
    white-space: nowrap;
}

.opt:hover { border-color: var(--line-strong); color: var(--text); }
.opt:active { transform: scale(.95); }

.opt.on {
    background: linear-gradient(140deg, var(--brand), var(--brand-2));
    border-color: transparent;
    color: var(--brand-ink);
    box-shadow: 0 3px 10px rgba(240, 167, 10, .24);
}

/* 阵营块 */
.camp-split { display: grid; grid-template-columns: 1fr; gap: 9px; }

.camp-block {
    padding: 10px 11px;
    border-radius: var(--r-md);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
}

.camp-block.red { border-left-color: var(--red); }

.camp-block .cb-title {
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 7px;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 6px;
}
.camp-block.red .cb-title { color: var(--red); }

/* 一键全队：把该队 5 人设为同一档 */
.camp-block .cb-batch {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 7px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    opacity: .62;
    cursor: pointer;
    transition: all .16s var(--ease);
    line-height: 1.5;
    white-space: nowrap;
}
.camp-block .cb-batch:hover { opacity: 1; background: rgba(127, 127, 127, .1); }
.camp-block .cb-batch:active { transform: scale(.94); }

.player-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-top: 5px;
}

.player-grid .opt {
    padding: 7px 2px;
    text-align: center;
    font-size: 10.5px;
    min-width: 0;
}

/* ============ 英雄选择 ============ */
/* 卡片内「添加禁用英雄」入口 */
.ban-add {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: var(--r-md);
    background: var(--panel-2);
    border: 1.5px dashed var(--line-strong);
    color: var(--text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s var(--ease);
}
.ban-add:hover { border-color: var(--brand); color: var(--brand-2); }
.ban-add:active { transform: scale(.985); }

.ban-add .ba-ico {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--brand-soft);
    color: var(--brand-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex: 0 0 auto;
}

.ban-add .ba-text { flex: 0 0 auto; }

.ban-add .ba-hint {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-3);
}

/* 弹窗内搜索框 */
.hpick-search {
    position: relative;
    margin-bottom: 10px;
}

.hpick-search .input {
    width: 100%;
    padding-right: 38px;
}

.hpick-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: var(--hover);
    color: var(--text-3);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: none;              /* 有输入才显示 */
    align-items: center;
    justify-content: center;
    font-family: inherit;
    padding: 0;
}
.hpick-clear:active { background: var(--active); }

/* 弹窗内网格：比卡片内高得多，减少嵌套滚动 */
.hero-pick-sheet {
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.hero-pick-sheet .hero-grid {
    max-height: none;
    flex: 1 1 auto;
    min-height: 180px;
    overflow-y: auto;
    /* 留出底部按钮空间 */
    margin-bottom: 4px;
}

.hero-search { margin-bottom: 9px; }

.role-filter { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }

.role-filter button {
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: all .18s var(--ease);
}

.role-filter button.on {
    background: var(--blue-soft);
    border-color: var(--blue);
    color: var(--blue);
}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 7px;
    max-height: 300px;
    overflow-y: auto;
    padding: 2px;
    scrollbar-width: thin;
}

.hero-grid::-webkit-scrollbar { width: 5px; }
.hero-grid::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 3px;
}

.hero-chip {
    position: relative;
    /* 网格项默认 stretch：用 flex 让文字在单元格内真正垂直居中
       （否则文字会贴顶/下沉，同行里长短名字的卡片高度也不一致） */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 4px;
    border-radius: 9px;
    background: var(--panel-2);
    border: 1.5px solid var(--line);
    text-align: center;
    cursor: pointer;
    transition: all .16s var(--ease);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--text-2);
    overflow: hidden;
}

.hero-chip:hover { border-color: var(--line-strong); color: var(--text); }
.hero-chip:active { transform: scale(.94); }

.hero-chip.on {
    background: var(--red-soft);
    border-color: var(--red);
    color: var(--red);
}

.hero-chip .hc-order {
    position: absolute;
    top: 1px; right: 4px;
    font-size: 8.5px;
    font-weight: 800;
    color: var(--red);
}

/* ============ 已禁用名单（融合进卡片） ============ */
.ban-selected {
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    padding: 9px 11px 10px;
    margin-bottom: 12px;
    background: rgba(239, 68, 68, .04);
}

/* 超过两行：底部渐隐，暗示还有更多（用遮罩，深浅色都正确） */
.ban-list.clip {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%, #000 calc(100% - 18px), rgba(0, 0, 0, .18) 100%);
    mask-image: linear-gradient(to bottom,
        #000 0%, #000 calc(100% - 18px), rgba(0, 0, 0, .18) 100%);
}

.bs-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.bs-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: .3px;
}

.bs-all {
    margin-left: auto;
    background: transparent;
    border: 0;
    padding: 2px 4px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.bs-all:active { opacity: .65; }

.ban-selected .ban-list { margin-top: 0; }

/* ============ 禁用名单弹窗 ============ */
.ban-sheet {
    max-height: 82vh;
    display: flex;
    flex-direction: column;
}

.bsh {
    padding: 0 2px 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px;
}
.bsh h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    margin: 0 0 2px;
}
.bsh-sub {
    font-size: 11.5px;
    color: var(--text-3);
    font-weight: 600;
}

.bsh-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 4px;
    scrollbar-width: none;
    flex: 0 0 auto;
}
.bsh-tabs::-webkit-scrollbar { display: none; }

.bsh-tabs button {
    flex: 0 0 auto;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.bsh-tabs button.on {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink, #fff);
}

.bsh-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 60px;
    padding-right: 2px;
}

.bsh-group { margin-bottom: 14px; }
.bsh-group:last-child { margin-bottom: 4px; }

.bsh-group-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: .4px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.bsh-group-title em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--line);
    color: var(--text-3);
}

.bsh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bsh-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--red-soft, rgba(239,68,68,.1));
    border: 1px solid rgba(239, 68, 68, .22);
    color: var(--text-1);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bsh-chip:active { opacity: .7; }

.bsh-no {
    font-style: normal;
    font-size: 9px;
    font-weight: 800;
    min-width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
}

.bsh-x {
    font-style: normal;
    font-size: 12px;
    color: var(--red);
    opacity: .65;
    margin-left: 1px;
}

.ban-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
    min-height: 4px;
}

.ban-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--red-soft);
    border: 1px solid rgba(232, 56, 79, .3);
    color: var(--red);
    font-size: 11.5px;
    font-weight: 600;
}

.ban-chip .x {
    cursor: pointer;
    opacity: .6;
    font-size: 13px;
    line-height: 1;
    padding: 0 1px;
}
.ban-chip .x:hover { opacity: 1; }

.empty-hint { font-size: 11.5px; color: var(--text-3); padding: 7px 0; }

/* ============ 我的模板 ============ */
/* 合并进「房间参数」卡片后，基础参数区与模板区的过渡 */
.tpl-base .row {
    padding: 4px 0 14px;
    border-bottom: 0;
    margin-bottom: 0;
}

.tpl-base {
    margin-bottom: 11px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.tpl-tools { margin-bottom: 9px; }
.tpl-tools .btn { width: 100%; padding: 10px; font-size: 13px; }

.tpl-list { display: flex; flex-direction: column; gap: 7px; }

.tpl-empty {
    font-size: 11.5px;
    color: var(--text-3);
    padding: 10px 0;
    text-align: center;
    line-height: 1.7;
}

.tpl-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--panel-2);
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.tpl-item:active { transform: scale(.995); }
.tpl-item:hover { border-color: var(--brand); background: var(--brand-soft); }

.tpl-main { flex: 1 1 130px; min-width: 0; }

/* 操作按钮组：一行放得下就右侧并排，放不下整体换行右对齐 */
.tpl-acts {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.tpl-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpl-meta {
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpl-btn {
    flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--text-2);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all .16s var(--ease);
    line-height: 1;
}
.tpl-btn:active { transform: scale(.94); }

.tpl-btn.apply {
    border-color: transparent;
    background: var(--brand);
    color: var(--brand-ink);
}
.tpl-btn.del { color: var(--red); border-color: rgba(232, 56, 79, .35); }
.tpl-btn.view { color: var(--brand-2); border-color: rgba(240, 167, 10, .35); }

/* 模板命名弹窗 */
.tpl-field { margin-bottom: 11px; }
.tpl-field .input { width: 100%; padding: 11px 12px; font-size: 13.5px; }

.tpl-summary {
    font-size: 11px;
    line-height: 1.8;
    color: var(--text-3);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 9px 11px;
    margin-bottom: 13px;
    max-height: 46vh;
    overflow-y: auto;
}
.tpl-summary b { color: var(--text-2); font-weight: 700; }
.tpl-summary .row { display: flex; gap: 6px; }
.tpl-summary .row .k2 { flex: 0 0 auto; color: var(--text-3); }
.tpl-summary .row .v2 { flex: 1 1 auto; color: var(--text-2); font-weight: 600; word-break: break-all; }

/* 参数明细分隔标题 */
.tpl-summary .dtl-sep {
    margin: 10px 0 7px;
    padding-top: 8px;
    border-top: 1px dashed var(--line-strong);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: .5px;
}

.tpl-summary .dtl-empty {
    font-size: 11px;
    color: var(--text-3);
    padding: 4px 0;
}

.tpl-summary .dtl-group { margin-bottom: 8px; }
.tpl-summary .dtl-group:last-child { margin-bottom: 0; }

.tpl-summary .dtl-gt {
    font-size: 10px;
    font-weight: 800;
    color: var(--brand-2);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tpl-summary .dtl-gt::before {
    content: '';
    width: 2px; height: 9px;
    border-radius: 1px;
    background: var(--brand);
}

.tpl-summary .dtl-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0 2px 7px;
    line-height: 1.65;
}

.tpl-summary .dtl-name {
    flex: 0 0 auto;
    color: var(--text-3);
    font-size: 10.5px;
}

.tpl-summary .dtl-val {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    color: var(--text);
    font-weight: 700;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

/* ---------- 模板详情弹窗（只读查看） ---------- */
.tpl-view-sheet {
    display: flex;
    flex-direction: column;
    overflow: hidden;            /* 只让正文滚动，关闭按钮常驻可见 */
}

.tpl-view-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-bottom: 12px;
    padding: 0;
    background: transparent;
    border: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.tpl-view-sheet .sheet-actions { flex: 0 0 auto; }

/* 禁用英雄名单（全量 chips） */
.tpl-bans {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 2px 0 2px 7px;
}

.tpl-ban-chip {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 6px;
    color: var(--red);
    background: var(--red-soft);
    border: 1px solid rgba(232, 56, 79, .28);
}

/* ============ 预设 ============ */
.preset-row { display: flex; flex-wrap: wrap; gap: 7px; }

.preset {
    border: 1.5px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 13px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: all .18s var(--ease);
    display: flex;
    align-items: center;
    gap: 5px;
}

.preset:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}
.preset:active { transform: scale(.96); }

.preset .pi { font-size: 14px; }

/* ============ 主按钮 ============ */
.actions {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    background: var(--bg-0);
    border-top: 1px solid var(--line);
}

/* ============ 底栏：最近可加入的房间 ============ */
.join-recent {
    max-width: 720px;
    margin: 0 auto 9px;
}

.jr-head {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 6px;
    padding: 0 1px;
}

.jr-head .jr-title {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-2);
    letter-spacing: .2px;
}

.jr-head .jr-hint {
    font-size: 10.5px;
    color: var(--text-3);
}

.jr-list {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1px;
}
.jr-list::-webkit-scrollbar { display: none; }

/* 单个房间条目 */
.jr-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px 7px 9px;
    border-radius: 11px;
    background: var(--panel);
    border: 1.5px solid var(--line);
    cursor: pointer;
    transition: all .18s var(--ease);
    text-align: left;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.jr-item:active { transform: scale(.97); border-color: var(--brand); }

.jr-item .ji-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    flex: 0 0 auto;
    box-shadow: 0 0 0 3px var(--green-soft);
    animation: jiPulse 2s var(--ease) infinite;
}

@keyframes jiPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.jr-item .ji-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.jr-item .ji-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: .4px;
    line-height: 1.15;
}

.jr-item .ji-meta {
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap;
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 剩余名额 */
.jr-item .ji-left {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    color: var(--brand-2);
    background: var(--brand-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 名额紧张（剩 1-2 个）时提示色 */
.jr-item .ji-left.tight {
    color: var(--red);
    background: var(--red-soft);
}

/* 底栏尾部「查看全部」入口 */
.jr-head .jr-more {
    margin-left: auto;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--brand-2);
    padding: 2px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    letter-spacing: .2px;
    -webkit-tap-highlight-color: transparent;
}
.jr-head .jr-more:active { opacity: .6; }

/* ============ 最近房间：全屏上拉面板 ============ */
.jr-sheet-mask {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: var(--scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), visibility .28s;
}

.jr-sheet-mask.show {
    opacity: 1;
    visibility: visible;
}

.jr-sheet {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    background: var(--bg-0);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .34s var(--ease), visibility .34s;
    overflow: hidden;
}

.jr-sheet.open {
    transform: translateY(0);
    visibility: visible;
}

.jr-sheet-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: calc(18px + env(safe-area-inset-top)) 18px 12px;
    background: var(--bg-0);
    border-bottom: 1px solid var(--line);
}

.jr-sheet-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.jr-sheet-title {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: .2px;
}

.jr-sheet-sub {
    font-size: 11px;
    color: var(--text-3);
}

.jr-sheet-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: var(--panel);
    color: var(--text-2);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .18s var(--ease);
}
.jr-sheet-close:active { transform: scale(.94); }

.jr-sheet-list {
    flex: 1 1 auto;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
}

/* 全屏面板里的条目：整行铺开，信息不截断 */
.jr-sheet-list .jr-item {
    width: 100%;
    padding: 11px 13px;
    border-radius: 12px;
}

.jr-sheet-list .jr-item .ji-meta {
    max-width: none;
    flex: 1;
}

.jr-sheet-list .jr-item .ji-left { margin-left: auto; }

.jr-empty {
    padding: 60px 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
}

body.jr-lock { overflow: hidden; }

.actions-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    gap: 9px;
}

.btn {
    border: 0;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    padding: 14px 18px;
    cursor: pointer;
    transition: all .2s var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    letter-spacing: .2px;
}

.btn:active { transform: scale(.98); }

.btn-primary {
    flex: 1;
    background: linear-gradient(140deg, var(--brand), var(--brand-2));
    color: var(--brand-ink);
    box-shadow: 0 6px 20px rgba(240, 167, 10, .3);
}

.btn-primary:hover {
    box-shadow: 0 8px 26px rgba(240, 167, 10, .42);
    transform: translateY(-1px);
}

.btn-ghost {
    background: var(--panel);
    border: 1.5px solid var(--line-strong);
    color: var(--text);
    flex: 0 0 auto;
    padding: 14px 16px;
}

.btn-ghost:hover { background: var(--hover); }

/* ============ 弹层 ============ */
.sheet-mask {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    z-index: 200;
    display: none;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    /* 遮罩淡入 + 轻微模糊，让弹层更聚焦 */
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: opacity .26s var(--ease), backdrop-filter .26s var(--ease),
                -webkit-backdrop-filter .26s var(--ease);
}

.sheet-mask.show {
    display: flex;
    opacity: 1;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: maskIn .26s var(--ease) both;
}

/* 预显示：仅切到可见，保持隐藏态样式，用于坐实过渡起点 */
.sheet-mask.pre-show {
    display: flex;
    opacity: 0;
}

/* 关闭时先播退出动画，再移除 display（由 JS 延时处理） */
.sheet-mask.closing {
    display: flex;
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    pointer-events: none;
}

@keyframes maskIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sheet {
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--bg-1);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: var(--shadow-2);
    padding: 8px 16px calc(22px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    opacity: 0;
    /* 用 transition 驱动，确保退场也能播（animation+both 会锁住终态） */
    transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .26s var(--ease);
    scrollbar-width: thin;
    will-change: transform;
}

/* 弹出：缓出上滑，落定自然 */
.sheet-mask.show .sheet {
    transform: translateY(0);
    opacity: 1;
}

/* 收起：加速下滑，比弹出更快 */
.sheet-mask.closing .sheet {
    transform: translateY(100%);
    opacity: 0;
    transition: transform .24s cubic-bezier(.4, 0, 1, 1), opacity .2s var(--ease);
}

/* 弹层内容逐项浮现，营造层次感（仅入场，退场不参与） */
.sheet-mask.show:not(.closing) .sheet > * {
    animation: sheetItemIn .34s var(--ease) both;
}
.sheet-mask.show:not(.closing) .sheet > *:nth-child(1) { animation-delay: .04s; }
.sheet-mask.show:not(.closing) .sheet > *:nth-child(2) { animation-delay: .08s; }
.sheet-mask.show:not(.closing) .sheet > *:nth-child(3) { animation-delay: .12s; }
.sheet-mask.show:not(.closing) .sheet > *:nth-child(4) { animation-delay: .15s; }
.sheet-mask.show:not(.closing) .sheet > *:nth-child(5) { animation-delay: .18s; }

@keyframes sheetItemIn {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.sheet-grip {
    width: 40px; height: 4px;
    border-radius: 3px;
    background: var(--line-strong);
    margin: 8px auto 13px;
    transition: background-color .2s var(--ease);
}

.sheet-title { font-size: 16.5px; font-weight: 800; text-align: center; margin: 0 0 4px; }
.sheet-sub { text-align: center; font-size: 12px; color: var(--text-3); margin-bottom: 16px; }

/* 房间码 */
.code-box {
    text-align: center;
    padding: 17px;
    border-radius: var(--r-lg);
    background: var(--brand-soft);
    border: 1.5px solid rgba(240, 167, 10, .35);
    margin-bottom: 14px;
}

.code-label {
    font-size: 10.5px;
    color: var(--brand-2);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.code-value {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 29px;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--brand-2);
}

/* 官方签发徽章 */
.code-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 9px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}
.code-badge.ok {
    color: #0f7a4d;
    background: rgba(16, 185, 129, .13);
    border: 1px solid rgba(16, 185, 129, .32);
}
.code-badge.warn {
    color: #9a5b00;
    background: rgba(245, 158, 11, .15);
    border: 1px solid rgba(245, 158, 11, .34);
}
html[data-theme="dark"] .code-badge.ok {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .18);
}
html[data-theme="dark"] .code-badge.warn {
    color: #fcd34d;
    background: rgba(245, 158, 11, .18);
}

/* 统计 */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-bottom: 14px;
}

.stat {
    text-align: center;
    padding: 10px 3px;
    border-radius: var(--r-md);
    background: var(--panel-2);
    border: 1px solid var(--line);
}

.stat .sv { font-size: 18px; font-weight: 800; color: var(--brand-2); line-height: 1.2; }
.stat .sl { font-size: 10px; color: var(--text-3); margin-top: 2px; font-weight: 600; }

/* ============ 可折叠卡片 ============ */
.card-toggle,
.card-collapsible .card-head {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.card-arrow {
    margin-left: 6px;
    font-size: 11px;
    color: var(--text-3);
    /* 带一点回弹，展开/收起更有质感 */
    transition: transform .34s cubic-bezier(.34, 1.56, .64, 1);
    display: inline-block;
    flex: 0 0 auto;
}

/* 展开后箭头跟随主题色，状态更明确 */
.card-collapsible.open .card-arrow { color: var(--brand-2); }

/* 展开时内容逐项浮现，避免整体生硬出现 */
.card-collapsible.open .card-body > * {
    animation: cardItemIn .3s var(--ease) both;
}
.card-collapsible.open .card-body > *:nth-child(1) { animation-delay: .02s; }
.card-collapsible.open .card-body > *:nth-child(2) { animation-delay: .05s; }
.card-collapsible.open .card-body > *:nth-child(3) { animation-delay: .08s; }
.card-collapsible.open .card-body > *:nth-child(4) { animation-delay: .1s; }

@keyframes cardItemIn {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ============ 无障碍：系统开启「减少动态效果」时全部关闭 ============ */
@media (prefers-reduced-motion: reduce) {
    .sheet,
    .sheet-mask,
    .sheet-mask.show .sheet,
    .sheet-mask.show .sheet > *,
    .sheet-mask.closing .sheet,
    .card-arrow,
    .cc-arrow,
    .cc-body,
    .card-collapsible.open .card-body > *,
    .camp-card.cfg-open .cc-body > * {
        animation: none !important;
        transition: none !important;
    }
}

.card-collapsible .card-head:active {
    background: rgba(0, 0, 0, .025);
}
html[data-theme="dark"] .card-collapsible .card-head:active {
    background: rgba(255, 255, 255, .035);
}

/* 详情列表 */
.detail-list {
    border-radius: var(--r-md);
    background: var(--panel-2);
    border: 1px solid var(--line);
    overflow: hidden;
    margin-bottom: 14px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
}
.detail-item:last-child { border-bottom: 0; }

.detail-item .di-group {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--blue-soft);
    color: var(--blue);
    flex: 0 0 auto;
}

.detail-item .di-name { color: var(--text-2); font-weight: 600; flex: 0 0 auto; }

.detail-item .di-val {
    margin-left: auto;
    color: var(--brand-2);
    font-weight: 700;
    font-size: 12px;
    text-align: right;
}

/* ============ 阵营对比卡片 ============ */
.camp-card {
    margin-top: 14px;
    margin-bottom: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel-2);
    overflow: hidden;
}

/* 头部：蓝按钮 | 展开 | 红按钮 */
.cc-head {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.cc-btn {
    flex: 1 1 0;
    padding: 13px 6px;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    transition: filter .15s ease, opacity .15s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.cc-btn.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.cc-btn.red  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.cc-btn:active { filter: brightness(.92); }
.cc-btn[disabled], .cc-btn.busy { opacity: .72; }

.cc-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 11px;
    background: var(--panel);
    border: 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.cc-toggle:active { background: var(--line); }

/* 展开状态下按钮高亮，状态更明确 */
.camp-card.cfg-open .cc-toggle {
    color: var(--brand-2);
    background: var(--brand-soft);
}

.cc-arrow {
    display: inline-block;
    font-size: 10px;
    /* 带一点回弹，转起来更有质感 */
    transition: transform .34s cubic-bezier(.34, 1.56, .64, 1);
}

/* 内容区：高度由 JS 做过渡，这里不再叠加 fade，避免动画互相干扰 */
.cc-body {
    padding: 0 0 4px;
    will-change: height, opacity;
}

/* 展开后各行错落浮现 */
.camp-card.cfg-open .cc-body > * {
    animation: ccRowIn .34s var(--ease) both;
}
.camp-card.cfg-open .cc-body > *:nth-child(1) { animation-delay: .03s; }
.camp-card.cfg-open .cc-body > *:nth-child(2) { animation-delay: .07s; }
.camp-card.cfg-open .cc-body > *:nth-child(3) { animation-delay: .1s; }

@keyframes ccRowIn {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

.cc-sum {
    padding: 9px 13px;
    font-size: 11.5px;
    color: var(--text-3);
    border-bottom: 1px solid var(--line);
}
.cc-sum b { color: var(--text-1); }
.cc-sum b.diff { color: #f59e0b; }

/* 对比表 */
.cc-table { padding: 0 6px 6px; }

.cc-th,
.cc-tr {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 7px 7px;
    font-size: 12px;
}

.cc-th {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 9px 7px 8px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-3);
    border-bottom: 1px solid var(--line);
}
/* 蓝方靠左、参数居中、红方靠右 */
.cc-th .ct-blue { color: #2563eb; text-align: left; }
.cc-th .ct-name { color: var(--text-3); text-align: center; }
.cc-th .ct-red  { color: #dc2626; text-align: right; }
html[data-theme="dark"] .cc-th .ct-blue { color: #93c5fd; }
html[data-theme="dark"] .cc-th .ct-red  { color: #fca5a5; }

.cc-group {
    padding: 9px 7px 4px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .6px;
    color: var(--text-3);
    text-transform: uppercase;
}

.cc-tr {
    border-radius: 6px;
    border-bottom: 1px solid var(--line);
}
.cc-tr:last-child { border-bottom: 0; }

.cc-tr .ct-name {
    color: var(--text-2);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
    min-width: 0;
    text-align: center;
}

.cc-tr .ct-blue,
.cc-tr .ct-red {
    font-weight: 700;
    font-size: 11.5px;
    color: var(--text-1);
    word-break: break-all;
}
/* 蓝方贴左、红方贴右 */
.cc-tr .ct-blue { text-align: left; }
.cc-tr .ct-red  { text-align: right; }

/* 差异高亮 */
.cc-tr.is-diff {
    background: rgba(245, 158, 11, .09);
    box-shadow: inset 2px 0 0 #f59e0b;
}
.cc-tr.is-diff .ct-blue { color: #2563eb; }
.cc-tr.is-diff .ct-red  { color: #dc2626; }
html[data-theme="dark"] .cc-tr.is-diff {
    background: rgba(245, 158, 11, .13);
}
html[data-theme="dark"] .cc-tr.is-diff .ct-blue { color: #93c5fd; }
html[data-theme="dark"] .cc-tr.is-diff .ct-red  { color: #fca5a5; }

/* 单侧缺失 */
.cc-tr .is-none {
    color: var(--text-3) !important;
    font-weight: 500;
    opacity: .6;
}

/* 号位小标签 */
.cr-slot {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--line);
    color: var(--text-3);
    white-space: nowrap;
}

/* 窄屏适配 */
@media (max-width: 380px) {
    .cc-th, .cc-tr { gap: 5px; padding-left: 4px; padding-right: 4px; }
    .cc-btn { font-size: 12.5px; padding: 12px 4px; }
    .cc-toggle { padding: 0 7px; font-size: 10px; }
    .cc-tr .ct-blue, .cc-tr .ct-red { font-size: 11px; }
    .cc-tr .ct-name { font-size: 11.5px; }
}

/* 链接框 */
.link-box { display: flex; gap: 7px; margin-bottom: 9px; }

.link-box .input {
    font-size: 11.5px;
    font-family: ui-monospace, monospace;
    padding: 10px 11px;
}

.scheme-box {
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--panel-2);
    border: 1px solid var(--line);
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--text-3);
    word-break: break-all;
    max-height: 74px;
    overflow-y: auto;
    margin-bottom: 14px;
    line-height: 1.5;
}

.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet-actions .btn { flex: 1; min-width: 100px; padding: 12px 12px; font-size: 13.5px; }

/* ============ 底部弹层：移动端高度/滚动约束 ============
 * 手机浏览器工具栏会挤压可视区，92vh 常比真实可视高度大，
 * 导致弹层底部（按钮 / 最后一行内容）被顶出屏幕或压在按钮下。
 * 用 dvh 兜底，并让英雄选择弹层固定为「头部 + 可滚网格 + 常驻按钮」三段式。
 */
.sheet {
    /* --vvh 由 JS 按 visualViewport 实时写入：输入法弹出时自动收缩，内容不被键盘遮挡 */
    max-height: calc(var(--vvh, 92vh) - 10px);
}

.sheet-mask .hero-pick-sheet {
    /* 用「确定高度」而不是「内容撑开 + 上限」。
       只给 max-height 时，个别桌面环境（页面缩放、窗口/输入法让
       visualViewport 变小时）会算出偏小的 --vvh，弹层便缩成只剩页头、
       英雄网格被压成一条线（实测线上 2007×1111 视口即如此）。
       给定高度后，头部固定、按钮常驻，剩余空间全部留给网格。 */
    height: min(calc(var(--vvh, 92vh) - 10px), 720px);
    max-height: calc(var(--vvh, 92vh) - 10px);
    overflow-y: auto;            /* 极矮视口兜底：整层可滚动，内容都可达 */
    overflow-x: hidden;
}

.sheet-mask .hero-pick-sheet .hero-grid {
    flex: 1 1 auto;              /* 基数 auto：弹层高度随英雄数量自适应，超过上限才收缩 */
    min-height: 0;               /* 关键：允许收缩，把多余部分让给滚动，而不是挤掉按钮 */
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 12px;       /* 底部留白：最后一行不贴边、不被裁 */
}

.sheet-mask .hero-pick-sheet .sheet-actions {
    flex: 0 0 auto;
}

/* 可用高度很小时（系统输入法弹出 / 小屏桌面）：压缩头部，把空间留给英雄名单。
   sheet-tight 由 fitSheetsToViewport 按可视高度 < 480 时挂到 <html>。 */
html.sheet-tight .sheet-mask .hero-pick-sheet .sheet-grip { display: none; }
html.sheet-tight .sheet-mask .hero-pick-sheet .bsh-sub { display: none; }
html.sheet-tight .sheet-mask .hero-pick-sheet .bsh { padding-bottom: 6px; margin-bottom: 6px; }
html.sheet-tight .sheet-mask .hero-pick-sheet .bsh h3 { font-size: 13.5px; margin-bottom: 0; }
html.sheet-tight .sheet-mask .hero-pick-sheet .hpick-search { margin-bottom: 6px; }
html.sheet-tight .sheet-mask .hero-pick-sheet .bsh-tabs { padding-bottom: 4px; }
html.sheet-tight .sheet-mask .hero-pick-sheet .hero-grid { min-height: 96px; }

/* ============ Toast ============ */
.toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translate(-50%, 14px);
    z-index: 300;
    background: var(--text);
    color: var(--bg-1);
    font-size: 13px;
    font-weight: 600;
    padding: 11px 19px;
    border-radius: 999px;
    box-shadow: var(--shadow-2);
    opacity: 0;
    pointer-events: none;
    transition: all .24s var(--ease);
    max-width: 88vw;
    text-align: center;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============ 主题面板 ============ */
.theme-section { margin-bottom: 18px; }

.theme-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 9px;
}

/* 明暗切换 */
.theme-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.theme-mode button {
    border: 2px solid var(--line);
    background: var(--panel-2);
    border-radius: var(--r-md);
    padding: 13px 10px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    transition: all .2s var(--ease);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
}

.theme-mode button .tm-ic { font-size: 21px; line-height: 1; }

.theme-mode button.on {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-2);
}

/* 色板 */
.swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 9px;
}

.swatch {
    aspect-ratio: 1;
    border-radius: 11px;
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: all .18s var(--ease);
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.swatch:hover { transform: scale(1.08); }

.swatch.on {
    border-color: var(--text);
    transform: scale(1.06);
}

.swatch.on::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* 自定义取色 */
.color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--panel-2);
    border: 1px solid var(--line);
}

.color-row label {
    font-size: 12.5px;
    color: var(--text-2);
    font-weight: 600;
    flex: 0 0 auto;
}

.color-row input[type="color"] {
    width: 42px;
    height: 30px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    padding: 2px;
    margin-left: auto;
    flex: 0 0 auto;
}

.color-row .hex {
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--text-3);
    min-width: 62px;
    text-align: right;
}

/* 滑块 */
.slider-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--panel-2);
    border: 1px solid var(--line);
}

.slider-row label {
    font-size: 12.5px;
    color: var(--text-2);
    font-weight: 600;
    flex: 0 0 auto;
    min-width: 54px;
}

.slider-row input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: 3px;
    background: var(--line-strong);
    outline: none;
}

.slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--brand);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    border: 2px solid var(--bg-1);
}

.slider-row input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--brand);
    cursor: pointer;
    border: 2px solid var(--bg-1);
}

.slider-row .sv-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-2);
    min-width: 40px;
    text-align: right;
    font-family: ui-monospace, monospace;
}

/* 主题预设组合 */
.theme-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.theme-preset {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--line);
    background: var(--panel-2);
    cursor: pointer;
    font-family: inherit;
    transition: all .18s var(--ease);
    text-align: left;
}

.theme-preset:hover { border-color: var(--line-strong); }

.theme-preset .tp-dots {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}

.theme-preset .tp-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
}

.theme-preset .tp-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 主题面板底部 */
.theme-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.theme-actions .btn { flex: 1; padding: 12px; font-size: 13.5px; }

/* ============ 座位板（协作签到） ============ */
.seat-board {
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--panel-2);
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 14px;
}

.seat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

.seat-head .sh-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.seat-head .sh-badge {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(240, 167, 10, .14);
    color: #b87d00;
    border: 1px solid rgba(240, 167, 10, .3);
}

html[data-theme="dark"] .seat-head .sh-badge {
    color: #f5c451;
}

.seat-head .sh-live {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-3);
}

.sh-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-3);
    flex: 0 0 auto;
}

.sh-dot.on {
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(18, 166, 122, .18);
    animation: pulseDot 2s infinite;
}

.sh-dot.err { background: var(--red); }

@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* 阵营列 */
.seat-camps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
}

.seat-camp {
    background: var(--panel-2);
    padding: 11px 12px 13px;
}

.sc-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
}

.sc-name {
    font-size: 12px;
    font-weight: 700;
}

.seat-camp.blue .sc-name { color: var(--blue); }
.seat-camp.red  .sc-name { color: var(--red); }

.sc-count {
    font-size: 11px;
    font-weight: 800;
    font-family: ui-monospace, monospace;
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--blue-soft);
    color: var(--blue);
    margin-left: auto;
}

.seat-camp.red .sc-count {
    background: var(--red-soft);
    color: var(--red);
}

/* 玩家格子 */
.sc-slots {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 22px;
}

.sc-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-2);
    animation: slotIn .3s var(--ease);
}

@keyframes slotIn {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

.sc-slot .ss-ava {
    width: 17px; height: 17px;
    border-radius: 5px;
    display: grid; place-items: center;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    flex: 0 0 auto;
}

.seat-camp.blue .ss-ava { background: var(--blue); }
.seat-camp.red  .ss-ava { background: var(--red); }

.sc-slot .ss-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.sc-slot .ss-me {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--brand-soft);
    color: var(--brand-2);
    flex: 0 0 auto;
}

.sc-empty {
    font-size: 11px;
    color: var(--text-3);
    padding: 4px 0;
    font-style: italic;
}

/* 我的操作区 */
.seat-me {
    padding: 12px 13px;
    border-top: 1px solid var(--line);
    background: var(--panel);
}

/* 昵称输入框：占满整行（原先靠 flex:1 父容器，已简化结构） */
.seat-me #nickInput {
    width: 100%;
    padding: 9px 11px;
    font-size: 12.5px;
    box-sizing: border-box;
}

.seat-me .sm-btns {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.seat-me .sm-btns .btn {
    flex: 1;
    min-width: 96px;
    padding: 10px 12px;
    font-size: 12.5px;
    border-radius: var(--r-sm);
}

.btn-blue {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 3px 12px rgba(47, 124, 246, .28);
}

.btn-red {
    background: var(--red);
    color: #fff;
    box-shadow: 0 3px 12px rgba(232, 56, 79, .28);
}

.btn-blue:hover, .btn-red:hover { filter: brightness(1.06); }

.btn-leave {
    background: transparent;
    border: 1.5px solid var(--line-strong);
    color: var(--text-2);
    flex: 0 0 auto !important;
    min-width: 76px !important;
}

.btn-leave:hover { background: var(--hover); color: var(--text); }

/* 已签到的状态条 */
.sm-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    background: var(--brand-soft);
    border: 1px solid rgba(240, 167, 10, .28);
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-2);
    margin-bottom: 9px;
}

.sm-status .st-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand);
    animation: pulseDot 2s infinite;
}

/* ============ 页脚 ============ */
.footer {
    text-align: center;
    padding: 24px 0 8px;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.85;
}

.footer a { color: var(--text-2); text-decoration: none; }

/* ============ 免责声明 ============ */
.disclaimer {
    text-align: left;
    margin-top: 8px;
    padding: 14px 13px 15px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--panel-2);
}

.disclaimer .dc-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-2);
    letter-spacing: .5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.disclaimer .dc-title::before {
    content: '';
    width: 3px;
    height: 11px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    flex: 0 0 auto;
}

.disclaimer .dc-text {
    margin: 0 0 7px;
    font-size: 10.5px;
    line-height: 1.75;
    color: var(--text-3);
    text-align: justify;
}

.disclaimer .dc-text:last-child { margin-bottom: 0; }

.disclaimer .dc-strong {
    color: var(--text-2);
    font-weight: 600;
}

/* 房间页底部的简易声明（纯文本多行，不加卡片边框） */
.disclaimer.disclaimer-plain {
    text-align: center;
    padding: 22px 4px 6px;
    border: 0;
    background: transparent;
    font-size: 10.5px;
    line-height: 1.85;
    color: var(--text-3);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ============ 响应式 ============ */
@media (max-width: 420px) {
    .map-grid > * { width: 124px; }
    .hero-grid { grid-template-columns: repeat(4, 1fr); }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .code-value { font-size: 24px; letter-spacing: 3px; }
    .row { flex-wrap: wrap; }
    .row .r-label { min-width: 100%; margin-bottom: 1px; }
    .server-switch button { padding: 5px 8px; font-size: 11px; }
    .brand span { display: none; }
    .logo { width: 33px; height: 33px; font-size: 14.5px; }
    .icon-btn { width: 33px; height: 33px; font-size: 16px; }
    .swatch-grid { grid-template-columns: repeat(5, 1fr); }
    .theme-presets { grid-template-columns: 1fr; }
}

@media (max-width: 340px) {
    .hero-grid { grid-template-columns: repeat(3, 1fr); }
    .player-grid { grid-template-columns: repeat(3, 1fr); }
    .wrap { padding-left: 11px; padding-right: 11px; }
    .swatch-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============ 唤起客户端：跳转代理与失败引导 ============ */
.app-launch-proxy,
.app-launch-copy-src {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.app-launch-mask { z-index: 320; }

.app-launch-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
}

.app-launch-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--panel-2);
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
}

.app-launch-step b {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    font-size: 12px;
    font-weight: 800;
    display: grid;
    place-items: center;
}