.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cn-hero-toolbar {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) repeat(3, minmax(7.5rem, auto)) auto auto;
    gap: .55rem;
    align-items: center;
    margin-bottom: .75rem;
}

.cn-hero-search input,
.cn-hero-toolbar select {
    width: 100%;
    min-height: 2.8rem;
    padding: 0 .8rem;
    border: 1px solid #cfc2ad;
    border-radius: 3px;
    background: var(--paper);
    color: var(--ink);
    font-size: .75rem;
}

.cn-view-toggle {
    display: inline-flex;
    min-height: 2.8rem;
    padding: 3px;
    border: 1px solid #cfc2ad;
    border-radius: 3px;
    background: rgba(255,253,247,.72);
}

.cn-stat-toggle {
    display: inline-flex;
    min-height: 2.8rem;
    padding: 3px;
    border: 1px solid #cfc2ad;
    border-radius: 3px;
    background: rgba(255,253,247,.72);
}

.cn-stat-toggle button {
    min-width: 2.75rem;
    padding: 0 .55rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
    cursor: pointer;
}

.cn-stat-toggle button.active { background: var(--side); color: #fff; }

.cn-view-toggle button {
    min-width: 3.3rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
}

.cn-view-toggle button.active {
    background: var(--side);
    color: white;
}

.cn-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.cn-hero-list-header { display: none; }

.cn-hero-card {
    --camp-color: #9a6658;
    --camp-watermark: rgba(154,102,88,.08);
    content-visibility: auto;
    contain-intrinsic-size: 16rem;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 3.9rem minmax(0, 1fr);
    gap: .8rem;
    min-width: 0;
    min-height: 15.75rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,253,247,.78);
    color: var(--ink);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.cn-hero-card[data-camp="魏"], .cn-hero-detail[data-camp="魏"] { --camp-color: #4b78a8; --camp-watermark: rgba(75,120,168,.09); }
.cn-hero-card[data-camp="蜀"], .cn-hero-detail[data-camp="蜀"] { --camp-color: #4f8b5d; --camp-watermark: rgba(79,139,93,.09); }
.cn-hero-card[data-camp="吴"], .cn-hero-detail[data-camp="吴"] { --camp-color: #b34e44; --camp-watermark: rgba(179,78,68,.085); }
.cn-hero-card[data-camp="汉"], .cn-hero-detail[data-camp="汉"] { --camp-color: #995b49; --camp-watermark: rgba(153,91,73,.095); }
.cn-hero-card[data-camp="群"], .cn-hero-detail[data-camp="群"] { --camp-color: #b48a2c; --camp-watermark: rgba(180,138,44,.105); }

.cn-hero-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 1.1rem;
    left: 1.1rem;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--camp-color), transparent);
}

.cn-hero-card::after {
    content: attr(data-camp);
    position: absolute;
    z-index: 0;
    top: .35rem;
    right: .75rem;
    color: var(--camp-watermark);
    font: 800 3.6rem/1 var(--serif);
    pointer-events: none;
}

.cn-hero-card > * { position: relative; z-index: 1; }
.cn-hero-card[hidden] { display: none !important; }
.cn-hero-card:hover { transform: translateY(-2px); border-color: var(--camp-color); background: var(--paper); }

.cn-hero-portrait,
.cn-hero-portrait img {
    display: block;
    width: 3.9rem;
    height: 3.9rem;
    border-radius: 10px;
}

.cn-hero-portrait { background: #e8e0d0; }
.cn-hero-portrait img { object-fit: cover; object-position: top center; }
.cn-hero-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 3.9rem;
    overflow: hidden;
}

.cn-hero-title {
    display: block;
    margin: 0 0 .3125rem;
    overflow: hidden;
    font: 700 1.15rem/1.35 var(--serif);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-hero-title > span { margin-right: .28rem; color: var(--red); font: 800 .68rem var(--sans); }
.cn-hero-meta, .cn-hero-submeta { display: flex; align-items: center; flex-wrap: wrap; gap: .38rem; }
.cn-hero-meta { color: #4d5955; font-size: .68rem; line-height: 1.1; }
.cn-hero-meta i, .cn-hero-submeta i { color: #b5aa98; font-style: normal; }
.cn-hero-rarity { color: #a36d25; letter-spacing: .06em; }
.cn-hero-submeta { margin-top: .3125rem; color: #8a8172; font-size: .63rem; line-height: 1.1; }
.cn-hero-submeta b { color: #9b392f; }
.cn-hero-list-meta { display: none; }

.cn-hero-card-data {
    grid-column: 1 / -1;
    display: grid;
    min-width: 0;
    gap: .75rem;
}

.cn-hero-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; }
.cn-hero-stats::before, .cn-hero-tactics::before {
    grid-column: 1 / -1;
    padding-bottom: .42rem;
    border-bottom: 1px solid rgba(33,31,26,.12);
    color: #8c8273;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.cn-hero-stats::before { content: attr(data-stat-label); }
.cn-hero-stat { display: flex; align-items: baseline; justify-content: flex-start; gap: .25rem; min-width: 0; padding: .1rem 0; color: #394642; }
.cn-hero-stat small { color: #98754c; font-size: .56rem; font-weight: 800; }
.cn-hero-stat strong { font-size: .78rem; line-height: 1; }

.cn-hero-tactics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .85rem; }
.cn-hero-tactics::before { content: attr(data-tactic-label); }
.cn-hero-tactic { display: block; min-width: 0; padding-left: .55rem; border-left: 2px solid color-mix(in srgb, var(--camp-color) 58%, transparent); }
.cn-hero-tactic b { display: block; color: #8c8273; font-size: .56rem; line-height: 1; }
.cn-hero-tactic em { display: block; margin-top: .26rem; overflow: hidden; color: #34423e; font-size: .68rem; font-style: normal; font-weight: 800; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.cn-hero-grid.is-list {
    --hero-list-columns: 46px minmax(92px,1fr) 46px 54px 46px 70px 46px repeat(6,44px) minmax(144px,1.35fr) minmax(132px,1.25fr);
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.cn-hero-grid.is-list .cn-hero-list-header,
.cn-hero-grid.is-list .cn-hero-card {
    display: grid;
    grid-template-columns: var(--hero-list-columns);
    min-width: 1180px;
    gap: .75rem;
    align-items: center;
}

.cn-hero-grid.is-list .cn-hero-list-header {
    min-height: 2.8rem;
    margin-bottom: .42rem;
    padding: .55rem .85rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #eee8dc;
    color: #817868;
    font-size: .64rem;
    font-weight: 800;
    line-height: 1.2;
}

.cn-hero-grid.is-list .cn-hero-list-header > span { display: flex; align-items: center; align-self: stretch; min-width: 0; min-height: 1.7rem; line-height: 1; }
.cn-hero-grid.is-list .cn-hero-list-header > span:nth-child(1),
.cn-hero-grid.is-list .cn-hero-list-header > span:nth-child(3),
.cn-hero-grid.is-list .cn-hero-list-header > span:nth-child(4),
.cn-hero-grid.is-list .cn-hero-list-header > span:nth-child(6),
.cn-hero-grid.is-list .cn-hero-list-header > span:nth-child(7) { justify-content: center; text-align: center; }
.cn-hero-grid.is-list .cn-hero-list-header > span:nth-child(5),
.cn-hero-grid.is-list .cn-hero-list-header > span:nth-child(n+8):nth-child(-n+13) { justify-content: flex-end; text-align: right; }
.cn-hero-grid.is-list .cn-hero-list-header > span:nth-child(14),
.cn-hero-grid.is-list .cn-hero-tactics .cn-hero-tactic:first-child { padding-left: 1rem; }
.cn-sort-button { display: inline-flex; align-items: center; justify-content: flex-end; gap: .18rem; width: 100%; height: 100%; min-height: 1.7rem; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; line-height: 1; cursor: pointer; }
.cn-sort-button::before { content: "↕"; color: #aaa08f; font-size: .58rem; }
.cn-sort-column.is-active .cn-sort-button { color: var(--red); }
.cn-sort-column.is-active[data-direction="desc"] .cn-sort-button::before { content: "↓"; color: currentColor; }
.cn-sort-column.is-active[data-direction="asc"] .cn-sort-button::before { content: "↑"; color: currentColor; }

.cn-hero-grid.is-list .cn-hero-card {
    min-height: 3.9rem;
    margin-bottom: .42rem;
    padding: .55rem .85rem;
    border-radius: 8px;
    content-visibility: visible;
    contain-intrinsic-size: auto;
}

.cn-hero-grid.is-list .cn-hero-card:hover { transform: none; }
.cn-hero-grid.is-list .cn-hero-card::before, .cn-hero-grid.is-list .cn-hero-card::after { display: none; }
.cn-hero-grid.is-list .cn-hero-portrait, .cn-hero-grid.is-list .cn-hero-portrait img { width: 44px; height: 44px; border-radius: 7px; }
.cn-hero-grid.is-list .cn-hero-title { margin: 0; font-size: .85rem; }
.cn-hero-grid.is-list .cn-hero-main { display: block; height: auto; overflow: visible; }
.cn-hero-grid.is-list .cn-hero-meta, .cn-hero-grid.is-list .cn-hero-submeta { display: none; }
.cn-hero-grid.is-list .cn-hero-list-meta,
.cn-hero-grid.is-list .cn-hero-card-data,
.cn-hero-grid.is-list .cn-hero-tactics { display: contents; }
.cn-hero-grid.is-list .cn-hero-list-meta > span { overflow: hidden; color: #4f5b57; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.cn-hero-grid.is-list .cn-hero-list-meta > span:nth-child(1),
.cn-hero-grid.is-list .cn-hero-list-meta > span:nth-child(2),
.cn-hero-grid.is-list .cn-hero-list-meta > span:nth-child(4),
.cn-hero-grid.is-list .cn-hero-list-meta > span:nth-child(5) { text-align: center; }
.cn-hero-grid.is-list .cn-hero-list-meta > span:nth-child(3) { text-align: right; }
.cn-hero-grid.is-list .cn-hero-list-meta .has-collection { color: #9b392f; font-weight: 800; }
.cn-hero-grid.is-list .cn-hero-stats { display: contents; }
.cn-hero-grid.is-list .cn-hero-stats::before, .cn-hero-grid.is-list .cn-hero-tactics::before { display: none; }
.cn-hero-grid.is-list .cn-hero-stat { display: block; justify-self: stretch; width: 100%; padding: 0; text-align: right; }
.cn-hero-grid.is-list .cn-hero-stat small { display: none; }
.cn-hero-grid.is-list .cn-hero-stat strong { display: block; width: 100%; font-size: .68rem; font-variant-numeric: tabular-nums; text-align: right; }
.cn-hero-grid.is-list .cn-hero-tactic { display: block; min-width: 0; padding-left: 0; border-left: 0; }
.cn-hero-grid.is-list .cn-hero-tactic b { display: none; }
.cn-hero-grid.is-list .cn-hero-tactic em { display: block; }

.cn-hero-detail {
    --camp-color: #9a6658;
    --camp-watermark: rgba(154,102,88,.08);
    width: 100%;
    margin: 0;
}

.cn-detail-head {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    min-height: 8.8rem;
    padding: 1.4rem;
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(255,253,247,.84);
}

.cn-detail-head::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 1.5rem;
    left: 1.5rem;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--camp-color), transparent);
}

.cn-detail-head::after {
    content: attr(data-camp);
    position: absolute;
    z-index: 0;
    right: 1rem;
    color: var(--camp-watermark);
    font: 800 7rem/1 var(--serif);
}

.cn-detail-head > * { position: relative; z-index: 1; }
.cn-detail-head img { flex: 0 0 auto; width: 6rem; height: 6rem; border-radius: 14px; object-fit: cover; object-position: top center; background: #e8e0d0; }
.cn-detail-head p { margin: 0 0 .2rem; color: var(--camp-color); font-size: .68rem; font-weight: 800; }
.cn-detail-head h1 { margin: 0; font: 700 clamp(2rem, 5vw, 3.25rem)/1.2 var(--serif); letter-spacing: .06em; }
.cn-detail-head span { display: block; margin-top: .35rem; color: var(--muted); font-size: .68rem; }

.cn-detail-section { margin-top: 1.35rem; }
.cn-detail-section h2 { margin: 0 0 .7rem; font: 700 1rem var(--serif); }
.cn-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.cn-detail-section-head h2 { margin: 0; }
.cn-detail-section-head .cn-stat-toggle { min-height: 2.15rem; }
.cn-detail-section-head .cn-stat-toggle button { min-width: 2.55rem; }
.cn-stat-note { margin: .55rem 0 0; color: #8b7d6a; font-size: .64rem; line-height: 1.6; }
.cn-variant-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.cn-variant-gallery.is-single { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cn-variant-gallery figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,253,247,.78); }
.cn-variant-gallery img { display: block; width: 100%; height: 19rem; object-fit: cover; object-position: top center; background: #e8e0d0; }
.cn-variant-gallery figcaption { padding: .65rem .75rem; color: #3d4946; font-size: .72rem; font-weight: 800; }

.cn-detail-strip {
    display: grid;
    grid-template-columns: repeat(var(--detail-columns), minmax(0, 1fr));
    row-gap: .7rem;
    padding: .85rem 0 .8rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255,253,247,.38);
    text-align: center;
}

.cn-detail-strip > * { min-width: 0; padding: 0 .35rem; border-left: 1px solid rgba(177,166,145,.38); }
.cn-detail-strip > span:first-child, .cn-detail-strip > strong:first-of-type { border-left: 0; }
.cn-detail-strip span { color: #817868; font-size: .62rem; line-height: 1; }
.cn-detail-strip strong { overflow-wrap: anywhere; font-size: .82rem; line-height: 1.2; }
.cn-detail-strip.is-stats strong { color: #34423e; }

.cn-tendency-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: .7rem;
    padding: .85rem .25rem .8rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255,253,247,.38);
    text-align: center;
}

.cn-tendency-strip span { color: #817868; font-size: .62rem; line-height: 1; }
.cn-tendency-strip strong { color: #34423e; font: 700 1.2rem/1 var(--serif); }
.cn-tendency-strip .rank-s { color: #d76b25; }
.cn-tendency-strip .rank-a { color: #7f55b5; }
.cn-tendency-strip .rank-b { color: #347bb8; }
.cn-tendency-strip .rank-c { color: #438b61; }

.cn-tactic-blocks { display: grid; gap: .8rem; }
.cn-tactic-block { padding: 1.05rem 1.1rem 1.1rem; border-block: 1px solid var(--line); border-left: 3px solid var(--camp-color); background: rgba(255,253,247,.56); }
.cn-tactic-overview { display: grid; grid-template-columns: 3.9rem minmax(0, 1fr); gap: .95rem; align-items: center; }
.cn-tactic-overview > img { display: block; width: 3.9rem; height: 3.9rem; border-radius: 10px; object-fit: cover; background: #e8e0d0; box-shadow: 0 5px 16px rgba(47,38,25,.14); }
.cn-tactic-title { display: flex; align-items: baseline; gap: .75rem; }
.cn-tactic-role { flex: 0 0 auto; color: #8d3c31; font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.cn-tactic-title strong { min-width: 0; overflow-wrap: anywhere; font: 700 1.05rem var(--serif); }
.cn-tactic-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem 1.15rem; margin-top: .65rem; padding-top: .6rem; border-top: 1px solid rgba(177,166,145,.35); }
.cn-tactic-facts span { display: inline-flex; align-items: baseline; gap: .45rem; }
.cn-tactic-facts small { color: #817868; font-size: .62rem; }
.cn-tactic-facts b { font-size: .68rem; }
.cn-tactic-block p { margin: .85rem 0 0; color: #394642; font-size: .75rem; line-height: 1.85; }
.cn-tactic-block.is-empty p { color: var(--muted); }

@media (max-width: 1200px) {
    .cn-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cn-hero-toolbar { grid-template-columns: minmax(14rem, 1fr) repeat(2, minmax(7rem, auto)); }
    .cn-hero-toolbar select[data-cn-hero-filter="season"] { grid-column: auto; }
}

@media (max-width: 720px) {
    .cn-hero-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cn-hero-search { grid-column: 1 / -1; }
    .cn-view-toggle { justify-self: stretch; }
    .cn-stat-toggle { justify-self: stretch; }
    .cn-view-toggle button { flex: 1; }
    .cn-stat-toggle button { flex: 1; }
    .cn-hero-grid { grid-template-columns: 1fr; }
    .cn-detail-head { padding: 1rem; gap: .9rem; }
    .cn-detail-head img { width: 4.75rem; height: 4.75rem; }
    .cn-detail-head::after { font-size: 5rem; }
    .cn-variant-gallery img { height: 14rem; }
}

@media (max-width: 430px) {
    .cn-hero-toolbar { grid-template-columns: 1fr 1fr; }
    .cn-hero-toolbar select[data-cn-hero-filter="season"], .cn-view-toggle, .cn-stat-toggle { grid-column: auto; }
    .cn-hero-card { min-height: 15rem; padding: .85rem; }
    .cn-detail-head h1 { font-size: 1.8rem; }
    .cn-variant-gallery { gap: .45rem; }
    .cn-variant-gallery img { height: 11.5rem; }
    .cn-detail-strip > * { padding-inline: .15rem; }
    .cn-detail-strip span, .cn-tendency-strip span { font-size: .55rem; }
    .cn-detail-strip strong { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cn-hero-card { transition: none; }
    .cn-hero-card:hover { transform: none; }
}