/**
 * 通用类型色块（编辑页单选）
 *
 * 布局：.csg-type-grid / .csg-type-tile
 * 配色：色块读 --csg-type-accent / --csg-type-fg（由 .csg-type-tone-* 或评测 .judge-tone-* 写入）
 * 未选空心（白底 + 类型色边框/字）；选中 .is-active 实心白字。
 * 禁止描边光圈、圆形对勾、上浮阴影、缩放脉冲。
 *
 * 评测类型色值仍在 csg_judge_type.css；本文件只提供色块骨架与额外 tone（priv / muted）。
 */
:root {
    --csg-type-priv: #b91c1c;
    --csg-type-priv-fg: #991b1b;
    --csg-type-priv-pale: #fee2e2;
    --csg-type-priv-border: #fca5a5;

    --csg-type-muted: #64748b;
    --csg-type-muted-fg: #475569;
    --csg-type-muted-pale: #f1f5f9;
    --csg-type-muted-border: #cbd5e1;
}

.csg-type-grid,
.judge-type-grid {
    display: grid;
    grid-template-columns: repeat(var(--csg-type-cols, 4), minmax(0, 1fr));
    gap: 0.55rem;
}
.csg-type-grid[data-cols="5"],
.judge-type-grid {
    --csg-type-cols: 5;
}
.csg-type-grid[data-cols="4"] { --csg-type-cols: 4; }
.csg-type-grid[data-cols="2"] { --csg-type-cols: 2; }

.csg-type-tile,
.judge-type-tile {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--csg-type-accent, #94a3b8);
    border-radius: 0.25rem;
    line-height: 1.15;
    cursor: pointer;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    white-space: normal;
    position: relative;
    background: #fff;
    color: var(--csg-type-fg, #334155);
    transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}
.csg-type-tile .csg-type-icon,
.judge-type-tile .judge-type-icon,
.judge-type-tile .csg-type-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
    opacity: 0.85;
}
.csg-type-tile.is-active .csg-type-icon,
.judge-type-tile.is-active .judge-type-icon,
.judge-type-tile.is-active .csg-type-icon {
    opacity: 1;
}
.csg-type-tile-text,
.judge-type-tile-text {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
}
.csg-type-tile-text .cn-text,
.judge-type-tile-text .cn-text {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.csg-type-tile-text .en-text,
.judge-type-tile-text .en-text {
    display: inline;
    font-size: 0.68rem;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    color: var(--csg-type-fg, inherit);
    opacity: 0.72;
}
.csg-type-tile.is-active,
.judge-type-tile.is-active {
    font-weight: 600;
    background: var(--csg-type-accent, #334155);
    border-color: var(--csg-type-accent, #334155);
    color: #fff;
}
.csg-type-tile.is-active .csg-type-tile-text .cn-text,
.judge-type-tile.is-active .judge-type-tile-text .cn-text {
    font-weight: 600;
}
.csg-type-tile.is-active .en-text,
.judge-type-tile.is-active .en-text {
    color: inherit;
    opacity: 0.88;
}

.csg-type-tone-std,
.judge-tone-std {
    --csg-type-accent: var(--csg-jt-std);
    --csg-type-fg: var(--csg-jt-std-fg);
    --csg-jt-accent: var(--csg-jt-std);
    --csg-jt-accent-fg: var(--csg-jt-std-fg);
    --csg-jt-accent-pale: var(--csg-jt-std-pale);
    --csg-jt-accent-border: var(--csg-jt-std-border);
}
.csg-type-tone-spj,
.judge-tone-spj {
    --csg-type-accent: var(--csg-jt-spj);
    --csg-type-fg: var(--csg-jt-spj-fg);
    --csg-jt-accent: var(--csg-jt-spj);
    --csg-jt-accent-fg: var(--csg-jt-spj-fg);
    --csg-jt-accent-pale: var(--csg-jt-spj-pale);
    --csg-jt-accent-border: var(--csg-jt-spj-border);
}
.csg-type-tone-io,
.judge-tone-io {
    --csg-type-accent: var(--csg-jt-io);
    --csg-type-fg: var(--csg-jt-io-fg);
    --csg-jt-accent: var(--csg-jt-io);
    --csg-jt-accent-fg: var(--csg-jt-io-fg);
    --csg-jt-accent-pale: var(--csg-jt-io-pale);
    --csg-jt-accent-border: var(--csg-jt-io-border);
}
.csg-type-tone-comm,
.judge-tone-comm {
    --csg-type-accent: var(--csg-jt-comm);
    --csg-type-fg: var(--csg-jt-comm-fg);
    --csg-jt-accent: var(--csg-jt-comm);
    --csg-jt-accent-fg: var(--csg-jt-comm-fg);
    --csg-jt-accent-pale: var(--csg-jt-comm-pale);
    --csg-jt-accent-border: var(--csg-jt-comm-border);
}
.csg-type-tone-mp,
.judge-tone-mp {
    --csg-type-accent: var(--csg-jt-mp);
    --csg-type-fg: var(--csg-jt-mp-fg);
    --csg-jt-accent: var(--csg-jt-mp);
    --csg-jt-accent-fg: var(--csg-jt-mp-fg);
    --csg-jt-accent-pale: var(--csg-jt-mp-pale);
    --csg-jt-accent-border: var(--csg-jt-mp-border);
}
.csg-type-tone-priv {
    --csg-type-accent: var(--csg-type-priv);
    --csg-type-fg: var(--csg-type-priv-fg);
    --csg-jt-accent: var(--csg-type-priv);
    --csg-jt-accent-fg: var(--csg-type-priv-fg);
    --csg-jt-accent-pale: var(--csg-type-priv-pale);
    --csg-jt-accent-border: var(--csg-type-priv-border);
}
.csg-type-tone-muted {
    --csg-type-accent: var(--csg-type-muted);
    --csg-type-fg: var(--csg-type-muted-fg);
    --csg-jt-accent: var(--csg-type-muted);
    --csg-jt-accent-fg: var(--csg-type-muted-fg);
    --csg-jt-accent-pale: var(--csg-type-muted-pale);
    --csg-jt-accent-border: var(--csg-type-muted-border);
}

.csg-jt-pop-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.45rem;
    padding-bottom: 0.35rem;
    color: var(--csg-type-accent, var(--csg-jt-accent, inherit));
    border-bottom: 1px solid var(--csg-jt-accent-border, var(--bs-border-color, #dee2e6));
    line-height: 1.3;
}
.csg-jt-pop-name .bi {
    font-size: 0.95rem;
}
.csg-jt-pop-name .en-text,
.csg-hover-popover-html .csg-jt-pop-name .en-text {
    display: inline;
    font-size: 0.75rem;
    font-weight: 500;
    font-style: normal;
    opacity: 0.75;
    margin: 0;
}
.csg-jt-pop-desc {
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.csg-hover-popover-html .csg-jt-pop-desc .en-text {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    opacity: 0.72;
    font-style: normal;
}

.csg-type-hint {
    font-weight: 500;
    color: var(--csg-type-fg, var(--csg-type-accent, inherit));
}
.csg-type-hint .en-text {
    color: inherit;
    opacity: 0.85;
    font-style: normal;
}

.csg-type-block {
    margin-bottom: 0.55rem;
}

@media (max-width: 992px) {
    .csg-type-grid:not([data-cols="2"]),
    .judge-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 576px) {
    .csg-type-grid,
    .judge-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}