/* ═══════════════════════════════════════════════════════════════
   CLUB FESTIVAL DETAIL (clubfest.php)
   Builds on css/character.css (cd-* tokens, panels, tabs, buttons, the .it-* item markup) and
   css/events.css (ev-* hero, layout, boxes, lists, tables); everything here is cf-* scoped.
   Static by design: no loaders or entrance animations.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: phase timeline, favored types ─────────────────────────── */
.cf-phases { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cf-phases li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(8.5em, auto) minmax(0, 1fr);
    gap: 2px 10px;
    padding: 2px 0 6px 18px;
    font-size: 0.86rem;
}
.cf-phases li::before {
    content: '';
    position: absolute;
    left: 3px; top: 7px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--navy-light);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.cf-phases li::after {
    content: '';
    position: absolute;
    left: 7px; top: 18px; bottom: -4px;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}
.cf-phases li:last-child::after { display: none; }
.cf-phases li.is-main::before { background: var(--acc2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc2) 35%, transparent); }
.cf-ph-k { color: var(--text-3); font-size: 0.8rem; font-weight: 600; padding-top: 1px; }
.cf-ph-k small { color: var(--acc2); font-weight: 700; white-space: nowrap; }
.cf-ph-v { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.is-main .cf-ph-v { color: #fff; font-weight: 600; }
.cf-tz { margin: -4px 0 0; color: var(--text-3); font-size: 0.74rem; line-height: 1.4; }
@media (max-width: 420px) {
    .cf-phases li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.cf-fav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.cf-fav-k { color: var(--text-3); font-size: 0.8rem; font-weight: 600; }
.cf-fav-t { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px 1px 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 0.8rem; font-weight: 700; }
.cf-fav-t img { width: 22px; height: 22px; }
.cf-fav-in { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.cf-fav-in small { flex-basis: 100%; color: var(--text-3); font-size: 0.74rem; }

/* ── At a glance ─────────────────────────────────────────────────── */
.cf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cf-stats li { display: grid; align-content: start; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); }
.cf-stats b { display: inline-flex; align-items: center; gap: 4px; color: #fff; font: 400 1.35rem/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.cf-stats span { color: var(--text-3); font-size: 0.76rem; line-height: 1.3; }
.cf-prizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cf-prizes li { display: grid; gap: 4px; align-content: start; padding: 8px 10px; border-radius: 10px; background: linear-gradient(135deg, rgba(255, 213, 83, 0.1), rgba(255, 255, 255, 0.02) 60%); border: 1px solid rgba(255, 213, 83, 0.22); min-width: 0; max-width: 100%; }
.cf-prizes small { color: var(--text-3); font-size: 0.74rem; }
.cf-prize-n { font-size: 0.86rem; font-weight: 600; overflow-wrap: anywhere; }

/* ── Ranking title nameplates (125×21); a text plate when the art is not hosted ── */
.cf-plate { display: inline-flex; align-items: center; vertical-align: middle; max-width: 100%; }
.cf-plate img { display: block; width: 125px; height: 21px; max-width: none; }
.cf-plate-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cf-plate.is-text .cf-plate-t {
    position: static;
    width: auto; height: auto;
    overflow: visible;
    clip: auto;
    min-width: 125px;
    padding: 1px 10px;
    border: 1px solid rgba(255, 213, 83, 0.55);
    border-radius: 4px;
    background: linear-gradient(180deg, #5a4210, #2e2208);
    color: #ffe08a;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    white-space: normal;
}
.cf-plate.has-name.is-text { display: none; }   /* the name is printed next to it */

/* ── Official help ──────────────────────────────────────────────── */
.cf-help { display: grid; gap: 6px; }
.cf-help-t > summary, .cf-exl > summary, .cf-case > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.cf-help-t > summary::-webkit-details-marker, .cf-exl > summary::-webkit-details-marker, .cf-case > summary::-webkit-details-marker { display: none; }
.cf-help-t > summary::before, .cf-exl > summary::before, .cf-case > summary::before { content: '▸'; color: var(--acc2); }
.cf-help-t[open] > summary::before, .cf-exl[open] > summary::before, .cf-case[open] > summary::before { content: '▾'; }
.cf-help-t > summary:hover, .cf-exl > summary:hover, .cf-case > summary:hover { background: rgba(255, 255, 255, 0.08); }
.cf-help-t > summary:focus-visible, .cf-exl > summary:focus-visible, .cf-case > summary:focus-visible, .cf-st > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cf-help-b { padding: 6px 12px 4px; color: #d6def0; font-size: 0.86rem; }
.cf-help-b h3 { margin: 12px 0 4px; color: var(--gold); font-size: 0.86rem; font-weight: 700; }
.cf-help-b > h3:first-child { margin-top: 2px; }
.cf-help-b p { margin: 0 0 6px; }
.cf-help-b ul { margin: 0 0 6px; padding-left: 1.2em; }
.cf-help-b .cf-help-note { color: var(--text-2); font-size: 0.8rem; }

/* ── Stage rules ────────────────────────────────────────────────── */
.cf-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.cf-rule { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border-top: 3px solid var(--up); min-width: 0; }
.cf-rule-enemy { border-top-color: var(--down); }
.cf-rule h3 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 700; }
.cf-rule h3 small { display: block; color: var(--text-3); font-size: 0.74rem; font-weight: 600; }
.cf-rule-lines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cf-rule-lines li { display: grid; gap: 1px; }
.cf-rule-lines li.is-fav { margin-left: -12px; padding: 4px 0 4px 9px; border-left: 3px solid var(--gold); background: linear-gradient(90deg, rgba(255, 213, 83, 0.08), transparent 70%); }
.cf-rule-no { color: var(--gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; }
.cf-rule-lines .ev-skilltext { margin: 0; }
.cf-fx { margin-top: 10px; }
.cf-fx li { font-size: 0.72rem; }

/* ── Stages table ───────────────────────────────────────────────── */
.cf-stage-t th[scope="row"] { white-space: nowrap; font-weight: 700; }
.cf-stage-t td, .cf-stage-t th { vertical-align: top; }
.cf-stage-t .cf-c { text-align: center; }
.cf-stage-t thead th.ev-num { text-align: right; }
.cf-stage-t tr.is-ex th, .cf-stage-t tr.is-ex td { background: rgba(255, 213, 83, 0.06); }
.cf-stage-t tr.is-ex th[scope="row"] { color: var(--gold); }
.cf-notes { display: block; max-width: 13em; color: var(--text-3); font-size: 0.7rem; font-weight: 500; white-space: normal; line-height: 1.35; }
.cf-yes { color: var(--up); font-weight: 700; }
.cf-stage-w { container-type: inline-size; }
@container (max-width: 540px) {
    .cf-stage-t thead { display: none; }
    .cf-stage-t, .cf-stage-t tbody { display: block; }
    .cf-stage-t tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 7px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .cf-stage-t tr.is-ex { background: rgba(255, 213, 83, 0.06); border-radius: 8px; }
    .cf-stage-t th, .cf-stage-t td { display: block; padding: 0; border: 0; white-space: nowrap; }
    .cf-stage-t tbody th, .cf-stage-t tbody td, .cf-stage-t td.ev-num, .cf-stage-t .cf-c { text-align: left; }
    .cf-stage-t tr.is-ex th, .cf-stage-t tr.is-ex td { background: none; }
    .cf-stage-t th[scope="row"] { flex: 1 0 100%; white-space: normal; font: 400 1rem/1.25 var(--font-display); }
    .cf-stage-t tr:not(.is-ex) th[scope="row"]::before { content: var(--cf-s1, 'Stage '); }
    .cf-stage-t td::before { color: var(--text-3); font-size: 0.7rem; font-weight: 500; }
    .cf-stage-t td:nth-child(2)::before { content: var(--cf-s2); }
    .cf-stage-t td:nth-child(3)::before { content: var(--cf-s3); }
    .cf-stage-t td:nth-child(4)::before { content: var(--cf-s4); }
    .cf-stage-t td:nth-child(5)::before { content: var(--cf-s5); }
    .cf-stage-t td:nth-child(6)::before { content: var(--cf-s6); }
    .cf-stage-t td:nth-child(7)::before { content: var(--cf-s7); }
    .cf-stage-t .cf-notes { max-width: none; font-family: var(--font-body); }
    .cf-stage-t .cf-rw { display: inline-flex; }
}
.cf-rw { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.cf-rw .ev-cur .it-tile .it-ic { width: 20px; }
.cd-note .ev-cur { margin-right: 2px; }

/* ── Opponents ──────────────────────────────────────────────────── */
.cf .cd-tab small.cf-tab-d { opacity: 0.75; font-size: 0.72rem; font-weight: 500; }
.cf-day-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; }
.cf-day-when { margin: 0; color: var(--text-2); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.cf-day-btns { display: flex; gap: 6px; }
.cf-day-btns .cd-btn { padding: 4px 12px; font-size: 0.78rem; }
.cf-stl { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cf-st { --u: 52px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; background: rgba(255, 255, 255, 0.03); min-width: 0; }
.cf-st.is-ex { border-color: rgba(255, 213, 83, 0.3); background: linear-gradient(150deg, rgba(255, 213, 83, 0.08), rgba(255, 255, 255, 0.02) 55%); }
.cf-st > summary {
    display: grid;
    grid-template-columns: minmax(0, 8.5em) minmax(0, 8em) minmax(0, 1fr);
    align-items: center;
    gap: 6px 12px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
}
.cf-st > summary::-webkit-details-marker { display: none; }
.cf-st > summary:hover { background: rgba(255, 255, 255, 0.04); }
.cf-st-k { display: grid; gap: 0; min-width: 0; }
.cf-st-k b { font: 400 1rem/1.2 var(--font-display); color: #fff; letter-spacing: 0.3px; }
.cf-st-k b::before { content: '▸'; display: inline-block; width: 1em; color: var(--acc2); font-family: var(--font-body); }
.cf-st[open] .cf-st-k b::before { content: '▾'; }
.cf-st.is-ex .cf-st-k b { color: var(--gold); }
.cf-st-k small, .cf-st-bp small { color: var(--text-3); font-size: 0.72rem; padding-left: 1.25em; }
.cf-st-bp small { padding-left: 0; }
.cf-st-bp { display: grid; min-width: 0; }
.cf-st-bp b { color: #fff; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.cf-team { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; min-width: 0; }
/* A unit: the card in its game frame (drawn by CSS, so each icon is one <img>) with its memory overlapping the corner */
.cf-u { position: relative; display: inline-grid; justify-items: center; gap: 1px; width: var(--u); }
.cf-g { position: relative; display: block; flex: none; aspect-ratio: 1; isolation: isolate; background: center / 100% 100% no-repeat; }
.cf-g img { position: relative; display: block; width: 100%; height: 100%; }
.cf-g::after, .cf-g.c::before { content: ''; position: absolute; background: center / 100% 100% no-repeat; pointer-events: none; }
.cf-g::after { inset: 0; z-index: 1; }
.cf-g.c { width: var(--u); }
.cf-g.c::before { left: 5.3%; top: 71.6%; width: 23%; height: 23%; z-index: 2; background-size: contain; }
.cf-g.c.r1 { background-image: url('/assets/chara_bg_frame/chara_bg_101.webp'); }
.cf-g.c.r2 { background-image: url('/assets/chara_bg_frame/chara_bg_102.webp'); }
.cf-g.c.r3 { background-image: url('/assets/chara_bg_frame/chara_bg_103.webp'); }
.cf-g.c.r4 { background-image: url('/assets/chara_bg_frame/chara_bg_104.webp'); }
.cf-g.c.r1::after { background-image: url('/assets/chara_bg_frame/chara_frame_101.webp'); }
.cf-g.c.r2::after { background-image: url('/assets/chara_bg_frame/chara_frame_102.webp'); }
.cf-g.c.r3::after { background-image: url('/assets/chara_bg_frame/chara_frame_103.webp'); }
.cf-g.c.r4::after { background-image: url('/assets/chara_bg_frame/chara_frame_104.webp'); }
.cf-g.a1::before { background-image: url('/assets/type/card_attribute_01.webp'); }
.cf-g.a2::before { background-image: url('/assets/type/card_attribute_02.webp'); }
.cf-g.a3::before { background-image: url('/assets/type/card_attribute_03.webp'); }
.cf-g.a4::before { background-image: url('/assets/type/card_attribute_04.webp'); }
.cf-g.a5::before { background-image: url('/assets/type/card_attribute_05.webp'); }
.cf-g.m { position: absolute; right: -6px; top: calc(var(--u) - 20px); z-index: 3; width: 25px; }
.cf-g.m img {
    position: absolute;
    inset: 2.5%;
    width: 95%;
    height: 95%;
    -webkit-mask: url('/assets/mem_icons/card_memoryicon_mask.webp') center / 100% 100% no-repeat;
    mask: url('/assets/mem_icons/card_memoryicon_mask.webp') center / 100% 100% no-repeat;
}
.cf-g.m.r1::after { background-image: url('/assets/memory_frames/memory_frame_101.webp'); }
.cf-g.m.r2::after { background-image: url('/assets/memory_frames/memory_frame_102.webp'); }
.cf-g.m.r3::after { background-image: url('/assets/memory_frames/memory_frame_103.webp'); }
.cf-g.m.r4::after { background-image: url('/assets/memory_frames/memory_frame_104.webp'); }
.cf-u-lv { margin-top: 3px; color: var(--text-2); font-size: 0.68rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cf-u-lv::before { content: 'Lv'; color: var(--text-3); font-weight: 600; margin-right: 1px; }
.cf-u-hp { color: #ffb0ad; font-size: 0.62rem; font-weight: 700; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cf-st-body { container-type: inline-size; padding: 2px 10px 10px; overflow-x: auto; }   /* (scrolls where container queries are missing) */
@media (max-width: 640px) {
    .cf-st { --u: 46px; }
    .cf-st > summary { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
    .cf-st-bp { text-align: right; }
    .cf-team { grid-column: 1 / -1; justify-content: flex-start; }
}

/* The units of one stage: a table, stacked into small cards on a narrow panel */
.cf-ut { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.cf-ut th, .cf-ut td { padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); text-align: left; font-size: inherit; vertical-align: middle; }
.cf-ut thead th { color: var(--text-3); font-size: 0.72rem; font-weight: 600; }
.cf-ut :is(th, td):nth-child(n+2):nth-child(-n+5) { text-align: right; }   /* Lv, HP, Power, Speed */
.cf-ut a { color: var(--text); text-decoration: none; }
.cf-ut a:hover { color: var(--acc2); text-decoration: underline; }
.cf-ut td:first-child { font-weight: 600; overflow-wrap: anywhere; }
.cf-ut td:nth-child(6) { overflow-wrap: anywhere; }
.cf-ut td small { color: var(--text-3); white-space: nowrap; }
.cf-ut td:last-child { white-space: nowrap; }
@container (max-width: 560px) {
    .cf-ut thead { display: none; }
    .cf-ut, .cf-ut tbody { display: block; }
    .cf-ut tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .cf-ut td { display: block; padding: 0; border: 0; }
    .cf-ut td:nth-child(n+2):nth-child(-n+5) { white-space: nowrap; }
    .cf-ut :is(th, td):nth-child(n+2):nth-child(-n+5) { text-align: left; }
    .cf-ut td:nth-child(2)::before { content: var(--cf-l2, 'Lv. '); }
    .cf-ut td:nth-child(3)::before { content: var(--cf-l3, 'HP '); }
    .cf-ut td:nth-child(4)::before { content: var(--cf-l4, 'Power '); }
    .cf-ut td:nth-child(5)::before { content: var(--cf-l5, 'Speed '); }
    .cf-ut td:nth-child(n+2):nth-child(-n+5)::before { color: var(--text-3); font-size: 0.7rem; font-weight: 500; }
    .cf-ut td:first-child { flex: 1 0 100%; }
    .cf-ut td:nth-child(6) { flex: 1 1 calc(100% - 8em); min-width: 0; }
    .cf-ut td:last-child { margin-left: auto; }
}

/* EX marks + legend */
.cf-ex { display: inline-block; margin-right: 3px; padding: 0 5px; border-radius: 4px; background: rgba(255, 213, 83, 0.18); color: #ffe08a; font-size: 0.66rem; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.cf-ex-u { background: rgba(91, 149, 237, 0.22); color: #b9d3ff; cursor: help; }
.cf-ex-m { background: rgba(185, 89, 230, 0.22); color: #dcb0f5; }
.cf-legend { display: grid; gap: 6px; margin-top: 14px; color: var(--text-3); font-size: 0.8rem; }
.cf-legend > p { margin: 0; }
.cf-exl-b { padding: 6px 12px 2px; }
.cf-exl-h { margin: 8px 0 4px; color: var(--text-2); font-size: 0.8rem; }
.cf-exl-b ul { margin: 0 0 4px; padding-left: 1.2em; color: #d6def0; }
.cf-exl-b li b { color: var(--text-2); font-weight: 600; }
.cf-exl-b .ev-skilltext { display: inline; margin: 0; }

/* ── Style ──────────────────────────────────────────────────────── */
.cf-style { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; align-items: start; }
.cf-sty { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); min-width: 0; }
.cf-sty h3 { margin: 0 0 6px; font-size: 0.9rem; font-weight: 700; color: var(--gold); }
.cf-sty-big { margin: 0; color: #fff; font-size: 0.95rem; font-weight: 600; }
.cf-sty-note { margin: 4px 0 0; color: var(--text-3); font-size: 0.74rem; }
.cf-sty-t { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.cf-sty-t th, .cf-sty-t td { padding: 3px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); text-align: left; font-size: inherit; }
.cf-sty-t thead th { color: var(--text-3); font-size: 0.7rem; font-weight: 600; }
.cf-sty-t th[scope="row"] { font-weight: 500; color: var(--text-2); }
.cf-sty-t .ev-num { text-align: right; color: #fff; }
.cf-official { margin: 10px 0 0; padding-left: 1.2em; color: #d6def0; font-size: 0.84rem; }

/* ── Raffle Exchange ────────────────────────────────────────────── */
.cf-before { margin-bottom: 16px; padding: 12px; border-radius: 10px; background: linear-gradient(135deg, rgba(255, 213, 83, 0.08), rgba(255, 255, 255, 0.02) 60%); border: 1px solid rgba(255, 213, 83, 0.2); }
.cf-before .cd-sub-h { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0.3px; }
.cf-before .cd-note { margin-top: 10px; }
.cf-mlb { margin: 8px 0 0; color: var(--gold); font-size: 0.82rem; font-weight: 600; }
.cf-same { display: inline-block; margin: -4px 0 10px; padding: 1px 10px; border-radius: 999px; background: rgba(91, 149, 237, 0.18); color: #b9d3ff; font-size: 0.76rem; font-weight: 600; }
.cf-cases { display: grid; gap: 6px; }
.cf-case > summary { justify-content: flex-start; font-weight: 500; }
.cf-case > summary small { margin-left: auto; color: var(--text-3); font-size: 0.74rem; white-space: nowrap; }
.cf-case > summary .it-chip .it-ic { width: 32px; }
.cf-case-b { padding: 4px 12px 8px; }
.cf-case-r { margin: 8px 0 4px; color: var(--text-2); font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-case-l { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 4px; margin: 0; padding: 0; list-style: none; }
.cf-case-l li { width: 40px; height: 40px; border-radius: 6px; background: rgba(0, 0, 0, 0.25); }
.cf-case-l a { display: block; border-radius: 6px; }
.cf-case-l a:hover { box-shadow: 0 0 0 2px var(--acc2); }
.cf-case-l a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.cf-case-l img { display: block; width: 40px; height: 40px; object-fit: contain; font-size: 0; }

/* ── Reward tables (ranking tiers × reward items) ───────────────── */
.cf-mx-w { container-type: inline-size; overflow-x: auto; }
.cf-mx { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.cf-mx th, .cf-mx td { padding: 5px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); text-align: right; vertical-align: middle; font-size: inherit; }
.cf-mx thead th { padding-bottom: 8px; color: var(--text-2); font-size: 0.72rem; font-weight: 600; vertical-align: bottom; }
.cf-mx thead th:first-child { text-align: left; color: var(--text-3); }
.cf-mx thead .it { display: inline-grid; justify-items: end; gap: 4px; text-align: right; }
.cf-mx thead .it-ic { width: 32px; }
.cf-mx thead .it-n { max-width: 8.5em; white-space: normal; font-size: 0.72rem; line-height: 1.25; }
.cf-mx tbody th { color: var(--gold); font-weight: 700; text-align: left; white-space: nowrap; }
.cf-mx tbody tr:nth-child(-n+3) th { color: #fff; }
.cf-mx td { color: var(--text); font-weight: 600; white-space: nowrap; }
.cf-mx .cf-mini { display: none; }
.cf-mx td.is-empty { color: var(--text-3); }
.cf-mx td.is-feat { background: rgba(255, 213, 83, 0.1); box-shadow: 0 0 0 1px rgba(255, 213, 83, 0.55) inset; }
.cf-mx .cf-mx-title { text-align: left; }
.cf-mx thead .cf-mx-title { vertical-align: bottom; }
.cf-mini { width: 22px; height: 22px; object-fit: contain; flex: none; }
.cf-mx td.is-empty { font-weight: 400; }
@container (max-width: 600px) {
    .cf-mx, .cf-mx thead, .cf-mx tbody, .cf-mx tr, .cf-mx th, .cf-mx td { display: block; }
    .cf-mx thead tr { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .cf-mx thead th { padding: 0; border: 0; }
    .cf-mx thead th:first-child, .cf-mx thead th.cf-mx-title { display: none; }
    .cf-mx thead .it { display: inline-flex; justify-items: start; gap: 6px; text-align: left; }
    .cf-mx thead .it-ic { width: 24px; }
    .cf-mx thead .it-n { max-width: none; }
    .cf-mx tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .cf-mx tbody th { flex: 1 0 100%; padding: 0; border: 0; }
    .cf-mx td { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; }
    .cf-mx td.is-feat { padding: 1px 5px; border-radius: 6px; }
    .cf-mx .cf-mini { display: inline-block; }
    .cf-mx td.is-empty { display: none; }
}
.cf-titles { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cf-titles li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); }
.cf-title-n { font-weight: 600; font-size: 0.88rem; overflow-wrap: anywhere; }
.cf-title-r { margin-left: auto; color: var(--text-3); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* ── Missions, packs, stickers, festival list ───────────────────── */
.cf-mlink { color: var(--text); text-decoration: none; }
.cf-mlink:hover { color: var(--acc2); text-decoration: underline; }
.cf-packs .ev-items { gap: 4px 12px; }
.cf-pack-n { display: block; color: var(--text-2); font-size: 0.78rem; line-height: 1.4; overflow-wrap: anywhere; }
.cf-packs .it-chip .it-ic { width: 32px; }
/* a ticket recruit has no banner: its ticket, on the gacha pages' green ticket backdrop */
.cf-gtk {
    display: grid;
    place-items: center;
    width: 112px;
    aspect-ratio: 284 / 124;
    border-radius: 6px;
    background: radial-gradient(ellipse at 50% 60%, rgba(87, 221, 92, 0.22), transparent 65%), var(--navy-mid);
}
.ev-gacha .cf-gtk img { width: 42px; height: 42px; aspect-ratio: auto; object-fit: contain; border-radius: 0; background: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)); }
.cf-news { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cf-news li { display: grid; gap: 2px; padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); min-width: 0; }
.cf-news a { color: var(--text); font-size: 0.82rem; font-weight: 600; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.cf-news a:hover { color: var(--acc2); text-decoration: underline; }
.cf-news a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cf-news time { color: var(--text-3); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.cf-stickers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cf-stickers li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); }
.cf-stickers img { width: 96px; height: auto; aspect-ratio: 120 / 70; object-fit: contain; }
.cf-stickers span { display: grid; gap: 2px; font-size: 0.84rem; font-weight: 600; overflow-wrap: anywhere; }
.cf-stickers small { color: var(--text-2); font-weight: 500; font-size: 0.78rem; }
.cf-all a, .cf-all span.is-current { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; }
.cf-all-n { font-weight: 600; overflow-wrap: anywhere; }
.cf-all-f { display: inline-flex; gap: 2px; justify-self: end; }
.cf-all-f img { width: 18px; height: 18px; }
.cf-all time { grid-column: 1 / -1; font-size: 0.74rem; }