/* ═══════════════════════════════════════════════════════════════
   COSTUME PAGES (costume.php + costumes.php) — everything is co-* scoped.
   Loaded after css/home.css (tokens, fonts, page frame .hm, section heads .hm-head). Costume tiles are layered
   like the game's thumbnails (type background, art, rarity frame, stars); the T.U.N.I.N.G. pieces use the
   game's own octagonal frames, H / V marks and mask from /assets/roleslots/.
   ═══════════════════════════════════════════════════════════════ */

.co { gap: 30px; }
.co em { font-style: normal; }
.co button, .co input, .co select { font: inherit; color: inherit; }
.co-head-note, .co-secn { flex: none; max-width: 50%; color: var(--dim); font-size: 0.86rem; text-align: right; font-variant-numeric: tabular-nums; }
.co-secn b { color: var(--text); font: 400 1.2rem/1 var(--font-head); }
.co-none[hidden], .co-group[hidden], .co-li[hidden], .co-filters[hidden] { display: none; }
.co-legend { margin-top: 12px !important; }

/* ── Costume tile (list, "other colours") ──────────────────────── */
.co-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; }
.co-tiles li { min-width: 0; }
.co-tile { display: block; transition: transform 0.15s, filter 0.15s; }
.co-tile:hover { transform: translateY(-3px); filter: brightness(1.12); }
.co-tile-art { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 9%; background: var(--panel-2) url('/assets/icons/T_ui_GashaThumb_bg03.png') center / cover no-repeat; }
.co-tile-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.co-tile-art::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: center / 100% 100% no-repeat; box-shadow: inset 0 0 0 3px rgba(7, 8, 10, 0.55); pointer-events: none; }
.co-tile-art::before { content: ''; position: absolute; inset: 0; z-index: 2; background: 50% 97% / 100% auto no-repeat; pointer-events: none; }
.co-r-r .co-tile-art::after { background-image: url('/assets/icons/gasha_r_frame.png'); box-shadow: none; }
.co-r-sr .co-tile-art::after { background-image: url('/assets/icons/gasha_sr_frame.png'); box-shadow: none; }
.co-r-ssr .co-tile-art::after, .co-r-essr .co-tile-art::after { background-image: url('/assets/icons/gasha_ssr_frame.png'); box-shadow: none; }
.co-r-r .co-tile-art::before { background-image: url('/assets/icons/rarity_r_1star.png'); }
.co-r-sr .co-tile-art::before { background-image: url('/assets/icons/rarity_sr_2star.png'); }
.co-r-ssr .co-tile-art::before, .co-r-essr .co-tile-art::before { background-image: url('/assets/icons/rarity_pur_3star.png'); }
/* Special Tuning Slot badges in the tile's bottom corners (left = slot 1, right = slot 2): the game's role frame
   over a dark octagon, plus the H / V mark when the slot is side-locked. */
.co-tile-art > i.s1, .co-tile-art > i.s2 { position: absolute; bottom: 5%; z-index: 3; width: 27%; aspect-ratio: 96 / 100; background: center / 100% 100% no-repeat; filter: drop-shadow(1px 1px 0 rgba(7, 8, 10, 0.8)); }
.co-tile-art > i.s1 { left: 5%; }
.co-tile-art > i.s2 { right: 5%; }
.co-tile-art > i.s1::before, .co-tile-art > i.s2::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #14161c; -webkit-mask: url('/assets/roleslots/slot_character_mask.png') center / 100% 100% no-repeat; mask: url('/assets/roleslots/slot_character_mask.png') center / 100% 100% no-repeat; }
.co-tile-art > i.s1::after, .co-tile-art > i.s2::after { content: ''; position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
.co-tile-art > i.f-p { background-image: url('/assets/roleslots/role_slot_frame_strike.png'); }
.co-tile-art > i.f-d { background-image: url('/assets/roleslots/role_slot_frame_assault.png'); }
.co-tile-art > i.f-s { background-image: url('/assets/roleslots/role_slot_frame_rapid.png'); }
.co-tile-art > i.f-t { background-image: url('/assets/roleslots/role_slot_frame_technical.png'); }
.co-tile-art > i.f-u { background-image: url('/assets/roleslots/role_slot_frame_support.png'); }
.co-tile-art > i.m-h::after { background-image: url('/assets/roleslots/T_ui_RoleSlot_Mark_H.png'); }
.co-tile-art > i.m-v::after { background-image: url('/assets/roleslots/villainmark.png'); }
.co-tile small { display: -webkit-box; min-height: 2.4em; margin-top: 5px; overflow: hidden; color: #cfd3db; font-size: 0.74rem; line-height: 1.2; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.co-tile-art .co-new.co-soon { background: var(--blue); }
.co-upcoming { padding: 2px 12px; background: var(--blue); color: #fff; font: 400 0.82rem/1.3 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; transform: skewX(-9deg); box-shadow: 2px 2px 0 var(--ink); }
.co-pick-soon i { margin-left: 4px; color: var(--dim); font-size: 0.8em; font-style: normal; }
.co-pick-soon input:checked + span { background: var(--blue); color: #fff; }
.co-pick-soon input:checked + span i { color: rgba(255, 255, 255, 0.8); }
/* Release date under a tile's name; in the date-sorted view the owner's name is added above it. */
.co-tile small.co-date, .co-tile small.co-own { display: block; min-height: 0; margin-top: 1px; overflow: hidden; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.co-tile small.co-date { color: var(--dim); }
.co-tile small.co-own { display: none; color: var(--yellow); }   /* only in the date-sorted view */
.co-flat-on .co-tile small.co-own { display: block; }
.co-flat[hidden] { display: none; }
.co-new { position: absolute; top: 0; left: 0; z-index: 3; padding: 2px 12px 2px 7px; background: var(--red); color: #fff; font: 400 0.68rem/1.3 var(--font-head); font-style: normal; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }

/* ── Single costume: hero ──────────────────────────────────────── */
.co-hero { --rar: #7d8492; display: grid; overflow: hidden; margin-top: 6px; border: 4px solid var(--ink); background: var(--panel); box-shadow: 8px 8px 0 var(--rar); }
.co-hero.co-r-r { --rar: #c9ced8; }
.co-hero.co-r-sr { --rar: #ffc400; }
.co-hero.co-r-ssr, .co-hero.co-r-essr { --rar: #ff5ea8; }
.co-hero-art { display: flex; align-items: flex-end; justify-content: center; min-height: 240px; padding: 14px 14px 0; background: var(--ink) url('/assets/icons/T_ui_GashaThumb_bg03.png') center / 160px repeat; }
.co-hero-art img { display: block; width: auto; max-width: 100%; height: auto; max-height: 460px; filter: drop-shadow(6px 6px 0 rgba(7, 8, 10, 0.55)); }
.co-hero-text { display: grid; gap: 12px; align-content: center; min-width: 0; padding: 18px 20px 22px; }
.co-crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--dim); font-size: 0.86rem; }
.co-crumbs a { color: var(--text); border-bottom: 1px solid var(--line); }
.co-crumbs a:hover { color: var(--yellow); }
.co-rarity { display: flex; align-items: center; gap: 10px; }
.co-rarity span { display: inline-block; padding: 2px 14px; background: var(--rar); color: var(--ink); font: 400 0.9rem/1.3 var(--font-head); letter-spacing: 0.08em; transform: skewX(-9deg); box-shadow: 2px 2px 0 var(--ink); }
.co-rarity b { color: #ffd201; font-size: 1.2rem; letter-spacing: 2px; text-shadow: 2px 2px 0 var(--ink); }
.co-name { margin: 0; font: 400 clamp(1.8rem, 5vw, 3rem)/1 var(--font-head); text-transform: uppercase; text-shadow: 3px 3px 0 var(--ink); overflow-wrap: anywhere; }
.co-owner { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 4px 14px 4px 4px; border: 2px solid var(--ink); background: var(--panel-2); }
.co-owner:hover { border-color: var(--yellow); }
.co-owner img { width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%; background: var(--ink); object-fit: cover; }
.co-owner b { font: 400 1.05rem/1.2 var(--font-head); }
.co-desc { max-width: 60ch; color: #dfe2e8; }
.co-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.co-facts div { display: grid; gap: 2px; padding: 7px 12px 6px; border: 2px solid var(--ink); background: var(--panel-2); }
.co-facts dt { color: var(--yellow); font: 400 0.68rem/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.co-facts dd { margin: 0; font: 400 1rem/1.2 var(--font-head); }
.co-facts small { color: var(--dim); font-family: var(--font-body); font-size: 0.8rem; }
.co-price { display: flex; align-items: center; gap: 6px; }
@media (min-width: 860px) {
    .co-hero { grid-template-columns: minmax(240px, 30%) minmax(0, 1fr); }
    .co-hero-art { border-right: 4px solid var(--ink); }
}

/* ── The game's octagon: role frame + what is inside + H / V mark ── */
.co-oct { --s: 72px; position: relative; flex: none; display: block; width: var(--s); aspect-ratio: 96 / 100; }
.co-oct > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.co-oct-frame { background: center / 100% 100% no-repeat; }
.co-f-strike .co-oct-frame { background-image: url('/assets/roleslots/role_slot_frame_strike.png'); }
.co-f-rapid .co-oct-frame { background-image: url('/assets/roleslots/role_slot_frame_rapid.png'); }
.co-f-assault .co-oct-frame { background-image: url('/assets/roleslots/role_slot_frame_assault.png'); }
.co-f-technical .co-oct-frame { background-image: url('/assets/roleslots/role_slot_frame_technical.png'); }
.co-f-support .co-oct-frame { background-image: url('/assets/roleslots/role_slot_frame_support.png'); }
.co-oct-mark { background: center / 100% 100% no-repeat; }
.co-m-h { background-image: url('/assets/roleslots/T_ui_RoleSlot_Mark_H.png'); }
.co-m-v { background-image: url('/assets/roleslots/villainmark.png'); }
/* Inside a chip: the Battle Style's art (cut to the octagon by the game's mask) and its special skill icon take
   turns, as they do in the game. */
.co-oct-a { object-fit: cover; -webkit-mask: url('/assets/roleslots/slot_character_mask.png') center / 100% 100% no-repeat; mask: url('/assets/roleslots/slot_character_mask.png') center / 100% 100% no-repeat; animation: co-swap 6s infinite; }
.co-oct-b { object-fit: contain; padding: 4%; opacity: 0; animation: co-swap 6s infinite -3s; }
@keyframes co-swap { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .co-oct-a, .co-oct-b { animation: none; } }
/* Inside a slot on the board: the role's icon on a dark plate cut to the same octagon. */
.co-oct-role { inset: 0; padding: 26%; object-fit: contain; background: #1b1e26; -webkit-mask: url('/assets/roleslots/slot_character_mask.png') center / 100% 100% no-repeat; mask: url('/assets/roleslots/slot_character_mask.png') center / 100% 100% no-repeat; }

/* ── Slot board ────────────────────────────────────────────────── */
.co-board { display: grid; gap: 14px; }
.co-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 14px; border: 3px solid var(--ink); background: var(--panel); box-shadow: 5px 5px 0 var(--ink); }
.co-row-note { grid-column: 1 / -1; color: var(--dim); font-size: 0.84rem; }
.co-slot { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 10px 6px 8px; border: 2px solid var(--ink); background: var(--panel-2); cursor: pointer; text-align: center; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.co-slot:hover { transform: translateY(-3px); }
.co-slot:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.co-slot .co-oct { --s: clamp(56px, 7vw, 88px); margin-bottom: 3px; }
.co-slot b { font: 400 0.92rem/1.15 var(--font-head); }
.co-slot small { color: var(--dim); font-size: 0.72rem; line-height: 1.25; }
.co-slot small:nth-of-type(1) { color: var(--acc); }
.co-lv em { color: var(--yellow); }
.co-lock { color: #e9d98a !important; }
.co-slot.is-locked .co-oct { filter: grayscale(0.7) brightness(0.7); }
.co-slot-sp { border-color: rgba(255, 210, 1, 0.55); background: linear-gradient(160deg, rgba(255, 210, 1, 0.14), var(--panel-2) 60%); }
.co-slot.is-on { border-color: var(--acc); box-shadow: 4px 4px 0 var(--acc); }
.co-slot.is-same { border-color: var(--acc); }
/* Costs: one small card per action, label on top, icon and amount on one line underneath. */
.co-costs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; margin-top: 14px !important; }
.co-costs li { display: grid; gap: 7px; align-content: start; min-width: 0; padding: 10px 14px 11px; border: 2px solid var(--ink); background: var(--panel); box-shadow: 3px 3px 0 var(--ink); }
.co-costs b { color: var(--yellow); font: 400 0.7rem/1.2 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.co-cost { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); font: 400 1rem/1.25 var(--font-head); }
.co-cost img { flex: none; width: 30px; height: 30px; object-fit: contain; }
.co-cost i { margin-right: 2px; color: var(--yellow); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-costs-note { margin-top: 10px !important; }
.co-costs-note em { margin-right: 4px; color: var(--yellow); }

/* ── What fits a slot ──────────────────────────────────────────── */
.co-panels { margin-top: 18px; }
.co-panel { padding: 14px 16px 16px; border: 3px solid var(--ink); border-top: 6px solid var(--acc); background: var(--panel); box-shadow: 5px 5px 0 var(--ink); }
.co-panel + .co-panel { margin-top: 16px; }
.co-js .co-panel:not(.is-on) { display: none; }
.co-panel-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 12px; font: 400 1.2rem/1.2 var(--font-head); text-transform: uppercase; }
.co-panel-h span { color: var(--acc); }
.co-panel-h small { margin-left: auto; color: var(--dim); font: 400 0.82rem/1.2 var(--font-body); text-transform: none; }
.co-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px 14px; }
.co-chips li { min-width: 0; }
/* A card is the icon, the Battle Style's name, then one tight row per skill: name and one-line description on
   the left, its values per level on the right. Cards in a row share a height and centre their content, so a
   style with one skill sits evenly next to a style with two. */
.co-chip { display: flex; align-items: center; gap: 12px; height: 100%; padding: 9px 12px 10px 9px; border: 2px solid var(--ink); background: var(--panel-2); transition: border-color 0.12s, transform 0.12s; }
.co-chip:hover { border-color: var(--acc); transform: translateY(-2px); }
.co-chip-txt { flex: 1; display: grid; gap: 6px; min-width: 0; }
.co-chip-txt > b { font: 400 1.02rem/1.2 var(--font-head); }
.co-chip-txt > b em { color: var(--dim); font-size: 0.86em; }
.co-ef { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.co-ef-txt { display: grid; gap: 1px; min-width: 0; }
.co-ef strong { color: var(--text); font: 400 0.92rem/1.2 var(--font-head); overflow-wrap: anywhere; }
.co-ef small { display: -webkit-box; overflow: hidden; color: #b9bec9; font-size: 0.76rem; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.co-ef em { color: var(--dim); }
.co-ef small.co-subs { display: block; margin-top: 1px; color: #e9d98a; }
.co-ef small.co-subs b { color: var(--yellow); font-weight: 400; }
.co-lvs { display: flex; flex-wrap: nowrap; gap: 3px; }
/* Special Tuning Skills have up to 11 levels: their values go on their own line and may wrap. */
.co-ef-wide { grid-template-columns: minmax(0, 1fr); }
.co-ef-wide .co-lvs { flex-wrap: wrap; }
.co-ef-wide small { -webkit-line-clamp: 3; }
.co-lvs i { display: grid; justify-items: center; min-width: 30px; padding: 1px 5px 2px; border: 1px solid var(--line); background: rgba(7, 8, 10, 0.45); color: var(--text); font-size: 0.78rem; font-style: normal; font-variant-numeric: tabular-nums; line-height: 1.25; }
.co-lvs i small { color: var(--dim); font-size: 0.62rem; }

/* ── Costume list ──────────────────────────────────────────────── */
.co-title { margin: 0; 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); }
.co-filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 20px; padding: 14px 16px; border: 3px solid var(--ink); background: var(--panel); box-shadow: 6px 6px 0 var(--yellow); }
.co-search, .co-select { display: grid; gap: 4px; margin: 0; }
.co-search { flex: 1 1 260px; }
.co-search span, .co-select span, .co-kinds legend { float: none; width: auto; margin: 0; padding: 0; color: var(--yellow); font: 400 0.74rem/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.co-search input { width: 100%; padding: 8px 12px; border: 3px solid var(--ink); background: var(--bg); color: var(--text); outline: none; }
.co-search input:focus { border-color: var(--yellow); }
.co-select select { max-width: 240px; padding: 8px 10px; border: 2px solid var(--ink); background: var(--panel-2); color: var(--text); }
.co-select select option { background: #17191f; color: #f3f4f6; }
.co-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.co-kinds legend { flex-basis: 100%; margin-bottom: 4px; }
.co-pick { position: relative; margin: 0; cursor: pointer; }
.co-pick input { position: absolute; opacity: 0; pointer-events: none; }
.co-pick span { display: inline-block; padding: 5px 12px; border: 2px solid var(--ink); background: var(--panel-2); font: 400 0.92rem/1.2 var(--font-head); white-space: nowrap; transition: background 0.12s, color 0.12s, transform 0.12s; }
.co-pick:hover span { transform: translateY(-2px); }
.co-pick input:checked + span { background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.co-pick input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.co-pick-role span { display: inline-flex; align-items: center; gap: 4px; padding-right: 8px; padding-left: 7px; font-size: 0.84rem; }
.co-pick-role img { flex: none; filter: drop-shadow(1px 1px 0 var(--ink)); }
.co-pick-role input:checked + span { background: var(--acc); }
.co-min { margin: 0; }
.co-min select { padding: 4px 6px; border: 2px solid var(--ink); background: var(--panel-2); color: var(--text); font: 400 0.92rem/1.2 var(--font-head); }
.co-min select option { background: #17191f; color: #f3f4f6; }
.co-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-left: auto; }
.co-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; }
.co-reset:hover { background: var(--red); color: #fff; }
.co-count { color: var(--dim); font-size: 0.9rem; white-space: nowrap; }
.co-count b { color: var(--yellow); font: 400 1.3rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
/* Wide screens: a fixed grid instead of free wrapping, so every row starts level and nothing floats alone.
   Row 1 search / character / sort, row 2 rarity / side / release, row 3 the two slot filters, row 4 reset + count. */
@media (min-width: 980px) {
    .co-filters { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
    .co-filters > label:nth-of-type(1) { grid-column: span 6; order: 1; }
    .co-filters > label:nth-of-type(2) { grid-column: span 3; order: 2; }
    .co-filters > label:nth-of-type(3) { grid-column: span 3; order: 3; }
    .co-filters > fieldset:nth-of-type(1) { grid-column: span 4; order: 4; }
    .co-filters > fieldset:nth-of-type(4) { grid-column: span 4; order: 5; }
    .co-filters > fieldset:nth-of-type(5) { grid-column: span 4; order: 6; }
    .co-filters > fieldset:nth-of-type(2) { grid-column: span 6; order: 7; }
    .co-filters > fieldset:nth-of-type(3) { grid-column: span 6; order: 8; }
    .co-filters > .co-end { grid-column: 1 / -1; order: 9; justify-content: flex-end; margin: 0; padding-top: 12px; border-top: 2px dashed var(--line); }
    .co-select select { width: 100%; max-width: none; }
}
/* The voice list has fewer filter groups: "how to get" takes a full row, the others share the next one. */
@media (min-width: 980px) {
    .co-filters.co-filters-simple > fieldset:nth-of-type(n) { grid-column: span 4; order: 5; }
    .co-filters.co-filters-simple > fieldset:nth-of-type(1) { grid-column: 1 / -1; order: 4; }
}

/* ── Voice lines (voices.php): one card per line, what is said in the middle ── */
.co-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px 14px; }
.co-voices li { min-width: 0; }
.co-voice { display: flex; align-items: center; gap: 12px; height: 100%; padding: 8px 12px 9px 8px; border: 2px solid var(--ink); background: var(--panel); box-shadow: 3px 3px 0 var(--ink); }
.co-voice .co-tile-art { flex: none; width: 62px; }
.co-art-voice { background-image: url('/assets/icons/T_ui_GashaThumb_bg02.png'); }
.co-art-voice img { object-position: center top; }
.co-art-voice::before { background-size: 150% auto; }
.co-art-voice .co-new { padding: 1px 9px 1px 5px; font-size: 0.56rem; }
.co-voice-txt { display: grid; gap: 2px; min-width: 0; }
.co-voice-txt b { font: 400 1rem/1.2 var(--font-head); }
.co-voice-txt q { color: #e7e9ee; font-size: 0.9rem; line-height: 1.3; quotes: '\201C' '\201D'; }
.co-voice-txt small { color: var(--dim); font-size: 0.72rem; line-height: 1.3; }
.co-voice-txt small.co-own { color: var(--yellow); }
.co-voice-txt small.co-own { display: none; }
.co-flat-on .co-voice-txt small.co-own { display: block; }
.co-voice-txt small.co-date { color: #8f95a3; }

/* ── Emotes (emotes.php): the same tiles a little wider, each with how the emote is obtained ── */
.co-art-emote { background-image: url('/assets/icons/T_ui_GashaThumb_bg01.png'); }
.co-emotes { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.co-emotes .co-tile > small:first-of-type { min-height: 0; }
.co-tile small.co-get { min-height: 0; margin-top: 1px; color: var(--dim); font-size: 0.66rem; }
span.co-tile:hover { transform: none; filter: none; }

.co-group { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.co-group .hm-head { margin-bottom: 14px; }
.co-group .hm-h2 a:hover { color: var(--yellow); }
.co-group-face { flex: none; width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 50%; background: var(--ink); object-fit: cover; box-shadow: 3px 3px 0 var(--yellow); }

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

@media (max-width: 560px) {
    .co-head-note { display: none; }
    .co-row { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px; }
    .co-tiles { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
    .co-end { margin-left: 0; }
}