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

.cn-tactic-search input,
.cn-tactic-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-tactic-special-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 2.8rem;
    padding: 0 .8rem;
    border: 1px solid #cfc2ad;
    border-radius: 3px;
    background: rgba(255,253,247,.72);
    color: #4d5955;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.cn-tactic-special-toggle input { width: .9rem; height: .9rem; margin: 0 .45rem 0 0; accent-color: var(--red); }

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

.cn-tactic-card {
    --tactic-color: #c77622;
    --tactic-watermark: rgba(199,118,34,.09);
    content-visibility: auto;
    contain-intrinsic-size: 16rem;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 14.25rem;
    padding: 1rem 1.05rem .9rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tactic-color) 38%, var(--line));
    border-radius: 12px;
    background: rgba(255,253,247,.78);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.cn-tactic-card[data-grade="5"] { --tactic-color: #c77622; --tactic-watermark: rgba(199,118,34,.09); }
.cn-tactic-card[data-grade="4"] { --tactic-color: #80649c; --tactic-watermark: rgba(128,100,156,.09); }
.cn-tactic-card[data-grade="3"] { --tactic-color: #4b7fb5; --tactic-watermark: rgba(75,127,181,.09); }
.cn-tactic-card[data-grade="2"] { --tactic-color: #5b8b72; --tactic-watermark: rgba(91,139,114,.09); }

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

.cn-tactic-card::after {
    content: attr(data-rank);
    position: absolute;
    z-index: 0;
    top: .18rem;
    right: .72rem;
    color: var(--tactic-watermark);
    font: 900 4.5rem/1 var(--sans);
    pointer-events: none;
}

.cn-tactic-card > * { position: relative; z-index: 1; }

.cn-tactic-card[hidden] { display: none !important; }
.cn-tactic-card:hover { transform: translateY(-2px); border-color: var(--tactic-color); background: var(--paper); }

.cn-tactic-card-title { display: block; width: fit-content; margin: .12rem 0 .45rem; color: var(--ink); text-decoration: none; }
.cn-tactic-card-title strong { display: block; font: 700 1.22rem/1.35 var(--serif); letter-spacing: .04em; }
.cn-tactic-card-title:hover { color: var(--tactic-color); }
.cn-tactic-card-meta { display: flex; align-items: center; gap: .3rem; color: #817868; font-size: .64rem; line-height: 1.2; }
.cn-tactic-card-meta b { color: #3d4b46; font-size: .69rem; }
.cn-tactic-card-meta i { width: 1px; height: .75rem; margin: 0 .25rem; background: rgba(33,31,26,.18); }
.cn-tactic-effect-tags { display: flex; align-items: baseline; gap: .42rem; margin-top: .58rem; color: #4d5955; font-size: .67rem; }
.cn-tactic-effect-tags b { color: var(--tactic-color); font-size: .6rem; letter-spacing: .08em; }
.cn-tactic-card-effect { margin: .62rem 0 .85rem; color: #4c5955; font-size: .72rem; line-height: 1.78; }
.cn-tactic-card-source { display: flex; align-items: baseline; flex-wrap: wrap; gap: .38rem .8rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid rgba(33,31,26,.12); color: #817868; font-size: .62rem; }
.cn-tactic-card-source > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: .42rem; }
.cn-tactic-card-source b { color: #756b5d; font-size: .6rem; letter-spacing: .06em; }
.cn-tactic-card-source.is-event b { color: #9b392f; }
.cn-tactic-card-source.is-special b { color: #806d4a; }
.cn-tactic-hero-links { display: inline-flex; flex-wrap: wrap; gap: .28rem .5rem; }
.cn-tactic-hero-links a { color: #405c55; font-size: .67rem; font-weight: 700; text-decoration: none; }
.cn-tactic-hero-links a:hover { color: var(--tactic-color); text-decoration: underline; }

.cn-tactic-detail { max-width: 100%; }
.cn-tactic-detail-head {
    position: relative;
    overflow: hidden;
    padding: clamp(1.2rem, 3vw, 2.15rem);
    border: 1px solid var(--line);
    border-top: 3px solid var(--red);
    border-radius: 12px;
    background: linear-gradient(112deg, rgba(255,253,247,.98), rgba(243,237,225,.76));
}
.cn-tactic-detail-head p { margin: 0 0 .2rem; color: var(--red); font-size: .7rem; font-weight: 800; }
.cn-tactic-detail-head h1 { margin: 0; font: 700 clamp(2rem, 5vw, 3.25rem)/1.2 var(--serif); letter-spacing: .06em; }
.cn-tactic-detail-head span { display: block; margin-top: .35rem; color: var(--muted); font-size: .68rem; }

.cn-tactic-facts-strip {
    display: grid;
    grid-template-columns: repeat(3, 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-tactic-facts-strip > * { min-width: 0; padding: 0 .35rem; border-left: 1px solid rgba(177,166,145,.38); }
.cn-tactic-facts-strip > span:nth-child(1), .cn-tactic-facts-strip > strong:nth-child(4) { border-left: 0; }
.cn-tactic-facts-strip span { color: #817868; font-size: .62rem; line-height: 1; }
.cn-tactic-facts-strip strong { color: #34423e; font-size: .86rem; line-height: 1.2; }
.cn-tactic-description { padding: 1.05rem 1.1rem; border-left: 3px solid var(--red); background: rgba(255,253,247,.56); color: #394642; font-size: .82rem; line-height: 2; }
.cn-tactic-detail-source .cn-tactic-card-source { margin-top: 0; }
.cn-tactic-detail-note { margin: -.1rem 0 .8rem; color: #817868; font-size: .7rem; line-height: 1.7; }
.cn-tactic-detail-tags { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .72rem; padding: .7rem 0 .7rem .85rem; border-left: 3px solid var(--red); color: #405c55; }
.cn-tactic-detail-tags span { font-size: .78rem; font-weight: 800; }
.cn-related-tactics { display: grid; border-top: 1px solid var(--line); }
.cn-related-tactics > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-width: 0; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.cn-related-tactics a { display: block; color: #405c55; text-decoration: none; }
.cn-related-tactics a strong { display: block; font: 700 .82rem/1.4 var(--serif); }
.cn-related-tactics a span { display: block; margin-top: .08rem; color: #817868; font-size: .62rem; }
.cn-related-tactics a:hover strong { color: var(--red); }
.cn-related-tactics small { color: #8a8172; font-size: .62rem; text-align: right; white-space: nowrap; }
.cn-related-tactics .is-full-match small { color: #9b392f; }

@media (max-width: 1200px) {
    .cn-tactic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cn-tactic-toolbar { grid-template-columns: minmax(14rem, 1fr) repeat(3, minmax(7rem, auto)); }
    .cn-tactic-special-toggle { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 720px) {
    .cn-tactic-toolbar { grid-template-columns: 1fr 1fr; }
    .cn-tactic-search, .cn-tactic-special-toggle { grid-column: 1 / -1; }
    .cn-tactic-special-toggle { justify-self: stretch; }
    .cn-tactic-grid { grid-template-columns: 1fr; }
    .cn-related-tactics > div { grid-template-columns: 1fr; gap: .25rem; }
    .cn-related-tactics small { text-align: left; }
    .cn-tactic-detail-head { padding: 1rem; }
}