/* ═══════════════════════════════════════════════════════════════
   CHARACTER LIST (characters.php) — everything is cl-* scoped.
   Loaded after css/home.css (tokens, fonts, page frame .hm, section heads .hm-head). A card sets --acc to its
   role colour and --role-bg to the role's tile from the character select screen.
   The filter bar is hidden until js/characters.js runs; without JavaScript the page is the two full lists.
   ═══════════════════════════════════════════════════════════════ */

.cl { gap: 26px; }
.cl em { font-style: normal; }
.cl button, .cl input, .cl select { font: inherit; color: inherit; }
.cl-title { margin: 0 0 12px; font: 400 clamp(2.6rem, 8vw, 4.6rem)/0.9 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; transform: skewX(-6deg); transform-origin: left bottom; text-shadow: 4px 4px 0 var(--red), 7px 7px 0 var(--ink); }
.cl-top .hm-lead { margin-bottom: 0 !important; }

/* ── Filter bar ────────────────────────────────────────────────── */
.cl-filters { display: grid; gap: 12px 18px; padding: 14px 16px; border: 3px solid var(--ink); background: var(--panel); box-shadow: 6px 6px 0 var(--yellow); }
.cl-filters[hidden] { display: none; }
.cl-filters > * { min-width: 0; }
.cl-search { display: grid; gap: 4px; margin: 0; }
.cl-search span, .cl-group legend, .cl-sort span { float: none; width: auto; margin: 0 0 4px; padding: 0; color: var(--yellow); font: 400 0.74rem/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.cl-search input { width: 100%; padding: 9px 12px; border: 3px solid var(--ink); background: var(--bg); color: var(--text); font-size: 1rem; outline: none; }
.cl-search input:focus { border-color: var(--yellow); }
.cl-search input::placeholder { color: #7d8492; }
.cl-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cl-group legend { flex-basis: 100%; }
.cl-chip { position: relative; margin: 0; cursor: pointer; }
.cl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cl-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 2px solid var(--ink); background: var(--panel-2); font: 400 0.92rem/1.2 var(--font-head); letter-spacing: 0.02em; white-space: nowrap; transition: background 0.12s, color 0.12s, transform 0.12s, box-shadow 0.12s; }
.cl-chip:hover span { transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); }
.cl-chip input:checked + span { background: var(--acc, var(--yellow)); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.cl-chip input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.cl-chip img { flex: none; filter: drop-shadow(1px 1px 0 var(--ink)); }
.cl-chip-hero { --acc: var(--blue); }
.cl-chip-hero input:checked + span, .cl-chip-vil input:checked + span { color: #fff; }
.cl-chip-vil { --acc: var(--red); }
.cl-chip-ticket span { border-color: rgba(255, 210, 1, 0.55); }
.cl-end { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.cl-sort { display: grid; margin: 0; }
.cl-sort select { padding: 7px 10px; border: 2px solid var(--ink); background: var(--panel-2); color: var(--text); }
.cl-sort select option { background: #17191f; color: #f3f4f6; }
.cl-reset { padding: 7px 16px; border: 2px solid var(--ink); background: var(--panel-2); font: 400 0.9rem/1.2 var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.12s, color 0.12s; }
.cl-reset:hover { background: var(--red); color: #fff; }
.cl-count { margin-left: auto !important; color: var(--dim); font-size: 0.9rem; white-space: nowrap; }
.cl-count b { color: var(--yellow); font: 400 1.3rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
@media (min-width: 980px) {
    .cl-filters { position: sticky; top: 0; z-index: 6; grid-template-columns: minmax(220px, 1.1fr) auto minmax(0, 1.6fr); align-items: start; }
    .cl-filters .cl-group:nth-of-type(3) { grid-column: 1 / 3; }
    .cl-end { grid-column: 3; grid-row: 2; justify-content: flex-end; }
}

/* ── Sections + cards ──────────────────────────────────────────── */
.cl-sec[hidden], .cl-item[hidden], .cl-empty[hidden] { display: none; }
.cl-sub { margin-left: 8px; color: var(--yellow); font-size: 0.5em; letter-spacing: 0.1em; text-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.cl-secn { flex: none; color: var(--dim); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.cl-secn b { color: var(--text); font: 400 1.2rem/1 var(--font-head); }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 16px 14px; }
.cl-item { min-width: 0; }
.cl-card { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 3px solid var(--ink); background: var(--panel); box-shadow: 4px 4px 0 var(--acc); transition: transform 0.15s, box-shadow 0.15s; }
.cl-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--acc); }
/* The game's style thumbnail on its role tile: the thumbnail's rounded, see-through corners show the tile. */
.cl-art { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-bottom: 3px solid var(--ink); background: var(--ink) var(--role-bg, none) repeat center / 72px; }
.cl-art > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.cl-card:hover .cl-art > img:first-child { transform: scale(1.06); }
.cl-role { position: absolute; right: 5px; bottom: 5px; width: 30px; height: 30px; filter: drop-shadow(2px 2px 0 var(--ink)); }
.cl-new { position: absolute; top: 0; left: 0; padding: 3px 14px 3px 8px; background: var(--red); color: #fff; font: 400 0.72rem/1.2 var(--font-head); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
/* The name always gets two lines' height and sits in the middle of it, so a one-line and a two-line name leave the
   lines under them (character, HP) at the same height on every card. */
.cl-txt { display: grid; grid-template-rows: minmax(2.3em, auto); gap: 2px; align-content: center; padding: 8px 9px 9px; }
.cl-txt b { display: -webkit-box; align-self: center; overflow: hidden; font: 400 1rem/1.15 var(--font-head); -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.cl-txt small { color: var(--dim); font-size: 0.76rem; line-height: 1.25; }
.cl-txt small em { color: var(--green); }
.cl-of { overflow: hidden; color: #dfe2e8 !important; text-overflow: ellipsis; white-space: nowrap; }
.cl-hero { color: #8fbcff; }
.cl-vil { color: #ff8f91; }
.cl-empty { text-align: center; }
.cl-empty .cl-reset { margin-left: 10px; }

/* Motion hook: hidden until revealed, only while js/characters.js is animating (class set on <html>). */
.cl-anim .cl-reveal { opacity: 0; }

@media (max-width: 560px) {
    .cl-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 10px; }
    .cl-txt b { font-size: 0.9rem; }
    .cl-sub { display: block; margin: 6px 0 0; }
    .cl-count { margin-left: 0 !important; }
}