/* Same face myheroui.css declares, plus font-display: swap so headings show
   in the fallback font while the 1.8 MB OTF loads instead of staying blank. */
@font-face { font-family: F0T; src: url('/fonts/FOT-ComicReggaeStd-B.otf'); font-display: swap; }

/* ═══════════════════════════════════════════════════════════════
   CHARACTER DETAIL (character.php)
   Navy "archive" palette shared with index.php; each card tints the
   page with its attribute colour via --acc / --acc2 (set on <body>).
   Everything is scoped under .cd-* so header.php / footer.html keep
   their own styles.
   ═══════════════════════════════════════════════════════════════ */

.cd-body {
    --navy: #0a1628;
    --navy-mid: #111f38;
    --navy-light: #1a2d4d;
    --panel-bg: rgba(15, 25, 50, 0.88);
    --panel-border: rgba(100, 140, 220, 0.16);
    --text: #eaf0ff;
    --text-2: #9fb2d3;
    --text-3: #7d8fab;
    --gold: #ffd553;
    --up: #79ff80;
    --down: #ff6f6f;
    --enh: #ffa552;
    --dx: #ff9d2d;
    --radius: 12px;
    --font-display: 'F0T', 'Outfit', sans-serif;   /* the game's comic font, as used site-wide */
    --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

    background-color: var(--navy);
    background-image:
        radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--acc) 22%, transparent) 0%, transparent 45%),
        radial-gradient(circle at 85% 60%, rgba(74, 144, 217, 0.07) 0%, transparent 50%),
        radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: auto, auto, 18px 18px;
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-body);
}
.cd-body.cd-jp {
    --font-body: 'Outfit', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', 'Noto Sans JP', sans-serif;
}

.cd {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4px 16px 56px;
    font-family: var(--font-body);
    line-height: 1.55;
}
.cd a { color: inherit; }
.cd img { max-width: 100%; }
.cd [hidden] { display: none !important; }

/* ── Buttons, chips, pills ─────────────────────────────────────── */
.cd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(10, 22, 40, 0.72);
    color: var(--text) !important;
    font: 600 0.9rem/1.2 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.cd-btn:hover { background: var(--acc); border-color: var(--acc2); color: var(--acc-ink) !important; transform: translateY(-1px); }
.cd-btn:focus-visible, .cd-tab:focus-visible, .cd-thumb:focus-visible, .cd-top:focus-visible, .cd-switch input:focus-visible + .cd-switch-ui {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.cd-btn-pu { border-color: rgba(255, 213, 83, 0.55); }
.cd-btn-acc { background: var(--acc); border-color: var(--acc2); color: var(--acc-ink) !important; }
.tb .cd-btn:disabled, .tb .cd-tab:disabled { opacity: 0.55; pointer-events: none; }   /* until the team data has loaded */

.cd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.cd-chip {
    padding: 2px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.cd-pill {
    display: inline-block;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-2);
}

/* ── Hero ──────────────────────────────────────────────────────── */
.cd-hero {
    position: relative;
    margin: 6px 0 22px;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid var(--acc);
    background: var(--navy-mid);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.cd-hero-art {
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--acc) 45%, var(--navy-mid)), var(--navy-mid) 70%);
}
.cd-cutin {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}
.cd-cutin-alt { animation: cd-fade 7s ease-in-out infinite alternate; opacity: 0; }
@keyframes cd-fade {
    0%, 35% { opacity: 0; }
    65%, 100% { opacity: 1; }
}
.cd-hero-badges { position: absolute; inset: 0; z-index: 2; pointer-events: none; }   /* above the text overlay */
.cd-badge-rarity { position: absolute; top: 4%; left: 2%; width: clamp(36px, 8%, 66px); height: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
/* N / R badges are square art (SR / UR are wide): 60% width keeps the heights matched. */
.cd-r-n .cd-badge-rarity, .cd-r-r .cd-badge-rarity { width: clamp(22px, 4.8%, 40px); }
.cd-badge-attr { position: absolute; top: 4%; right: 2%; width: clamp(25px, 4.8%, 42px); height: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }

.cd-hero-info {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px 16px;
    background: linear-gradient(180deg, var(--navy-mid), var(--navy));
}
.cd-hero-title {
    margin: 0;
    color: var(--gold);
    font: 600 clamp(0.85rem, 2.4vw, 1.05rem)/1.3 var(--font-body);
    letter-spacing: 0.3px;
}
.cd-hero-name {
    margin: 2px 0 0;
    font: 400 clamp(1.6rem, 5vw, 2.6rem)/1.15 var(--font-display);
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 3px 0 var(--acc), 0 6px 18px rgba(0, 0, 0, 0.5);
    overflow-wrap: anywhere;
}
.cd-jp .cd-hero-name { letter-spacing: 0; }
.cd-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (min-width: 480px) {
    .cd-hero-art { aspect-ratio: 5 / 2; }
}
/* Wide screens: the name sits over the art. Art and text share one grid cell,
   so the banner grows with long names instead of clipping them; the top
   padding keeps the text clear of the rarity badge. */
@media (min-width: 760px) {
    .cd-hero { display: grid; }
    /* explicit stretch: aspect-ratio items default to start; explicit width: stops the
       min-height the overlay forces from transferring through aspect-ratio into the width */
    .cd-hero-art { grid-area: 1 / 1; align-self: stretch; width: 100%; aspect-ratio: 4 / 1; }
    .cd-cutin { object-position: 50% 50%; }
    .cd-hero-info {
        grid-area: 1 / 1;
        align-self: end;
        z-index: 1;
        padding: 84px 22px 18px;
        background: none;
    }
    /* Scrim only behind the name (bottom-left), fading out before the middle so the art stays clear;
       the buttons carry their own backdrop. */
    .cd-hero-info::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(10, 22, 40, 0.8), rgba(10, 22, 40, 0.5) 26%, rgba(10, 22, 40, 0.12) 46%, transparent 60%);
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
        mask-image: linear-gradient(180deg, transparent, #000 60%);
    }
    .cd-hero-title { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); }
    .cd-hero-text { max-width: 62%; }
}

/* ── Layout + panels ───────────────────────────────────────────── */
.cd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cd-main, .cd-side { display: grid; gap: 20px; align-content: start; min-width: 0; }
@media (min-width: 992px) {
    .cd-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

.cd-panel {
    position: relative;
    padding: 18px 16px 16px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    background: var(--panel-bg);
    overflow: hidden;
}
.cd-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--acc2), var(--gold) 60%, transparent);
    opacity: 0.85;
}
@media (min-width: 576px) { .cd-panel { padding: 22px 22px 20px; } }

.cd-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 16px;
}
.cd-h2 {
    position: relative;
    margin: 0;
    font: 400 clamp(1.3rem, 3.4vw, 1.6rem)/1.2 var(--font-display);
    letter-spacing: 0.5px;
    color: var(--text);
}
.cd-jp .cd-h2 { letter-spacing: 0; }
.cd-h2::after {
    content: '';
    position: absolute;
    left: 0; bottom: -5px;
    width: 100%; height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--acc2), transparent);
}
.cd-sub-h {
    margin: 16px 0 8px;
    color: var(--text-2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.cd-note { margin: 12px 0 0; color: var(--text-3); font-size: 0.82rem; }
.cd-note-top { margin: -4px 0 14px; }

.cd-missing { max-width: 640px; margin: 40px auto; text-align: center; }
.cd-missing .cd-h2 { display: inline-block; margin-bottom: 18px; }

/* ── Stats ─────────────────────────────────────────────────────── */
.cd-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}
.cd-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cd-switch-ui {
    position: relative;
    flex: none;
    width: 40px; height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    transition: background 0.2s;
}
.cd-switch-ui::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
}
.cd-switch input:checked + .cd-switch-ui { background: var(--acc2); }
.cd-switch input:checked + .cd-switch-ui::after { transform: translateX(18px); }

.cd-cps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1100px) { .cd-cps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 991px) { .cd-cps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cd-cp {
    padding: 12px 12px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}
.cd-cp-adv {
    border-color: color-mix(in srgb, var(--acc2) 60%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 30%, transparent), rgba(255, 255, 255, 0.03) 60%);
}
.cd-cp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.cd-cp-name { margin: 0; font: 400 1.1rem/1.1 var(--font-display); color: #fff; }
.cd-cp-lv { font-size: 0.75rem; font-weight: 700; color: var(--gold); white-space: nowrap; }
.cd-cp-sub { margin: 4px 0 8px; min-height: 2.4em; font-size: 0.72rem; line-height: 1.2; color: var(--text-3); }

.cd-stats { margin: 0; }
.cd-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cd-stat dt { font-size: 0.78rem; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.cd-stat dd {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #ffe980;
    transition: color 0.25s;
}
.cd-stat dd[data-trust].is-trust, .cd-table span.is-trust { color: var(--up); }
.cd-stat-bp dt { color: var(--gold); }
.cd-stat-bp dd { color: #fff; }
/* Very narrow phones: let labels wrap so 6-digit values stay inside the cards. */
@media (max-width: 379px) {
    .cd-cps { gap: 8px; }
    .cd-cp { padding: 10px 8px 8px; }
    .cd-stat { flex-wrap: wrap; column-gap: 4px; }
    .cd-stat dt { white-space: normal; }
    .cd-stat dd { margin-left: auto; font-size: 0.92rem; }
}

.cd-build { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 10px; }
.cd-build summary, .cd-mats-wrap summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-2);
    list-style: revert;
}
.cd-build summary:hover, .cd-mats-wrap summary:hover { color: var(--text); }
.cd-table-wrap { overflow-x: auto; margin-top: 10px; }
.cd-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.cd-table th, .cd-table td { padding: 6px 8px; font-size: inherit; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.cd-table th[scope="row"] { text-align: left; font-weight: 500; color: var(--text-2); }
.cd-table thead th { color: var(--text-3); font-weight: 600; font-size: 0.78rem; }
.cd-table tfoot th, .cd-table tfoot td { font-weight: 700; color: #ffe980; border-bottom: 0; }
.cd-trust-row { opacity: 0.4; transition: opacity 0.25s; }
.cd-trust-row.is-on { opacity: 1; }
.cd-trust-row td { color: var(--up); }

/* ── Tabs ──────────────────────────────────────────────────────── */
.cd-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); }
.cd-tab {
    padding: 5px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    font: 600 0.82rem/1.2 var(--font-body);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.cd-tab:hover { color: #fff; }
.cd-tab.is-active { background: var(--acc); color: var(--acc-ink); box-shadow: 0 2px 10px color-mix(in srgb, var(--acc) 60%, transparent); }

/* ── Skills ────────────────────────────────────────────────────── */
.cd-skills { display: grid; gap: 12px; }
.cd-skill {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}
@media (min-width: 576px) { .cd-skill { grid-template-columns: 68px minmax(0, 1fr); } }
.cd-skill-pu { background: linear-gradient(135deg, rgba(255, 213, 83, 0.09), rgba(255, 255, 255, 0.02) 55%); border-color: rgba(255, 213, 83, 0.22); }

.cd-skill-icon {
    --ring: #8ea4c8;
    position: relative;
    align-self: start;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ring) 35%, transparent), rgba(0, 0, 0, 0.35) 70%);
    box-shadow: 0 0 0 2px var(--ring), 0 0 14px color-mix(in srgb, var(--ring) 45%, transparent);
}
.cd-skill-icon img { width: 82%; height: auto; }
.cd-frame-atk   { --ring: #ff466a; }
.cd-frame-debuf { --ring: #d146ff; }
.cd-frame-buf   { --ring: #ffd200; }
.cd-frame-heal  { --ring: #00ff0c; }
.cd-frame-pu    { --ring: #ffd553; }
.cd-frame-auto  { --ring: #4a90d9; }

.cd-skill-kind { margin: 0 0 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); }
.cd-skill-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; font: 700 1.12rem/1.25 var(--font-body); color: #fff; overflow-wrap: anywhere; }
.cd-skill-name > span:first-child { min-width: 0; }
.cd-dx {
    padding: 0 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ffb347, #ff7a1a);
    color: #2a1200;
    font: 400 0.8rem/1.5 var(--font-display);
}
.cd-lv { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 0.72rem; font-weight: 700; color: var(--gold); }
.cd-skill-cd { margin: 0 0 6px; font-size: 0.82rem; color: var(--text-2); }
.cd-skill-cd strong { color: #ffb347; }
.cd-skill-desc { font-size: 0.92rem; color: #d6def0; overflow-wrap: anywhere; }
.cd-skill-lock { margin: 8px 0 0; font-size: 0.78rem; color: var(--text-3); }
.cd-skill-lock::before { content: '🔒 '; }

.tx-up { color: var(--up); font-weight: 600; }
.tx-down { color: var(--down); font-weight: 600; }
.tx-enh { display: inline-block; margin-top: 4px; color: var(--enh); font-weight: 700; }
.tx-dx { color: var(--dx); font-weight: 700; }

.cd-enhance { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 165, 82, 0.08); border: 1px solid rgba(255, 165, 82, 0.22); }
.cd-enhance-h { margin: 0 0 4px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.5px; color: var(--enh); }
.cd-enhance ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.cd-enh-atk strong { color: #ff5757; }
.cd-enh-spd strong { color: #57aeff; }
.cd-enh-hp strong { color: #57ff68; }

/* ── Unique EX ─────────────────────────────────────────────────── */
.cd-ex { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: ex; }
.cd-ex-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.cd-ex-ic { width: 36px; height: 36px; }
.cd-ex-text { font-size: 0.9rem; color: #d6def0; overflow-wrap: anywhere; }
.cd-ex-bp { font-size: 0.75rem; font-weight: 700; color: var(--gold); white-space: nowrap; }
@media (max-width: 479px) {
    .cd-ex-item { grid-template-columns: 32px minmax(0, 1fr); }
    .cd-ex-bp { grid-column: 2; }
}

/* ── Ability board ─────────────────────────────────────────────── */
.cd-routes { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .cd-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cd-route {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.cd-route-3 { border-color: rgba(255, 157, 45, 0.35); background: linear-gradient(160deg, rgba(255, 157, 45, 0.1), rgba(255, 255, 255, 0.02) 60%); }
.cd-route-h { margin: 0; font: 400 1.1rem/1.2 var(--font-display); color: #fff; }
.cd-route-desc { margin: 0; font-size: 0.8rem; color: var(--text-2); }
.cd-route-size { margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--text-3); }
.cd-route-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.cd-route-stats div { padding: 6px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); text-align: center; }
.cd-route-stats dt { font-size: 0.68rem; font-weight: 600; color: var(--text-3); }
.cd-route-stats dd { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--up); font-variant-numeric: tabular-nums; }
.cd-route-unlocks { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cd-route-unlocks li { padding: 2px 8px; border-radius: 6px; background: rgba(255, 213, 83, 0.12); color: var(--gold); font-size: 0.74rem; font-weight: 600; }
.cd-route-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: auto 0 0; padding: 8px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cd-route-cost li { display: inline-flex; align-items: center; gap: 4px; }
.cd-cost-ic { width: 26px; height: auto; flex: none; }
.cd-cost-label { color: var(--text-3); font-weight: 500; }

.cd-mats-wrap { margin-top: 14px; }
.cd-count { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 0.72rem; }
.cd-mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.cd-mat {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 8px 4px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    text-align: center;
    min-width: 0;
}
.cd-item-ic { width: 42px; height: auto; }
.cd-mat-n { font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffe980; }
.cd-mat-name { width: 100%; font-size: 0.64rem; line-height: 1.2; color: var(--text-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cd-mat-split { font-size: 0.6rem; line-height: 1.2; color: var(--text-2); }
.cd-orbs { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.82rem; }
.cd-orbs li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cd-orbs small { color: var(--text-3); }

/* ── Sidebar: profile / resists / trust / versions ─────────────── */
.cd-facts { margin: 0; }
.cd-facts > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.cd-facts > div:first-child { border-top: 0; }
.cd-facts dt { font-size: 0.8rem; font-weight: 600; color: var(--text-3); }
.cd-facts dd { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.cd-src { display: block; font-size: 0.75rem; color: var(--text-3); }

.cd-traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cd-traits li {
    padding: 3px 10px;
    border-radius: 6px;
    background: linear-gradient(135deg, #f2f4f8, #c9cfdb);
    color: #1a1b1f;
    font-size: 0.8rem;
    font-weight: 700;
}
.cd-flavor { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--acc2); border-radius: 0 8px 8px 0; background: rgba(0, 0, 0, 0.2); font-size: 0.86rem; color: var(--text-2); }

.cd-resists { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cd-resists li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 0.9rem; }
.cd-resists img { width: 28px; height: 28px; }
.cd-resists strong { color: var(--up); font-variant-numeric: tabular-nums; }
.cd-resists .cd-immune { color: var(--gold); }

.cd-trust-bonus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.cd-trust-bonus li { display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); font-size: 0.82rem; }
.cd-trust-bonus span { color: var(--text-2); }
.cd-trust-bonus strong { color: var(--up); }
.cd-trust-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 0.86rem; }
.cd-gifts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.84rem; }
.cd-gifts li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.cd-gifts small { color: var(--gold); font-weight: 700; white-space: nowrap; }

.cd-versions { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cd-thumb {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: 6px;
    transition: transform 0.2s;
}
.cd-thumb:hover { transform: scale(1.06); }
.cd-thumb.is-current { outline: 2px solid var(--gold); outline-offset: 2px; }
.cd-thumb img { position: absolute; display: block; }
.cd-thumb-bg, .cd-thumb-icon, .cd-thumb-frame { inset: 0; width: 100%; height: 100%; }
.cd-thumb-attr { left: 5.3%; top: 71.6%; width: 23%; height: 23%; }
.cd-thumb-rarity { left: 4.2%; top: 4.2%; width: 31.6%; height: auto; }
.cd-thumb-rarity.cd-ra-r, .cd-thumb-rarity.cd-ra-n { width: 18%; }

/* ── Art dialog ────────────────────────────────────────────────── */
.cd-art {
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 12px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: var(--navy-mid);
    color: var(--text);
}
.cd-art:not([open]) { display: none; }   /* browsers without <dialog> would otherwise show it inline */
.cd-art::backdrop { background: rgba(4, 10, 20, 0.82); backdrop-filter: blur(4px); }
.cd-art-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cd-art-img { display: block; }
.cd-art-img img { display: block; width: 100%; height: auto; max-height: calc(100vh - 120px); object-fit: contain; border-radius: 8px; }

/* ── Back-to-top ───────────────────────────────────────────────── */
.cd-top {
    position: fixed;
    right: 16px; bottom: 16px;
    z-index: 50;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: var(--acc);
    color: var(--acc-ink);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.cd-top:hover { filter: brightness(1.15); }

@media (prefers-reduced-motion: reduce) {
    .cd-cutin-alt { animation: none; }
    .cd-thumb, .cd-btn, .cd-stat dd, .md-related a { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MEMORY DETAIL (memory.php) — reuses the .cd-* components above;
   accent colours come from the memory's rarity.
   ═══════════════════════════════════════════════════════════════ */

/* Hero: the full 1240×700 artwork, never cropped. Wider than its height
   cap it is letterboxed over a blurred copy of itself. The name sits
   below the art at every width so the illustration stays unobstructed. */
.md-hero-art {
    position: relative;
    overflow: hidden;
    width: 100%;              /* explicit: otherwise max-height transfers through aspect-ratio into a max-width */
    aspect-ratio: 1240 / 700;
    max-height: 560px;
    background: var(--navy-mid);
}
.md-art-bg {
    position: absolute;
    inset: -24px;
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    max-width: none !important;
    object-fit: cover;
    filter: blur(20px) brightness(0.5) saturate(1.2);
}
.md-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 760px) {
    .md-hero { display: block; }
    .md-hero .cd-hero-info {
        position: relative;
        grid-area: auto;
        padding: 16px 22px 18px;
        background: linear-gradient(180deg, var(--navy-mid), var(--navy));
    }
    .md-hero .cd-hero-info::before { content: none; }   /* info sits below the art here: no scrim */
    .md-hero .cd-hero-text { max-width: none; flex: 1 1 320px; }
}

/* Stats: three checkpoint cards */
.md-cps { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* later in the file than .cd-cps' media rules, so it wins */
@media (max-width: 519px) { .md-cps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-cps .cd-cp-lv1 { grid-column: 1 / -1; } }
.md-lb-table td:nth-child(7) { white-space: nowrap; }
.md-lb-table .cd-dx { font-size: 0.7rem; }
.md-lb-max th, .md-lb-max td { color: #ffe980; }

/* Skill */
.md-tab small { opacity: 0.75; font-size: 0.7rem; font-weight: 500; }
.md-tab.is-active small { opacity: 1; }                      /* keep AA contrast on the accent pill */
.md-cps .cd-cp-adv .cd-cp-sub { color: var(--text-2); }      /* readable on the rarity-tinted MLB card */
.md-lb-pill { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 35%, transparent); font-size: 0.72rem; font-weight: 600; color: var(--text); }
.md-conds { margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07); }
.md-conds .cd-enhance-h { color: var(--text-2); }
.md-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 4px 0 0; font-size: 0.82rem; }
.md-cond-k { margin-right: 2px; font-weight: 600; color: var(--text-3); }
.md-chip { padding: 1px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); font-weight: 600; }

/* Event bonuses */
.md-bonus { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.md-bonus li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.md-bonus-ev { grid-column: 1 / -1; font-weight: 600; overflow-wrap: anywhere; }
a.md-bonus-ev { color: var(--text); text-decoration: none; }
a.md-bonus-ev:hover { color: var(--acc2); text-decoration: underline; }
.md-bonus-from { margin-left: 4px; color: var(--enh); font-weight: 600; white-space: nowrap; }
a.cd-src { color: var(--text-3); text-decoration: underline dotted; text-underline-offset: 2px; }
a.cd-src:hover { color: var(--acc2); }
.md-bonus-k { font-size: 0.84rem; color: var(--text-2); }
.md-bonus strong { font-size: 0.84rem; color: var(--up); text-align: right; }
@media (max-width: 479px) { .md-bonus li { grid-template-columns: minmax(0, 1fr); } .md-bonus strong { text-align: left; } }

/* Framed, masked memory thumbnail (icon under the rarity frame) */
.md-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.md-thumb img { position: absolute; display: block; }
.md-thumb-icon {
    inset: 2.5%;
    width: 95%;
    height: 95%;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.md-thumb-frame { inset: 0; width: 100%; height: 100%; }
.md-thumb-rarity { left: 4%; top: 4%; width: 30%; height: auto; }
.md-thumb-rarity.cd-ra-r, .md-thumb-rarity.cd-ra-n { width: 18%; }
.md-profile-thumb { width: 150px; margin: 0 auto 14px; }

.md-sell { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.md-sell span { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.md-obtain { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 0.86rem; }
.md-obtain li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); }
.md-obtain small { color: var(--gold); font-weight: 700; white-space: nowrap; }

.md-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.md-related a { display: grid; gap: 4px; text-decoration: none; transition: transform 0.2s; }
.md-related a:hover { transform: translateY(-2px); }
.md-related a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.md-related-name { font-size: 0.7rem; line-height: 1.2; text-align: center; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ═══════════════════════════════════════════════════════════════
   TEAM BUILDER (teambuilder.php + js/teambuilder.js)
   ═══════════════════════════════════════════════════════════════ */
.tb { display: grid; gap: 20px; }
.tb button { font: inherit; }
.tb-head-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.tb-sub { margin: 8px 0 0; font-size: 0.82rem; color: var(--text-3); }
.tb-total { display: grid; justify-items: end; }
.tb-total-k { font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-2); }
.tb-total-v { display: inline-block; transform-origin: right center; font: 400 clamp(1.9rem, 6vw, 2.6rem)/1 var(--font-display); color: var(--gold); font-variant-numeric: tabular-nums; }
.tb-builds { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.tb-build { display: grid; gap: 4px; }
.tb-build-k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; color: var(--text-3); }
.tb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* Team: Regulars (3) and Subs (2) — same tile width everywhere */
.tb-slots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .tb-slots { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.tb-group { min-width: 0; }   /* grid items default to min-content width, which would push the slots off-screen */
.tb-group-k { margin: 0 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-2); }
.tb-group-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 760px) { .tb-group-sub .tb-group-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tb-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* an implicit auto track would grow to the nowrap pill's width */
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
}
.tb-slot.is-sub { background: rgba(74, 144, 217, 0.06); }
.tb-slot { container-type: inline-size; }
.tb-pill-num { display: none; }
@container (max-width: 96px) {   /* narrow tiles: the group heading already says Regular / Sub */
    .tb-pill-full { display: none; }
    .tb-pill-num { display: inline; }
}
.tb-slot.is-current { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.tb-slot.is-locked .tb-slot-head, .tb-slot.is-locked .tb-slot-art { opacity: 0.55; }
.tb-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 22px; }
.tb-slot-head .cd-pill { min-width: 0; font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-x {   /* sits on the art's top-right corner so the slot pill keeps the full width */
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 2;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(10, 22, 40, 0.92);
    color: var(--text-2);
    line-height: 1;
    cursor: pointer;
}
.tb-x:hover { background: var(--down); color: #fff; }
.tb-slot-art { position: relative; aspect-ratio: 190 / 240; }
.tb-slot-card, .tb-slot-mem, .tb-rec-btn, .tb-cell { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.tb-slot-card { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; }
/* Motion (js/teambuilder.js, anime.js): pointer tilt + glare on desktop, and the shine a new card gets */
.tb-slot-card {
    transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tb-slot-card.is-tilt { transition-duration: 0.08s; }
.tb-slot-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 8px;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.3), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.tb-slot-card.is-tilt::after { opacity: 1; }
.tb-shine {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 8px;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%) no-repeat 100% 0 / 250% 100%;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .tb-slot-card { transform: none; transition: none; }
}
.tb-slot-mem { position: absolute; right: -4%; bottom: -4%; width: 46%; aspect-ratio: 1; border-radius: 6px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
.tb-slot-card[aria-disabled="true"], .tb-slot-mem[aria-disabled="true"] { cursor: not-allowed; }
.tb-slot-card:focus-visible, .tb-slot-mem:focus-visible, .tb-cell:focus-visible, .tb-rec-btn:focus-visible, .tb-x:focus-visible, .tb-fchip:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.tb-plus {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 2px dashed rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: var(--text-3);
    font-size: 1.8rem;
    line-height: 1;
}
.tb-plus-sm { font-size: 1.1rem; background: var(--navy-mid); }
.tb-thumb { width: 100%; }
/* Large card: 190×240 bg + frame (chara_bg/frame_20r) with the icon_l art drawn to the same box;
   rarity top-left and attribute bottom-left, sized off the card width like the square thumb */
.tb-lcard { position: relative; display: block; aspect-ratio: 190 / 240; }
.tb-lcard img { position: absolute; display: block; }
.tb-lcard-bg, .tb-lcard-icon, .tb-lcard-frame { inset: 0; width: 100%; height: 100%; }
.tb-lcard-rarity { left: 4.2%; top: 3.3%; width: 31.6%; height: auto; }
.tb-lcard-rarity.cd-ra-r, .tb-lcard-rarity.cd-ra-n { width: 18%; }
.tb-lcard-attr { left: 5.3%; bottom: 4.3%; width: 23%; height: auto; }
.tb-slot-info { display: grid; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tb-slot-info:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.tb-slot-name { margin: 2px 0 0; font-size: 0.72rem; line-height: 1.2; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.tb-slot-bp { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 4px; margin: 0; font-size: 0.72rem; color: var(--gold); }
.tb-slot-bp strong { margin-left: auto; color: #fff; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.tb-slot-split { display: block; margin: 0; font-size: 0.66rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tb-slot-warn, .tb-slot-hint { display: block; margin: 0; font-size: 0.66rem; line-height: 1.25; color: var(--enh); }
.tb-slot-hint { color: var(--text-2); }

/* Optimizer */
.tb-opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px 28px; }
.tb-opt-field { min-width: 0; }
.tb-opt-k { display: block; margin-bottom: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); }
.tb-opt-seg { flex-wrap: wrap; }
.tb-opt-hint { margin: 6px 0 0; font-size: 0.76rem; line-height: 1.4; color: var(--text-3); }
.tb-opt-range { display: flex; align-items: center; gap: 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); }
.tb-opt-range input { flex: 1; min-width: 0; height: 6px; margin: 0; border-radius: 999px; appearance: none; -webkit-appearance: none;
    background: linear-gradient(90deg, var(--acc) var(--fill, 30%), rgba(255, 255, 255, 0.12) var(--fill, 30%)); cursor: pointer; }
.tb-opt-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%;
    background: var(--acc2); box-shadow: 0 0 0 4px rgba(127, 180, 236, 0.25), 0 0 12px var(--acc); }
.tb-opt-range input::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: var(--acc2); box-shadow: 0 0 12px var(--acc); }
.tb-opt-range input:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.tb-opt-val { margin: 8px 0 0; text-align: center; font-size: 0.84rem; font-weight: 700; letter-spacing: 1px; color: var(--gold); font-variant-numeric: tabular-nums; }
.tb-opt-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 0.82rem; color: var(--text-2); cursor: pointer; }
.tb-opt-check input { width: 16px; height: 16px; accent-color: var(--acc); }
.tb-opt-actions { display: grid; gap: 8px; margin-top: 20px; }
.tb-opt-run {
    width: 100%;
    padding: 12px 16px;
    border-color: var(--acc2);
    background: linear-gradient(180deg, var(--acc2), var(--acc));
    color: var(--acc-ink) !important;
    font: 400 1.25rem/1 var(--font-display);
    letter-spacing: 3px;
    box-shadow: 0 6px 22px rgba(74, 144, 217, 0.35);
}
.tb-opt-run.is-busy { background: rgba(255, 255, 255, 0.08); border-color: var(--panel-border); color: var(--text) !important; box-shadow: none; }
.tb-opt-inspect { width: 100%; letter-spacing: 2px; }
.tb-opt-run, .tb-opt-inspect { justify-content: center; }   /* .cd-btn is inline-flex: centre the label */
.tb-opt-progress { display: grid; gap: 6px; margin-top: 12px; }
.tb-opt-progress[hidden] { display: none; }
.tb-opt-bar { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.tb-opt-bar > span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--acc), var(--acc2), #fff); box-shadow: 0 0 10px var(--acc); }
.tb-opt-ptext { font-size: 0.76rem; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.tb-opt-results { display: grid; gap: 10px; margin-top: 14px; }
.tb-opt-results:empty { display: none; }
.tb-res { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--panel-border); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.tb-res.is-best { border-color: var(--acc2); background: linear-gradient(180deg, rgba(74, 144, 217, 0.16), rgba(74, 144, 217, 0.04)); box-shadow: 0 0 0 1px rgba(127, 180, 236, 0.25) inset; }
.tb-res-head, .tb-res-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.tb-res-k { font: 400 1.05rem/1.2 var(--font-display); color: #fff; letter-spacing: 1px; }
.tb-res-score { font-size: 0.8rem; color: var(--text-3); }
.tb-res-score b { font-size: 1.15rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.tb-res-score small { margin-left: 4px; font-weight: 700; }
.tb-res-score .is-up { color: #6fdc8c; }
.tb-res-score .is-down { color: var(--down); }
.tb-res-team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tb-res-u { position: relative; min-width: 0; }
.tb-res-u.is-sub { opacity: 0.8; }
.tb-res-u .cd-thumb { width: 100%; }
.tb-res-role { position: absolute; top: -6px; left: -4px; z-index: 2; padding: 0 5px; border-radius: 999px; background: rgba(10, 22, 40, 0.92); font-size: 0.6rem; font-weight: 700; color: var(--text-2); }
.tb-res-mem { position: absolute; right: -4px; bottom: -4px; width: 46%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.tb-res-mem .md-thumb { width: 100%; }
.tb-res-bp { font-size: 0.8rem; color: var(--text-3); }
.tb-res-bp b { color: var(--text); font-variant-numeric: tabular-nums; }
.tb-res-foot .cd-btn { padding: 6px 14px; font-size: 0.82rem; }
.tb-res-foot .tb-res-bp { margin-right: auto; }

/* Inspect (team analysis) */
.tb-inspect { width: min(1080px, calc(100vw - 32px)); }
.tb-inspect[open] { display: flex; flex-direction: column; }
.tb-insp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.tb-insp-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; font-size: 0.82rem; color: var(--text-3); }
.tb-insp-sum b { color: var(--gold); font-variant-numeric: tabular-nums; }
.tb-insp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.tb-insp-unit { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 10px; border: 1px solid var(--panel-border); border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.tb-insp-unit.is-sub { background: rgba(74, 144, 217, 0.05); }
.tb-insp-unit.is-enemy { border-color: rgba(232, 90, 90, 0.35); background: rgba(232, 90, 90, 0.05); }
.tb-insp-uhead { display: grid; grid-template-columns: 52px 40px minmax(0, 1fr); align-items: center; gap: 8px; }
.tb-insp-unit.is-enemy .tb-insp-uhead { grid-template-columns: minmax(0, 1fr); }
.tb-insp-uhead .cd-thumb, .tb-insp-uhead .md-thumb { width: 100%; }
.tb-insp-nomem { display: block; aspect-ratio: 1; border: 1px dashed rgba(255, 255, 255, 0.16); border-radius: 6px; }   /* keeps the grid column */
.tb-insp-name { margin: 2px 0 0; font-size: 0.82rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.tb-insp-rate { margin: 2px 0 0; font-size: 0.74rem; color: var(--text-3); }
.tb-insp-rate b { color: var(--gold); }
.tb-insp-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
@media (max-width: 420px) { .tb-insp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tb-insp-stat { display: grid; gap: 1px; padding: 4px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); text-align: center; min-width: 0; }
.tb-insp-stat span { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px; color: var(--text-3); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-insp-stat b { font-size: 0.8rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tb-insp-stat b.is-up { color: #6fdc8c; }
.tb-insp-stat b.is-down { color: var(--down); }
.tb-insp-stat small { font-size: 0.6rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tb-fx { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.tb-fx li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 3px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.74rem; }
.tb-fx-name { font-weight: 600; color: var(--text); }
.tb-fx-w { grid-column: 2; grid-row: 1 / 3; align-self: center; font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; }
.tb-fx-src { color: var(--text-3); overflow-wrap: anywhere; }
.tb-fx-more { margin-top: 2px; }
.tb-fx-more > summary { padding: 4px 0; font-size: 0.74rem; font-weight: 600; color: var(--acc2); cursor: pointer; }

/* Selected unit */
.tb-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-detail-actions .cd-btn { padding: 6px 12px; font-size: 0.82rem; }
.tb-pair { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.tb-pair-item { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; text-decoration: none; font-weight: 600; }
.tb-pair-item .tb-thumb { width: 64px; flex: none; }
.tb-pair-item span:last-child { overflow-wrap: anywhere; }
.tb-pair-item:hover span:last-child { text-decoration: underline; }
.tb-stat-table small { color: var(--text-3); font-weight: 500; }
.tb-mem-skill { margin-top: 14px; padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); }
.tb-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
.tb-chip { padding: 1px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; background: rgba(255, 255, 255, 0.08); overflow-wrap: anywhere; }
.tb-chip.is-met { background: rgba(121, 255, 128, 0.12); color: var(--up); }
.tb-chip.is-unmet { background: rgba(255, 111, 111, 0.12); color: var(--down); }
.tb-chip.is-sig { background: rgba(255, 213, 83, 0.16); color: var(--gold); }

/* Recommended memories */
.tb-rec-for { margin: -6px 0 10px; font-size: 0.82rem; font-weight: 600; color: var(--text-2); overflow-wrap: anywhere; }
.tb-rec-list { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.tb-rec-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); }
.tb-rec-row.is-on { border-color: var(--gold); }
.tb-rec-btn { align-self: start; width: 52px; }
.tb-rec-body { display: grid; gap: 2px; min-width: 0; }
.tb-rec-name { font-size: 0.86rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.tb-rec-name:hover { text-decoration: underline; }
.tb-rec-bp { font-size: 0.72rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.tb-rec-body .tb-chips { margin-top: 2px; }

/* Picker (a full-height sheet on phones) */
.tb-picker { width: min(960px, calc(100vw - 32px)); }
.tb-pick-h { margin: 0; font: 400 1.2rem/1.2 var(--font-display); color: #fff; }
.tb-pick-tools { display: grid; gap: 8px; margin-bottom: 10px; }
.tb-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
    font: 500 0.95rem/1.2 var(--font-body);
}
.tb-search:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.tb-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tb-frow label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-3); }
.tb-frow select {
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: var(--navy);
    color: var(--text);
    font: 500 0.82rem/1.2 var(--font-body);
}
.tb-fchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.tb-fchip img { width: 18px; height: 18px; }
.tb-fchip.is-on { border-color: var(--gold); background: rgba(255, 213, 83, 0.14); color: #fff; }
.tb-ptabs { justify-self: start; }
.tb-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px;   /* room for the cells' focus ring inside the scroller */
}
.tb-picker[open] { display: flex; flex-direction: column; }   /* only the grid scrolls, at every size */
.tb-pick-empty { grid-column: 1 / -1; }
.tb-cell { position: relative; display: grid; gap: 2px; min-width: 0; text-align: center; content-visibility: auto; contain-intrinsic-size: 76px 96px; }
.tb-cell.is-in { opacity: 0.55; }
.tb-cell-bp { font-size: 0.68rem; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tb-cell-in, .tb-cell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(10, 22, 40, 0.88);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--gold);
}
.tb-cell-in { color: var(--text-2); left: 2px; right: auto; }
.tb-cell-none .tb-plus { aspect-ratio: 1; height: auto; font-size: 1.4rem; }
@media (max-width: 575px) {
    .tb-picker { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
    .tb-actions { margin-left: 0; }
    .tb-total { justify-items: start; }
}

.tb-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 60;
    translate: -50% 0;   /* the separate property, so the toast's motion (transform) can't undo the centering */
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--navy-light);
    border: 1px solid var(--panel-border);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ── Items (mhui_item_html): rewards, costs, shop goods on the gacha / event / mission pages ── */
.it { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); text-decoration: none; vertical-align: middle; }
a.it:hover .it-n { color: var(--acc2); text-decoration: underline; }
a.it:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.it-ic { position: relative; display: block; flex: none; width: 40px; aspect-ratio: 1; }
.it-ic img { position: absolute; display: block; inset: 0; width: 100%; height: 100%; }
.it-ic.it-item { aspect-ratio: 160 / 137; overflow: hidden; }   /* the frame art's bottom 15% is a dark shadow tab: cropped */
.it-item > img:first-child { height: auto; }
.it-item .it-art { inset: 10% 9%; width: 82%; height: 80%; object-fit: contain; }
.it-card .it-attr { inset: auto; left: 5%; top: 72%; width: 23%; height: 23%; }
.it-mem .it-mem-art { inset: 2.5%; width: 95%; height: 95%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.it-n { min-width: 0; overflow: hidden; font-size: 0.86rem; line-height: 1.3; text-overflow: ellipsis; }
.it-x { flex: none; color: var(--gold); font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.it-tile { position: relative; display: inline-block; gap: 0; }
.it-tile .it-ic { width: 56px; }
.it-tile .it-x {
    position: absolute;
    right: -2px;
    bottom: -2px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(10, 22, 40, 0.88);
    font-size: 0.7rem;
    line-height: 1.5;
}