/* Ratz-GG WWM PvP tool. Design matched to the ratz-gg.net hub (ratz-brand.css). */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;700;800;900&family=Rajdhani:wght@500;600;700&display=swap");

:root {
    /* wuxia ink base - deepened to a confident ink/parchment world. The dominant
       accent is now JADE (the wuxia identity); the ratzgg purple is demoted to the
       --brand-* tokens below and appears only as a sparse, deliberate hint. */
    --bg: #0a0a0d;
    --surface: #14141a;
    --surface-2: #100f15;
    --surface-3: #1a1922;
    --border: #262430;
    --border-soft: #201f29;
    --border-hover: #38394a;
    /* ACCENT = jade. Leads buttons, links, focus rings, glows, brush marks, hovers,
       highlights and active states across every page (was the purple #a78bfa). */
    --accent: #5fc4a3;
    --accent-strong: #43a987;
    --accent-soft: rgba(95, 196, 163, 0.12);
    --accent-glow: rgba(95, 196, 163, 0.26);
    /* GOLD - both brand + quintessentially wuxia; kept prominent. --attune is the
       base gold; --gold-strong is the single brighter gold (hovers, gilt highlights). */
    --attune: #d9a441;
    --attune-soft: rgba(217, 164, 65, 0.12);
    --gold-strong: #e9bd63;
    /* BRAND VIOLET - the ratzgg purple, now a MINOR hint only (logo area + a faint
       atmospheric wash + the rare brand chip). Deliberately not the primary accent. */
    --brand: #a78bfa;
    --brand-strong: #8b5cf6;
    --brand-soft: rgba(167, 139, 250, 0.08);
    --brand-glow: rgba(167, 139, 250, 0.18);
    /* cinnabar seal-red: a tiny decorative flourish ONLY (never status; loss/red is reserved) */
    --seal: #c0473a;
    --ink: #060509;
    --text: #f4efe6;
    --text-muted: #9b9384;
    --text-faint: #6f6a5e;
    /* status semantics: ONE win-green, ONE loss-red (plus their soft tints) */
    --green: #00e676;
    --green-soft: rgba(0, 230, 118, 0.12);
    --green-glow: rgba(0, 230, 118, 0.35);
    --red: #ff5e5b;
    --red-soft: rgba(255, 94, 91, 0.12);
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Cormorant Garamond", "Georgia", serif;
    --font-logo: "Rajdhani";
    --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-card: 12px; /* the one canonical card corner (was 11/12/13/16 mixed) */
    --radius-pill: 999px;
    /* type scale (~1.2 ratio). Replaces 37 ad-hoc font-sizes incl. 0.5px steps. */
    --fs-2xs: 10px;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;
    --fs-3xl: 36px;
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35);
    /* Phase 2 - wuxia / jianghu treatment tokens (brush edges, ink hairlines, scroll depth) */
    --hairline: rgba(217, 164, 65, 0.16); /* faint gold hairline, the "gilt edge" of a scroll */
    --hairline-jade: rgba(95, 196, 163, 0.2);
    /* brush-stroke head colours for section marks: jade leads the two-tone brush.
       --brush-brand keeps a faint purple for the rare brand touch. */
    --brush-jade: rgba(95, 196, 163, 0.6);
    --brush-gold: rgba(217, 164, 65, 0.6);
    --brush-brand: rgba(167, 139, 250, 0.4);
    --ink-wash: linear-gradient(90deg, transparent, var(--border-hover) 18%, var(--border-hover) 82%, transparent); /* brush divider */
    --shadow-scroll: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 22px 54px -30px rgba(0, 0, 0, 0.85);
    --t-slow: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-brush: cubic-bezier(0.22, 0.61, 0.36, 1);
    /* full-width content with a generous ultrawide cap so lines never sprawl on a
       very large monitor; side gutters come from the page padding on the content
       containers (.topbar-inner / main.hub-main / footer), so content never touches
       the edge. */
    --max-width: 100%;
    /* ONE consolidated breakpoint set (mobile + tablet). CSS can't read vars inside
       a media query condition, so these document the literal values used throughout:
       --bp-mobile = 640px, --bp-tablet = 960px. */
    --bp-mobile: 640px;
    --bp-tablet: 960px;
    /* spacing on a clean 4px grid */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --t-fast: 0.15s ease;
    --t-med: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}
.muted {
    color: var(--text-muted);
}

#hubCanvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}


.topbar-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-8);
    max-width: var(--max-width);
    margin: 0 auto;
}
.topbar-brand {
    display: flex;
    align-items: center;
    line-height: 0;
}
.topbar-nav {
    display: flex;
    gap: 18px;
}

.topbar-nav a:hover {
    color: var(--accent);
}
.topbar-nav a.on {
    color: var(--accent);
}

.nav-hub {
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 6px var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition:
        color 0.15s,
        border-color 0.15s,
        background 0.15s;
}
.nav-hub:hover {
    color: var(--accent);
    border-color: var(--border-hover);
    background: var(--accent-soft);
}
/* Ko-fi support: a filled-gold pill in the header + a gold link in the footer (both in the static shell, so they
   show on every page). Stands out from the purple nav as a clear "contribute to NotRatz" call to action. */
.nav-kofi {
    color: #1c1404;
    background: var(--attune);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition:
        filter 0.15s,
        transform 0.15s,
        box-shadow 0.15s;
}
.nav-kofi:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--attune-soft);
}
.site-footer-links a.footer-kofi {
    color: var(--attune);
    font-weight: 700;
}
.site-footer-links a.footer-kofi:hover {
    color: var(--gold-strong);
}
.nav-auth {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: var(--sp-2);
    white-space: nowrap;
}
.nav-signin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #5865f2;
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: filter 0.15s;
}
.nav-signin:hover {
    filter: brightness(1.1);
}
.nav-user {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 700;
    font-family: var(--font-mono);
}
.nav-signout {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: var(--sp-1) 10px;
    transition:
        color 0.15s,
        border-color 0.15s;
}
.nav-signout:hover {
    color: var(--accent);
    border-color: var(--border-hover);
}

/* the hero content is centred in a measured column so the search reads as the
   single focal "gate" of the page rather than a stretched bar */
.lookup-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(40px, 7vw, 72px) var(--sp-6) clamp(28px, 5vw, 44px);
}
.lookup-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font: 700 var(--fs-2xs) var(--font);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--attune);
}
.lookup-kicker::before,
.lookup-kicker::after {
    content: "";
    width: 18px;
    height: 1px;
}
.lookup-kicker::before {
    background: linear-gradient(90deg, transparent, var(--attune));
}
.lookup-kicker::after {
    background: linear-gradient(90deg, var(--attune), transparent);
}
.lookup-h2 {
    margin: var(--sp-3) 0 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(34px, 6vw, 56px);
    line-height: 1.0;
    letter-spacing: 0.01em;
    background: linear-gradient(112deg, #fff 0%, #efe7d6 34%, var(--accent) 72%, var(--attune) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lookup-sub {
    margin: 0 0 var(--sp-6);
    max-width: 480px;
    color: var(--text-muted);
    font-size: var(--fs-base);
    line-height: 1.6;
}
.lookup-search {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 540px;
}
/* the field is a framed ink well with a leading rune glyph; the input fills it */
.lookup-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 260px;
    min-width: 0;
}
.lookup-field-icon {
    position: absolute;
    left: var(--sp-4);
    color: var(--attune);
    font-size: var(--fs-lg);
    opacity: 0.7;
    pointer-events: none;
    line-height: 1;
}

#q::placeholder {
    color: var(--text-faint);
}
#q:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.lookup-search button {
    flex: 0 0 auto;
    background: var(--accent);
    color: var(--ink);
    border: 0;
    font: inherit;
    font-weight: 800;
    font-size: var(--fs-md);
    letter-spacing: 0.02em;
    padding: 14px 30px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--t-fast);
}
.lookup-search button:hover {
    background: var(--accent-strong);
}
.lookup-hint {
    margin: 14px 0 0;
    color: var(--text-faint);
    font-size: var(--fs-sm);
    letter-spacing: 0.01em;
}

main.hub-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 26px var(--sp-8) var(--sp-2);
}


.lb-f {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.lb-f-l {
    color: var(--text-faint);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.lb-sel,
.lb-search {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.lb-sel {
    cursor: pointer;
}
.lb-search {
    min-width: 170px;
    font-weight: 500;
}

.lb-sel:focus,
.lb-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* leaderboard table */
.lb-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
} 

.lb tbody tr:last-child td {
    border-bottom: 0;
}
 /* score */
.lb th:nth-child(n + 5):nth-child(-n + 8),
.lb td:nth-child(n + 5):nth-child(-n + 8) {
    text-align: center;
} 

.lb-build {
    min-width: 150px;
}
.lb-load {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    border-radius: 6px;
    padding: 2px 9px;
    cursor: pointer;
    transition:
        border-color var(--t-fast),
        color var(--t-fast);
}
.lb-load:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--text);
}
.lb-load:disabled {
    opacity: 0.6;
    cursor: default;
}
.lb-wpn {
    color: var(--text);
    font-weight: 600;
}
.lb-bago {
    color: var(--text-faint);
    font-size: var(--fs-xs);
    margin-left: var(--sp-1);
}

/* search cards */
.cards {
    display: grid;
    gap: 10px;
}


.card-name {
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--accent);
}

/* sections */
section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px var(--sp-4);
    margin: 14px 0;
    box-shadow: var(--shadow-card);
}

/* ============================================================
   PLAYER PROFILE - bento layout (hero · stats rail · loadout · matches)
   ============================================================ */

/* shared card surface for every profile panel */
.pcard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4) var(--sp-5);
    box-shadow: var(--shadow-soft);
    margin: 0;
}
.pcard h3 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
}
.cg-note {
    font-size: var(--fs-xs);
    line-height: 1.35;
    margin: -6px 0 var(--sp-3);
}

.phero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        80% 120% at 100% 120%,
        rgba(67, 169, 135, 0.1),
        transparent 55%
    );
}
.phero-id {
    min-width: 0;
    position: relative;
    z-index: 1;
}
.phero h2 {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-2xl);
    line-height: 1.05;
    overflow-wrap: anywhere;
    font-weight: 900;
    letter-spacing: -0.02em;
}


.phero-sign {
    margin-top: var(--sp-2);
    color: var(--text-faint);
    font-style: italic;
    font-size: var(--fs-base);
    max-width: 60ch;
    overflow-wrap: anywhere;
}
.phero-meta {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.phero-meta .pp-guild {
    color: var(--text);
}

.phero-meta .pp-dim {
    color: var(--text-faint);
    text-transform: capitalize;
}

.phero-figs {
    display: flex;
    align-items: stretch;
    gap: var(--sp-5);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.hf {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 64px;
}
.hf-v {
    font-family: var(--font-logo), sans-serif;
    font-weight: 700;
    font-size: var(--fs-2xl);
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.hf-accent .hf-v {
    color: var(--accent);
}
.hf-sep {
    color: var(--text-faint);
    margin: 0 3px;
    font-weight: 600;
}
.hf-l {
    margin-top: 5px;
    color: var(--text-faint);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.hf-div {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(
        180deg,
        transparent,
        var(--border-hover),
        transparent
    );
}

/* --- actions row (compare + live link) --- */
.pactions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin: 0 0 var(--sp-4);
}
.pactions .cmp-bar {
    margin: 0;
    flex: 1 1 320px;
}
.pactions .link-req-btn {
    margin: 0;
    white-space: nowrap;
}

/* --- bento: stats rail (left) + loadout (right) ---
   Desktop: a real two-column dossier - a flexible standing/record rail beside the
   loadout plate. The rail is allowed to grow on wide monitors (was capped at 300px,
   which left a narrow single column on a full-width page); its stat cards then flow
   into an auto-fit grid (see .pstack below) so the width is used. Reflows to one
   column at the tablet breakpoint. */
.pbento {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
    gap: var(--sp-4) var(--sp-5);
    align-items: start;
    margin: 0 0 var(--sp-4);
}
/* the rail: cards flow in an auto-fit grid so on a wide page the stat cards spread
   into 2+ columns instead of one tall stack; every category stays visible. */
.pstack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-3);
    align-content: start;
    min-width: 0;
}
.pstack .pcard {
    padding: var(--sp-3) var(--sp-4);
}

/* stat rows inside rail cards: dense label/value pairs */
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-1) var(--sp-3);
}
.st {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 5px 0;
    border-top: 1px solid var(--border-soft);
}
.st:nth-child(-n + 2) {
    border-top: 0;
}
.st-l {
    color: var(--text-faint);
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.st-v {
    font-weight: 700;
    font-size: var(--fs-base);
    margin-top: 1px;
    line-height: 1.25;
    color: var(--text);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.pcard-id .stats {
    grid-template-columns: 1fr 1fr;
}
.pcard-id .st-v {
    font-size: var(--fs-base);
    font-weight: 600;
}
/* Gameplay Trail: full-width label/value rows (values are scene lists, not single figures) */
.trail {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.trail-row {
    display: flex;
    gap: var(--sp-3);
    align-items: baseline;
}
.trail-l {
    flex: 0 0 62px;
    color: var(--text-faint);
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.trail-v {
    color: var(--text);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.35;
}

/* --- loadout (the highlight) --- */
.armory {
    min-width: 0;
}
.arm-weapons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.wpn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px var(--sp-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.wpn-tag {
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}
.wpn b {
    color: var(--text);
    font-weight: 700;
    font-size: var(--fs-base);
}
.arm-block {
    margin-top: var(--sp-4);
}
.arm-label {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-faint);
    font-weight: 700;
    margin-bottom: var(--sp-3);
}
.iw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-2);
}
.iw {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--pc, var(--border-hover));
    border-radius: var(--radius-sm);
    transition:
        border-color var(--t-fast),
        transform var(--t-fast),
        background var(--t-fast);
}
.iw:hover {
    transform: translateY(-1px);
    background: var(--surface-3);
}
.iw img {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 6px;
    object-fit: cover;
    background: var(--surface-3);
}
.iw span {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.iw.mystic {
    border-left-color: var(--accent);
}

/* gear grid: each piece a tidy card with attrs + affixes */
.gear {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}
@media (max-width: 960px) {
    .gear {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .gear {
        grid-template-columns: 1fr;
    }
}
.gp {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--sp-2) 9px;
    transition: border-color var(--t-fast);
}
.gp:hover {
    border-color: var(--border-hover);
}
.gp-h {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid var(--border-soft);
}
.gp-name {
    font-weight: 700;
    color: var(--accent);
    font-size: var(--fs-sm);
    line-height: 1.15;
    min-width: 0;
    overflow-wrap: anywhere;
}
.gp-retone {
    color: var(--attune);
    font-weight: 800;
    cursor: help;
} /* ** = piece was retuned (affixes re-rolled) */
.gp-set {
    color: var(--attune);
    font-size: var(--fs-xs);
    font-weight: 700;
    margin: 2px 0 0;
} /* gear-set name + equipped piece count */
.gp-dur {
    margin-left: auto;
    flex: none;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 1px var(--sp-2);
}
.gp-attrs {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gp-affixes {
    margin-top: var(--sp-1);
    padding-top: var(--sp-1);
    border-top: 1px dashed var(--border);
}
.af {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    line-height: 1.35;
}
.af span {
    color: var(--text-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}
.af b {
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.af.base b {
    color: var(--accent);
}
/* PvP attunements (gear determin effects) - amber, set apart from rolled affixes */
.af.attune {
    border-top: 1px dashed var(--attune-soft);
    margin-top: 3px;
    padding-top: var(--sp-1);
}
.af.attune span,
.af.attune b {
    color: var(--attune);
}
.af.attune .af-star {
    font-size: var(--fs-2xs);
}
.af.attune.inactive span,
.af.attune.inactive b {
    color: var(--text-faint);
}
.af-off {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 3px;
    margin-left: var(--sp-1);
}


.pprofile .phero-meta .ppill {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.07);
}
.pprofile .phero-meta .pp-region {
    background: var(--accent-soft);
    border-color: rgba(95, 196, 163, 0.32);
}
.pprofile .phero-meta .pp-sect {
    background: var(--brand-soft);
    border-color: rgba(167, 139, 250, 0.3);
}


.pprofile .hf-accent .hf-v {
    background: linear-gradient(180deg, #bde6d6, var(--accent-strong));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pprofile .hf-sep {
    -webkit-text-fill-color: var(--text-faint);
    color: var(--text-faint);
}
/* Hero W/L record — wins green, losses red, larger than the other figures. -webkit-text-fill-color is
   required because .hf-v paints a gradient via background-clip:text (plain `color` would stay transparent). */
.pprofile .hf-v .hf-win,
.pprofile .hf-v .hf-loss,
.pprofile .hf-v .hf-sep {
    font-size: 1.28em;
}
.pprofile .hf-v .hf-win { color: var(--green); -webkit-text-fill-color: var(--green); }
.pprofile .hf-v .hf-loss { color: var(--red); -webkit-text-fill-color: var(--red); }
/* Hero timeline row (Created / Last Login / Last Logout / Playtime) — subordinate to the primary meta pills. */
.pprofile .phero-time { margin-top: 6px; font-size: 0.8em; opacity: 0.72; }


.pprofile .pstack .pcard {
    padding: 10px var(--sp-4);
}

.pprofile .pcard h3::before {
    content: "";
    flex: none;
    width: 4px;
    height: 4px;
    margin-right: 9px;
    background: var(--accent);
    border-radius: 50%;
}

.pprofile .pcard h3 .h3-count {
    flex: none;
    margin-left: 0;
}

/* stat rows: tighter, hover-lit, mono numerals */
.pprofile .stats {
    gap: 0 var(--sp-4);
}
.pprofile .st {
    padding: 4px 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    transition: background var(--t-fast);
}
.pprofile .st:hover {
    background: rgba(95, 196, 163, 0.07);
}
.pprofile .st-l {
    color: var(--text-muted);
    letter-spacing: 0.1em;
}
.pprofile .st-v {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--fs-base);
}
.pprofile .pcard-id .st-v {
    font-size: var(--fs-sm);
}

/* gameplay trail rows: align labels to the dossier muted-key style */
.pprofile .trail-l {
    color: var(--text-muted);
    letter-spacing: 0.1em;
}
.pprofile .trail-v {
    font-family: var(--font-mono);
}

/* --- loadout: weapons / inner ways / mystic / gear --- */
.pprofile .arm-label {
    font-family: var(--font-logo), sans-serif;
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    color: var(--accent);
    display: flex;
    align-items: center;
}

.pprofile .wpn-tag {
    font-family: var(--font-logo), sans-serif;
    color: var(--accent);
}
.pprofile .iw {
    padding: var(--sp-2) 11px;
    background: linear-gradient(165deg, var(--surface-3), var(--surface));
    border: 1px solid var(--border);
    border-left: 3px solid var(--pc, var(--accent));
    border-radius: var(--radius-card);
}
.pprofile .iw:hover {
    background: linear-gradient(165deg, #1c2722, var(--surface));
    border-color: var(--border-hover);
    box-shadow: 0 14px 30px -20px rgba(67, 169, 135, 0.5);
}
.pprofile .iw.mystic {
    border-left-color: var(--accent);
}
.pprofile .gp {
    padding: 9px 11px;
    background: linear-gradient(165deg, var(--surface-3), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.pprofile .gp:hover {
    border-color: var(--accent);
    box-shadow: 0 14px 30px -20px rgba(67, 169, 135, 0.45);
}
.pprofile .gp-h {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}
.pprofile .af b,
.pprofile .gp-dur {
    font-family: var(--font-mono);
}
.pprofile .gp-attrs.gp-affixes {
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* loadout calc CTA: keep it as a quiet accent link, not a heavy button */
.pprofile .calc-btn {
    border-radius: var(--radius-card);
}

/* --- profile reduced-motion: kill the lift/shadow transitions we added --- */
@media (prefers-reduced-motion: reduce) {
    .pprofile .iw,
    .pprofile .iw:hover,
    .pprofile .gp,
    .pprofile .gp:hover {
        transition: none;
        transform: none;
        box-shadow: none;
    }
}

/* --- match history: compact rows --- */
/* match history: link card on the profile + standalone view header */
.matches-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    text-decoration: none;
    margin-top: var(--sp-4);
    font-weight: 700;
    transition:
        border-color var(--t-fast),
        transform var(--t-fast);
}
.matches-link:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
}
.match-head {
    margin: 0 0 var(--sp-4);
}
.back-link {
    color: var(--text-muted);
    font-weight: 700;
    font-size: var(--fs-base);
    transition: color var(--t-fast);
}
.back-link:hover {
    color: var(--accent);
}
.match-rows {
    display: flex;
    flex-direction: column;
}
.match {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    transition: background var(--t-fast);
}
.match:nth-child(odd) {
    background: var(--surface-2);
}
.match:hover {
    background: var(--surface-3);
}
.match.win {
    border-left-color: var(--green);
}
.match.loss {
    border-left-color: var(--red);
}
.match.unknown {
    border-left-color: var(--border-hover);
}
.match .res {
    font-family: var(--font-logo), sans-serif;
    font-weight: 700;
    width: 46px;
    flex: none;
    letter-spacing: 0.05em;
    font-size: var(--fs-base);
}
.match.win .res {
    color: var(--green);
}
.match.loss .res {
    color: var(--red);
}
.match.unknown .res {
    color: var(--text-muted);
}
.match .mode {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}
.match .vs {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match .dur {
    margin-left: auto;
    flex: none;
    color: var(--text-faint);
    font-size: var(--fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* responsive: collapse the bento to one column at the tablet breakpoint; the rail
   keeps flowing its stat cards in an auto-fit grid so a tablet still shows 2-up. */
@media (max-width: 960px) {
    .pbento {
        grid-template-columns: 1fr;
    }
}
/* mobile: everything in one readable column; the hero figure row stays a tidy 3-up */
@media (max-width: 640px) {
    .pprofile .phero {
        padding: var(--sp-4);
    }
    .phero h2 {
        font-size: var(--fs-xl);
    }
    .phero-figs {
        gap: var(--sp-3);
        width: 100%;
    }
    .hf {
        flex: 1 1 calc(33% - var(--sp-3));
        min-width: 74px;
    }
    .pprofile .hf-v {
        font-size: var(--fs-xl);
    }
    .hf-div {
        display: none;
    }
    .pstack {
        grid-template-columns: 1fr;
    }
}
@media (prefers-reduced-motion: reduce) {
    .iw,
    .iw:hover,
    .gp,
    .match {
        transition: none;
        transform: none;
    }
}

/* live badge + consent-pending state */
.livebadge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: 14px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(0, 230, 118, 0.08);
    border: 1px solid rgba(0, 230, 118, 0.3);
    border-radius: var(--radius-pill);
}
/* Cached-snapshot banner: prominent "this is saved data" notice + premium refresh CTA */
.cache-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 18px;
    color: var(--attune);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.3);
    border-radius: var(--radius-card);
}
.cache-banner-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.cache-banner-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: var(--fs-md);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.cache-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    background: var(--attune);
    box-shadow: 0 0 0 4px rgba(217, 164, 65, 0.16);
}
.cache-banner-sub {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.cache-refresh {
    margin-left: auto;
    flex: none;
    background: var(--accent);
    color: var(--bg);
    border: 0;
    font: inherit;
    font-size: var(--fs-base);
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    border-radius: var(--radius-pill);
    padding: var(--sp-3) 22px;
    cursor: pointer;
}
.cache-refresh:hover {
    background: var(--accent-strong);
}
.cache-prem {
    margin-left: auto;
    flex: none;
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--t-fast);
}
.cache-prem:hover {
    color: #fff;
}
.pending {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px var(--sp-6);
    box-shadow: var(--shadow-card);
}
.pending h2 {
    font-size: var(--fs-lg);
}
.pending.err {
    border-color: rgba(255, 94, 91, 0.35);
}
.pending.err h2 {
    color: var(--red);
}
.spinner {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    border: 3px solid var(--accent-soft);
    border-top-color: var(--accent);
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* armory actions (open-in-calculator) */
.arm-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    flex-wrap: wrap;
}
.calc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: var(--bg);
    font-weight: 700;
    font-size: var(--fs-base);
    padding: 9px var(--sp-4);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.calc-btn:hover {
    background: var(--accent-strong);
}

/* player-vs-player compare */
.cmp-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 var(--sp-1);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
}
.cmp-input {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    color: var(--text);
    padding: var(--sp-2) 11px;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--fs-base);
    outline: none;
    width: 180px;
}
.cmp-input:focus {
    border-color: var(--accent);
}
.cmp-bar button {
    background: var(--accent);
    color: var(--bg);
    border: 0;
    font: inherit;
    font-weight: 700;
    font-size: var(--fs-base);
    padding: var(--sp-2) 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.cmp-heads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin: var(--sp-3) 0;
}
.cmp-head {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px var(--sp-4);
}
.cmp-name {
    font-size: var(--fs-lg);
    font-weight: 800;
}
table.cmp {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.cmp th,
.cmp td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.cmp thead th {
    color: var(--text-faint);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--surface-2);
}
.cmp td.cmp-l {
    text-align: left;
    color: var(--text-muted);
    font-weight: 600;
}
.cmp tbody tr:last-child td {
    border-bottom: 0;
}
.cmp-d {
    font-weight: 800;
}
.cmp-d.pos {
    color: var(--green);
}
.cmp-d.neg {
    color: var(--red);
}
.cmp-iws {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}
.cmp-iwrow {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.cmp-iw {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.cmp-iwn {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: 3px var(--sp-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
@media (max-width: 640px) {
    .cmp-heads,
    .cmp-iws {
        grid-template-columns: 1fr;
    }
}

/* live links */
.links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px var(--sp-4);
}
.link-uid {
    font-weight: 700;
}

.link-sync {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: var(--sp-2);
}

.sync-k {
    color: var(--text-muted);
    margin-right: 3px;
}
/* an inscribed caution slip, not a flat web alert */
.wip-banner {
    margin: var(--sp-1) 0 14px;
    padding: var(--sp-2) 14px;
    border-radius: var(--radius-md);
    background:
        linear-gradient(90deg, var(--attune-soft), transparent 80%),
        rgba(217, 164, 65, 0.04);
    border: 1px solid rgba(217, 164, 65, 0.4);
    border-left: 3px solid var(--attune);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    color: var(--attune);
    font-size: var(--fs-sm);
}
.wip-banner b {
    color: var(--attune);
}
.link-hint {
    margin-top: 9px;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--attune);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.3);
    border-radius: var(--radius-md);
    padding: var(--sp-2) 11px;
}
.link-hint b {
    color: var(--text);
    font-weight: 700;
}
.sync-help {
    margin-top: 9px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--attune);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.3);
    border-radius: var(--radius-md);
    padding: 10px var(--sp-3);
}
.sync-help-h {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-base);
    letter-spacing: 0.02em;
    color: var(--attune);
    margin-bottom: var(--sp-1);
}
.sync-help p {
    margin: 0 0 6px;
    color: var(--text);
}
.sync-help ul {
    margin: 0;
    padding-left: 18px;
}
.sync-help li {
    margin: 3px 0;
    color: var(--text);
}
.sync-help b {
    color: var(--text);
    font-weight: 700;
}
.link-id-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.link-id-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.link-guild {
    color: var(--accent);
    font-weight: 600;
}

.link-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.link-av-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--accent);
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-md);
    flex-shrink: 0;
}

.link-status.live {
    color: var(--green);
    font-weight: 700;
}
.link-status.wait {
    color: var(--accent);
}
.link-status.off {
    color: var(--text-faint);
}
.link-status.fail {
    color: var(--red);
    font-weight: 700;
}
.link-status .phase {
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-size: var(--fs-sm);
    font-weight: 600;
}
.link-stop {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) 14px;
    font: inherit;
    font-weight: 600;
    font-size: var(--fs-base);
    cursor: pointer;
    transition: all 0.15s;
}
.link-stop:hover {
    color: var(--red);
    border-color: var(--red);
}

.link-req-btn:hover {
    color: var(--bg);
    background: var(--accent);
    border-color: transparent;
}
.link-req-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.claim-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.15;
    padding: var(--sp-2) 18px;
}
.claim-btn .claim-sub {
    font-size: var(--fs-2xs);
    font-weight: 600;
    opacity: 0.75;
}
.claim-btn .claim-soon {
    font-size: var(--fs-2xs);
    font-weight: 600;
    opacity: 0.65;
}
.claim-btn .claim-main {
    font-size: var(--fs-base);
    font-weight: 800;
}

.link-del:hover {
    color: var(--red);
    border-color: var(--red);
}
/* Match-Linking row: Go Live by the badges (green), Hide + Unlink grouped top-right (grey / red). */
.link-badges {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: 5px;
    align-items: center;
}
.link-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
    align-self: flex-start;
}

.link-badges .link-req-btn {
    margin-top: 0;
    background: var(--green);
    color: #07210f;
    border-color: transparent;
    font-weight: 700;
}

@keyframes trackPulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(0, 230, 118, 0.22); }
    50% { box-shadow: 0 4px 22px 2px rgba(0, 230, 118, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
    .acct-head .link-req-btn { animation: none; box-shadow: 0 4px 16px rgba(0, 230, 118, 0.4); }
}
.link-badges .link-req-btn:hover {
    background: #00c853;
    color: #07210f;
}
.link-del {
    background: transparent;
    color: var(--red);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    font: inherit;
    font-weight: 600;
    font-size: var(--fs-base);
    cursor: pointer;
    transition: all 0.15s;
    border-color: rgba(255, 94, 91, 0.4);
}


.combat-spacer {
    flex: 1;
}

.live-dot {
    position: relative;
    padding-left: 15px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--green);
}
.live-dot::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--green);
    animation: livepulse 1.8s ease-out infinite;
}
@keyframes livepulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(0, 230, 118, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .live-dot::before { animation: none; }
}

.chero-rank .chero-v {
    color: var(--accent);
}

/* one consolidated stats column: dense leader rows, value + delta chip right-aligned */
.cgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* account link (signature challenge) */
.linkbox .cmp-bar {
    margin-top: 6px;
}
.link-challenge {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: flex-start;
}
.passcode {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--accent);
    background: var(--surface-2);
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-4);
    letter-spacing: 0.06em;
}
.linked-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}


.site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}
.site-footer-links {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.site-footer-links a {
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--fs-xs);
    transition: color 0.15s;
}

.site-footer-copy {
    color: rgba(255, 255, 255, 0.28);
    font-size: var(--fs-xs);
}
.site-footer-disclaimer {
    max-width: var(--max-width);
    margin: 14px auto 0;
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

.log-tab {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: var(--sp-2) 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    transition:
        color 0.15s,
        border-color 0.15s,
        background 0.15s;
}

.log-tab.on {
    color: var(--bg);
    background: var(--accent);
    border-color: transparent;
}
.log-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-soft);
}
/* Verify tab: bot RPC-signature/data-scope probe captures */
.verify-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-3) 0;
}
.verify-chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: var(--sp-1) 9px;
    font: var(--fs-sm)/1.3 var(--font-mono);
    cursor: pointer;
}
.verify-chip:hover {
    border-color: var(--border-hover);
    color: var(--text);
}
.verify-chip.on {
    border-color: var(--attune);
    color: var(--attune);
}
.verify-detail {
    margin-top: var(--sp-3);
}
.hist-picker,
.op-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 10px;
}
/* archive can hold up to 100 chips (30-day history) - keep the picker bounded + scrollable */
.hist-picker {
    max-height: 132px;
    overflow-y: auto;
    align-content: flex-start;
}
.hist-picker:empty {
    display: none;
}


.hist-chip.on,
.op-pill.on {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.snap-box {
    max-height: calc(100vh - 210px); /* one-screen fit; scroll inside the box, not the page */
}
/* wrap toggle: long redis keys / payloads scroll horizontally instead of wrapping */
.logbox.nowrap {
    white-space: pre;
}
/* Admin queue dashboard (#/logs → Queue tab): health stats + live/audit/scan tables */
.q-dash {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-height: calc(100vh - 200px); /* one-screen fit; the dashboard scrolls internally, not the page */
    overflow-y: auto;
    padding-right: var(--sp-1); /* room for the scrollbar so rows aren't clipped */
}

.q-health {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg);
    padding-bottom: var(--sp-1);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.req {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.req-av {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--surface-3);
}
.q-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 120px;
    padding: var(--sp-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.q-stat b {
    font: 600 var(--fs-lg)/1.1 var(--font);
    color: var(--text);
}
.q-stat i {
    font-style: normal;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.q-stat b.q-on {
    color: var(--green);
}
.q-stat b.q-off {
    color: var(--text-faint);
}
.q-stat b.q-warn {
    color: var(--attune);
}
.q-h {
    margin: var(--sp-2) 0 0;
    font: 600 var(--fs-base)/1.2 var(--font);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.q-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-sm);
    text-align: center;
}

.q-table th {
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    color: var(--text-faint);
    font-weight: 500;
    border-bottom: 1px solid var(--border);
}
.q-table td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
}
.q-table tbody tr:hover {
    background: var(--surface-2);
}
.q-uid {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.q-uid[disabled] {
    color: var(--text-faint);
    cursor: default;
}
.q-uid.on {
    color: var(--text);
    text-decoration: underline;
    font-weight: 600;
}
.q-link:hover {
    text-decoration: underline;
    cursor: pointer;
}
.q-jump {
    margin-left: var(--sp-1);
    color: var(--text-faint);
    text-decoration: none;
}
.q-jump:hover {
    color: var(--accent);
}
.q-detail {
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    margin: var(--sp-3) 0;
    background: var(--surface-2);
}
.q-detail-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--fs-sm);
    color: var(--text-faint);
}
.q-detail-h code {
    color: var(--accent);
}
.q-detail-x {
    background: none;
    border: 0;
    color: var(--text-faint);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
}
.q-detail-x:hover {
    color: var(--text);
}
.q-detail-body {
    padding: var(--sp-3);
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 100%;
}
/* inline capture row: the detail panel injected as a full-width row under the clicked lookup */
.q-detail-tr > td {
    padding: 0;
}
.q-table tbody tr.q-detail-tr:hover {
    background: transparent;
}
/* audit pager (under the Recent lookups table) */
.q-pager {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-2) 0 var(--sp-4);
    font-size: var(--fs-sm);
}
.q-pager button {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: var(--sp-1) 10px;
    font-size: var(--fs-sm);
    cursor: pointer;
}
.q-pager button:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}
.q-pager button:disabled {
    opacity: 0.4;
    cursor: default;
}
/* near-fullscreen mode: toggled from the detail header ⛶ button (data-detail-full) */
.q-detail.q-detail--full {
    position: fixed;
    inset: var(--sp-3);
    z-index: 60;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    box-shadow: var(--shadow-card);
}
.q-detail.q-detail--full .q-detail-body {
    max-height: none;
    flex: 1 1 auto;
}
.q-detail-tools {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.q-detail-tools input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-sm);
    padding: 3px var(--sp-2);
    width: 150px;
}
.q-detail-tools button {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    padding: 3px 9px;
    cursor: pointer;
    transition:
        color var(--t-fast),
        border-color var(--t-fast);
}
.q-detail-tools button:hover {
    color: var(--accent);
    border-color: var(--border-hover);
}
/* No horizontal scrollbars: JSON trees + the queue table wrap instead of scrolling sideways. */
.jsonbox,
.snap-box,
.q-dash {
    max-width: 100%;
    overflow-x: hidden;
}


.q-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
    table-layout: fixed;
}
.q-table td,
.q-table th {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.q-err {
    color: var(--red);
}
/* search: dim everything except matches and the branches on the path to a match */
.jsonbox.jt-searching .jt-row:not(.jt-hit):not(.jt-onpath) > .jt-head,
.jsonbox.jt-searching .jt-row:not(.jt-hit):not(.jt-onpath) > .jt-leaf {
    opacity: 0.3;
}
.jt-row.jt-hit > .jt-head,
.jt-row.jt-hit > .jt-leaf {
    background: rgba(255, 214, 91, 0.18);
    border-radius: 3px;
    outline: 1px solid rgba(255, 214, 91, 0.35);
}
.jt-row.jt-current > .jt-head,
.jt-row.jt-current > .jt-leaf {
    background: rgba(255, 214, 91, 0.34);
    outline-color: rgba(255, 214, 91, 0.7);
}
.jt-search {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    color: inherit;
    font: inherit;
    padding: 3px var(--sp-2);
    min-width: 180px;
}
.jt-count {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.55);
    min-width: 64px;
}
.rpc-cap {
    margin-top: 1.5rem;
}
.rpc-cap h3 {
    margin: 0 0 0.25rem;
}
.rpc-upd {
    font-size: var(--fs-sm);
    font-weight: 400;
}
.rpcbox {
    max-height: 82vh;
}
.cap-h {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.cap-tog {
    display: inline-block;
    color: var(--text-faint);
    font-size: var(--fs-xs);
    transition: transform 0.12s;
}
.rpc-cap:not(.open) .cap-tog {
    transform: rotate(-90deg);
}
.rpc-cap:not(.open) .cap-body {
    display: none;
}

.copy-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.lb-tiers-h { font: 600 var(--fs-base) var(--font); color: var(--text-muted); margin-bottom: 11px; }
.lb-tiers-h b { color: var(--attune); }
.lb-tiers-note { color: var(--text-faint); font-weight: 500; font-size: var(--fs-xs); }
.lb-tiers-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }


.lb-tier-l { font: 600 var(--fs-xs) var(--font); color: var(--text-muted); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.06em; }
.lb-tier-sub { font: 500 var(--fs-2xs) var(--font-mono); color: var(--text-faint); margin-top: 3px; }

/* loading pop-up (centered overlay shown while a lookup runs) */
.load-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 8, 0.6);
    backdrop-filter: blur(3px);
    padding: var(--sp-5);
}
.load-card {
    background: var(--surface);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--sp-8) 38px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.load-card .spinner {
    margin: 0 0 var(--sp-1);
    width: 48px;
    height: 48px;
    border-width: 4px;
}
.load-label {
    font-weight: 800;
    font-size: var(--fs-lg);
    letter-spacing: -0.01em;
}
.load-note {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-base);
    min-height: 18px;
}
.load-prem {
    margin-top: var(--sp-1);
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 700;
    border-top: 1px solid var(--border);
    padding-top: 10px;
    width: 100%;
    transition: color var(--t-fast);
}
.load-prem:hover {
    color: #fff;
}
.load-thanks,
.load-thanks:hover {
    color: var(--green);
    cursor: default;
}

/* recent lookups (lookup landing) */
.recent {
    width: 100%;
    max-width: 540px;
    margin: 30px auto 0;
    padding-top: var(--sp-5);
    text-align: left;
    border-top: 1px solid transparent;
    background-image: var(--ink-wash);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 1px;
}
.recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--text-faint);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.recent-clear {
    background: none;
    border: 0;
    color: var(--text-faint);
    font: inherit;
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: color var(--t-fast);
}
.recent-clear:hover {
    color: var(--accent);
}
.recent-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-2);
}
.recent-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 9px var(--sp-3);
    transition:
        border-color var(--t-fast),
        transform var(--t-fast);
}
.recent-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.recent-name {
    font-weight: 700;
    color: var(--accent);
    font-size: var(--fs-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-sub {
    color: var(--text-faint);
    font-size: var(--fs-xs);
}

/* back-to-lookup link (profile actions) */
.back-lookup {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 600;
    padding: 6px var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition:
        color var(--t-fast),
        border-color var(--t-fast);
}
.back-lookup:hover {
    color: var(--accent);
    border-color: var(--border-hover);
}

/* collapsible JSON tree (logs) */
.jsonbox {
    white-space: normal;
    line-height: 1.5;
}
.jt-raw {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: break-word;
}
.jt-kids {
    margin-left: 14px;
    border-left: 1px solid var(--border-soft);
    padding-left: var(--sp-2);
}
.jt-head {
    min-width: 0;
    cursor: pointer;
    user-select: text;
    display: flex;
    align-items: baseline;
    gap: var(--sp-1);
    flex-wrap: wrap;
}
.jt-head:hover {
    background: var(--surface-3);
    border-radius: 4px;
}
.jt-tog {
    display: inline-block;
    color: var(--text-faint);
    font-size: var(--fs-2xs);
    width: 10px;
    transition: transform 0.1s;
    user-select: none;
}
.jt-branch:not(.jt-open) > .jt-head > .jt-tog {
    transform: rotate(-90deg);
}
.jt-branch:not(.jt-open) > .jt-kids,
.jt-branch:not(.jt-open) > .jt-close {
    display: none;
}
.jt-branch.jt-open > .jt-head > .jt-cc,
.jt-branch.jt-open > .jt-head > .jt-meta {
    display: none;
}
.jt-key {
    color: var(--accent);
}
.jt-meta {
    color: var(--text-faint);
    font-size: var(--fs-xs);
    margin: 0 3px;
}
.jt-punc {
    color: var(--text-faint);
}
.jt-string {
    color: var(--green);
}
.jt-number {
    color: #f0a868;
}
.jt-boolean {
    color: var(--accent-strong);
}
.jt-null {
    color: var(--text-faint);
    font-style: italic;
}
.json-tools {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 14px 0 6px;
    font-size: var(--fs-xs);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}
.json-tools button {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
    transition:
        border-color var(--t-fast),
        color var(--t-fast);
}
.json-tools button:hover,
.json-tools button.on {
    border-color: var(--accent);
    color: var(--text);
}
.json-tools button.on {
    background: var(--accent-soft);
}
.json-tools a {
    margin-left: auto;
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

/* admin settings form */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: var(--sp-4) 0;
    max-width: 640px;
}
.set-row {
    display: grid;
    gap: var(--sp-1);
}
.set-k {
    font-weight: 700;
    font-size: var(--fs-base);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.set-k code {
    color: var(--text-faint);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 4px;
}
.set-in {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-base);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    outline: none;
    transition:
        border-color var(--t-fast),
        box-shadow var(--t-fast);
}
.set-in:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.set-hint {
    color: var(--text-faint);
    font-size: var(--fs-sm);
}
/* read-only (wrangler-managed) settings: show set/unset state in place of an input */
.set-ro-val {
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.55);
    padding: var(--sp-2) 2px;
}
.set-ro-val em {
    color: var(--text-faint);
}
.set-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-1);
}
.set-save {
    background: var(--accent);
    color: var(--bg);
    border: 0;
    font: inherit;
    font-weight: 700;
    font-size: var(--fs-base);
    padding: 9px 22px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast);
}
.set-save:hover {
    background: var(--accent-strong);
}

/* mobile gutters: tighter page padding on the three shared content containers
   (topbar, main, footer) so content keeps a comfortable edge gap without wasting
   width on a phone. */
@media (max-width: 640px) {
    .topbar-inner {
        padding: var(--sp-3) var(--sp-4);
    }
    main.hub-main {
        padding: var(--sp-5) var(--sp-4) var(--sp-2);
    }
    .nav-hub {
        margin-left: 0;
    }
    .site-footer {
        padding: 14px var(--sp-4) var(--sp-3);
    }
    .site-footer-bottom {
        justify-content: center;
    }
}

/* --- Match Linking: gear panel + in-site compare drawer ------------------- */
.gear-panel {
    margin: 14px 0 6px;
    padding: 18px var(--sp-5) var(--sp-4);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(95, 196, 163, 0.07), transparent 60%),
        var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.gear-sub {
    font-size: var(--fs-sm);
    color: var(--text-faint);
}
.gear-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.gslot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    padding: 10px var(--sp-3);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.gslot:hover,
.gslot:focus-visible {
    border-color: var(--accent);
    background: var(--surface-2);
    transform: translateY(-1px);
}
.gslot-h {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.gslot-rolls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

.gslot-roll.empty {
    color: var(--text-faint);
    font-style: italic;
    border-style: dashed;
}

.gslot:hover .gslot-cta {
    opacity: 1;
}
.gear-note {
    margin: 10px 2px 0;
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

.gcmp-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(8, 6, 14, 0.72);
    backdrop-filter: blur(3px);
}
.gcmp {
    width: min(760px, 100%);
    max-height: 88vh;
    overflow: auto;
    background:
        radial-gradient(130% 120% at 100% 0%, rgba(217, 164, 65, 0.05), transparent 55%),
        var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px var(--sp-5) var(--sp-5);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
.gcmp-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: 14px;
}
.gcmp-title {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-lg);
    letter-spacing: 0.03em;
    flex: 1;
}
.gcmp-mode {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.gm-btn {
    padding: 5px 14px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
}
.gm-btn.on {
    background: var(--accent);
    color: #06211a;
}
.gcmp-close {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
}
.gcmp-close:hover {
    color: var(--text);
}
.gcmp-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
@media (max-width: 640px) {
    .gcmp-cols {
        grid-template-columns: 1fr;
    }
}
.gcmp-col h4 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.gcmp-stat {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 2px;
    border-bottom: 1px dashed var(--border);
    font-size: var(--fs-base);
}
.gcmp-k {
    color: var(--text-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}
.gcmp-v {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    flex: none;
    white-space: nowrap;
}
.gcmp-edit-row {
    display: grid;
    grid-template-columns: 1fr 86px 30px;
    gap: 6px;
    margin-bottom: 6px;
}
.gcmp-sel,
.gcmp-val {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-sm);
    padding: var(--sp-2) var(--sp-2);
    min-height: 34px;
}
.gcmp-sel:focus-visible,
.gcmp-val:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.gcmp-del {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-faint);
    cursor: pointer;
    font-size: var(--fs-md);
}
.gcmp-del:hover {
    color: var(--red);
    border-color: var(--red);
}
.gcmp-add {
    margin-top: 2px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    width: 100%;
}
.gcmp-add:hover {
    border-color: var(--accent);
}
.gcmp-verdict {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: 18px;
    padding: 14px var(--sp-4);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}
.gv-stamp {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--fs-2xl);
    letter-spacing: 0.08em;
}
.gv-stamp.up { color: var(--green); }
.gv-stamp.down { color: var(--red); }
.gv-stamp.even { color: var(--text-muted); }
.gv-pct {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-lg);
    font-variant-numeric: tabular-nums;
}
.gv-pct.up { color: var(--green); }
.gv-pct.down { color: var(--red); }
.gv-pct.even { color: var(--text-muted); }
.gv-note {
    font-size: var(--fs-sm);
    color: var(--text-faint);
}
.gv-phys { flex-basis: 100%; display: flex; gap: var(--sp-2); margin-top: 2px; }
.gvp {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 3px 9px;
}
.gvp b { font-variant-numeric: tabular-nums; }
.gvp.up { color: var(--green); border-color: rgba(74, 222, 128, 0.3); }
.gvp.down { color: var(--red); border-color: rgba(248, 113, 113, 0.3); }
.gvp.even { color: var(--text-muted); }

/* --- consent flyout: walk the user into the game --------------------------- */
.consent-fly {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 90;
    display: flex;
    gap: var(--sp-3);
    width: min(360px, calc(100vw - 36px));
    padding: 15px var(--sp-4);
    background:
        radial-gradient(140% 150% at 100% 0%, rgba(95, 196, 163, 0.12), transparent 60%),
        var(--surface-2);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(95, 196, 163, 0.2);
    animation: cfly-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes cfly-in {
    from { transform: translateY(18px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.cfly-badge {
    font-size: var(--fs-xl);
    line-height: 1;
    align-self: flex-start;
    animation: cfly-pulse 1.6s ease-in-out infinite;
}
@keyframes cfly-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}
.cfly-h {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--fs-md);
    letter-spacing: 0.04em;
    color: var(--accent);
    margin-bottom: var(--sp-1);
}
.cfly-steps {
    margin: 0;
    padding-left: 17px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text);
}
.cfly-steps b {
    color: var(--attune);
}
.cfly-x {
    position: absolute;
    top: 6px;
    right: var(--sp-2);
    background: transparent;
    border: 0;
    color: var(--text-faint);
    font-size: var(--fs-lg);
    cursor: pointer;
    padding: var(--sp-1) var(--sp-2);
}
.cfly-x:hover {
    color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
    .consent-fly, .cfly-badge { animation: none; }
}

/* --- signature link SUCCESS state ------------------------------------------ */
.link-success {
    margin-top: 14px;
    padding: 26px 22px 22px;
    text-align: center;
    background:
        radial-gradient(120% 160% at 50% 0%, rgba(74, 222, 128, 0.1), transparent 60%),
        var(--surface-2);
    border: 1px solid rgba(74, 222, 128, 0.45);
    border-radius: var(--radius-lg);
    animation: ls-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
@keyframes ls-in {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.ls-check {
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--green-soft);
    border: 2px solid var(--green);
    color: var(--green);
    font-size: var(--fs-2xl);
    font-weight: 800;
}
.ls-stamp {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--fs-3xl);
    letter-spacing: 0.22em;
    color: var(--green);
    text-shadow: 0 0 26px var(--green-glow);
}
.ls-sub {
    margin-top: 6px;
    font-size: var(--fs-base);
    color: var(--text);
}
.ls-pin {
    margin-top: var(--sp-3);
    display: inline-block;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--attune);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.3);
    border-radius: var(--radius-md);
}
.ls-pin b {
    color: var(--text);
    letter-spacing: 0.08em;
}
.ls-next {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.ls-next b {
    color: var(--green);
}
@media (prefers-reduced-motion: reduce) {
    .link-success { animation: none; }
}

/* --- combat panel: stats first (full-width, multi-column), then the gear dossier as a full-width tile
   grid so every piece is visible side-by-side instead of cut off in a narrow scrolling column --- */
.cp-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cp-side .gear-head {
    margin-bottom: 9px;
}
.cp-side .gear-sub {
    display: none;
}


/* --- snapshot mode: gold is reserved for the armed state --- */
.snap-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 5px var(--sp-3);
    cursor: pointer;
    min-height: 28px;
    transition: border-color 0.15s ease;
}
.snap-btn:hover,
.snap-btn:focus-visible {
    border-color: var(--accent);
}
.snap-armed {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--attune);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.35);
    border-radius: var(--radius-pill);
    padding: 5px var(--sp-3);
    white-space: nowrap;
}
.snap-clear {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    color: var(--text-faint);
    font-size: var(--fs-base);
    line-height: 1;
    cursor: pointer;
}
.snap-clear:hover {
    color: var(--red);
    border-color: var(--red);
}

/* --- live delta chips (vs snapshot) --- */
/* no entry animation: these re-render with identical content on every sync tick — replaying a pop
   there reads as flicker. The swap-card keeps its pop; it only (re)mounts when content changes. */
.dlt {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
}
.dlt.up {
    color: var(--green);
    background: var(--green-soft);
}
.dlt.down {
    color: var(--red);
    background: var(--red-soft);
}
.cs-v .dlt {
    margin-right: var(--sp-1);
}
@keyframes dlt-pop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .dlt { animation: none; }
}


.gd-l {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    flex-basis: 100%;
}

/* --- link-account stepper (1 enter UID → 2 set Signature → 3 verify) --- */
.lsteps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--sp-1) 0 10px;
    flex-wrap: wrap;
}
.lstep {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    opacity: 0.45;
    transition: opacity 0.25s ease;
}
.lstep.on {
    opacity: 1;
}
.lstep-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--fs-sm);
    color: var(--text-faint);
    background: var(--surface-3);
    border: 1px solid var(--border);
}
.lstep.on .lstep-n {
    color: #06211a;
    background: var(--accent);
    border-color: var(--accent);
}
.lstep-t {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
}
.lstep.on .lstep-t {
    color: var(--text);
}
.lstep-line {
    flex: 1;
    min-width: 18px;
    max-width: 70px;
    height: 1px;
    background: var(--border);
}
.lsteps-note {
    margin-top: 0;
}

/* passcode row: big copyable code + copy button */
.passrow {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.copy-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--accent);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    border-radius: var(--radius-sm);
    padding: 0 14px;
    cursor: pointer;
    transition: border-color 0.15s ease;
    min-height: 44px;
}
.copy-btn:hover,
.copy-btn:focus-visible {
    border-color: var(--accent);
}
.lc-instr {
    font-size: var(--fs-base);
    color: var(--text);
}
.lc-instr b {
    color: var(--attune);
}
.lc-temp {
    font-size: var(--fs-sm);
    color: var(--attune);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.3);
    border-radius: var(--radius-md);
    padding: 6px 10px;
}
.lc-temp b {
    color: var(--text);
}
.lc-guide {
    display: block;
    max-width: 260px;
    width: 100%;
    height: auto;
    margin: 2px auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.lc-pin {
    font-size: var(--fs-sm);
    color: var(--attune);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.3);
    border-radius: var(--radius-md);
    padding: 6px 10px;
}
.lc-pin b {
    color: var(--text);
    letter-spacing: 0.08em;
}
.lc-verify {
    margin-top: 2px;
}

.link-intro p {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--text);
}
.link-intro-sub {
    opacity: 0.72;
}
.link-intro b {
    color: var(--attune);
}
.link-intro-ad {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 10px var(--sp-3);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.3);
    border-radius: var(--radius-md);
}
.link-intro-ad p {
    margin: 0;
    font-size: var(--fs-sm);
}
.link-intro-ad-tag {
    flex: 0 0 auto;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--attune);
    background: rgba(217, 164, 65, 0.14);
    border-radius: var(--radius-pill);
    padding: 3px var(--sp-2);
    margin-top: 1px;
}

/* --- not-live indicators: honest state when stats are a last-sync snapshot --- */
.live-off,
.link-status.offline {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}
.live-off::before,
.link-status.offline::before {
    content: "●";
    color: var(--red);
    opacity: 0.75;
    margin-right: 5px;
    font-size: var(--fs-2xs);
    vertical-align: 1px;
}
/* live: a green pulsing dot so "you are LIVE" reads at a glance, mirroring the red not-live dot above. */
.link-status.live::before {
    content: "●";
    color: var(--green);
    margin-right: 5px;
    font-size: var(--fs-2xs);
    vertical-align: 1px;
    animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
    .link-status.live::before { animation: none; }
}


.gd-reread:hover:not(:disabled),
.gd-reread:focus-visible {
    border-color: var(--accent);
}
.gd-reread:disabled {
    opacity: 0.6;
    cursor: default;
}

/* --- piece-to-piece swap card (snapshot gear vs re-read gear, one slot) --- */
.swap-card {
    margin: 0 0 10px;
    padding: 10px var(--sp-3) 11px;
    background:
        radial-gradient(130% 140% at 0% 0%, rgba(217, 164, 65, 0.08), transparent 60%),
        var(--surface-3);
    border: 1px solid rgba(217, 164, 65, 0.35);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    animation: dlt-pop 0.3s ease;
}
.sw-head {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--attune);
    margin-bottom: 6px;
}
.sw-head b {
    color: var(--text);
}
.sw-wpn {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
}
.sw-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    padding: 2.5px 0;
    border-bottom: 1px dotted var(--border-soft);
}
.sw-row:last-of-type {
    border-bottom: 0;
}
.sw-k {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sw-v {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-1);
    white-space: nowrap;
}
.sw-arr {
    color: var(--text-faint);
    font-weight: 400;
}
.sw-verdict {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
}
.sw-verdict .gv-stamp {
    font-size: var(--fs-md);
}
.sw-pcts {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.swap-card.sw-multi {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
    .swap-card { animation: none; }
}


.gg-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.gg-k {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.gg-v {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--fs-md);
    color: var(--attune);
    font-variant-numeric: tabular-nums;
}
.gg-cap {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-faint);
}
.gg-item.over .gg-v {
    color: var(--red);
}
.gg-flag {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--red);
    background: var(--red-soft);
    border-radius: var(--radius-pill);
    padding: 1px var(--sp-2);
}
.sw-cap {
    margin: 6px 0 0;
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--red);
}

/* --- takeover claim UI + live-gear tag --- */
.link-claim .lc-instr b {
    color: var(--red);
}

.gear-live-tag {
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--green);
    background: var(--green-soft);
    border-radius: var(--radius-pill);
    padding: 2px var(--sp-2);
    vertical-align: 2px;
}

/* attunement perk rows in the what-if drawer */
.gcmp-perk .gcmp-k {
    color: var(--attune);
}
.gcmp-perk .gcmp-v {
    color: var(--attune);
}

@media (min-width: 1000px) {
    .cp-stats {
        columns: 2;
        column-gap: 22px;
    }
    .cp-stats .cgrp {
        break-inside: avoid;
    }
}
@media (min-width: 1360px) {
    .cp-stats {
        columns: 3;
    }
}
@media (min-width: 1720px) {
    .cp-stats {
        columns: 4;
    }
}

.cp-hist h4 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--accent);
    margin: 0 0 var(--sp-2);
}
.cp-hist-note {
    font-size: var(--fs-2xs);
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-faint);
}
.cp-hist .match-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 6px;
}
.mh-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
}
.mh-filter-l {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}
.mh-filter {
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 9px;
    max-width: 240px;
}
.mh-pager { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mh-pg {
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px var(--sp-3);
    cursor: pointer;
}
.mh-pg:hover:not(:disabled) { border-color: var(--accent, #5fc4a3); }
.mh-pg:disabled { opacity: 0.4; cursor: default; }
.mh-pg-n { font-size: var(--fs-xs); color: var(--text-faint); min-width: 84px; text-align: center; }
.mh-export {
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px var(--sp-3);
    cursor: pointer;
}
.mh-export:hover { border-color: var(--accent, #5fc4a3); }
.mh-dmg-tbl td.mh-dps { color: var(--text-faint); font-size: var(--fs-xs); }
.cp-hist .match {
    min-width: 0;
    background: var(--surface-3);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.cp-hist .match .mode {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-hist .match .dur {
    flex: none;
    margin-left: auto;
    padding-left: 6px;
    color: var(--text-faint);
    font-size: var(--fs-xs);
    white-space: nowrap;
}
.mh-wpn {
    color: var(--text);
    font-weight: 700;
}
/* Named matches are clickable -> expand the detail drawer */
.cp-hist .match.clickable {
    cursor: pointer;
}
.cp-hist .match.clickable:hover {
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.cp-hist .match.clickable.sel {
    box-shadow: inset 0 0 0 1px var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-3));
}
.cp-hist .match.clickable .mode::after {
    content: "›";
    margin-left: 6px;
    color: var(--text-faint);
    font-weight: 700;
}
/* The expanded match: opponent build + per-match damage slot, full width below the grid */
.mh-drawer {
    margin-top: var(--sp-2);
    padding: var(--sp-3) 14px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
/* Insert-only: only a freshly-opened drawer animates, never a sig-gated re-mount of the same content. */
.mh-drawer.is-new {
    animation: mh-drawer-in var(--t-fast) ease-out;
}
@keyframes mh-drawer-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
@keyframes match-row-in {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}
.cp-hist .match.is-new {
    animation: match-row-in 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .mh-drawer.is-new,
    .cp-hist .match.is-new { animation: none; }
}
.mh-drawer-h {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-base);
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--surface-3);
}
.mh-drawer-h b {
    color: var(--text);
}
.mh-drawer-res {
    font-family: var(--font-logo), sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: var(--fs-sm);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
}
.mh-drawer-res.win {
    color: var(--green);
    background: color-mix(in srgb, var(--green) 14%, transparent);
}
.mh-drawer-res.loss {
    color: var(--red);
    background: color-mix(in srgb, var(--red) 14%, transparent);
}
.mh-drawer-res.unknown {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
}
.mh-drawer-when {
    margin-left: auto;
    color: var(--text-faint);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}
.mh-drawer-x {
    flex: none;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.mh-drawer-x:hover {
    background: var(--surface-3);
    color: var(--text);
}
.mh-dmg {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px dashed var(--surface-3);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.mh-dmg.is-empty {
    color: var(--text-faint);
    font-style: italic;
}
/* Skill Damage tab (Match Linking) */
.dmg-pane { padding: 2px 0; }
.dmg-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.dmg-title { font-weight: 600; font-size: var(--fs-md, 1.05rem); color: var(--text); }
.dmg-sub { color: var(--text-muted); font-size: var(--fs-xs, 0.85rem); }
.dmg-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dmg-tbl th {
    text-align: right; font-weight: 600; color: var(--text-faint);
    padding: 5px var(--sp-2); border-bottom: 1px solid var(--surface-3);
    font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em;
}
.dmg-tbl th.dmg-nm, .dmg-tbl td.dmg-nm { text-align: left; }
.dmg-tbl td { text-align: right; padding: 6px var(--sp-2); color: var(--text); border-bottom: 1px solid var(--border-soft); }
.dmg-tbl td.dmg-nm { color: var(--text); }
.dmg-tbl tbody tr:hover { background: var(--surface-3); }
.dmg-tbl td.dmg-ex { font-weight: 700; color: var(--attune); }
.dmg-section { margin-top: 14px; border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px var(--sp-2) var(--sp-2); background: var(--surface-3); }
.dmg-section-h { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.dmg-mystic { border-left: 3px solid var(--attune); }
.dmg-mystic .dmg-section-h { color: var(--attune); }
.dmg-weapon + .dmg-weapon { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-soft); }
.dmg-weapon-name { font-size: var(--fs-xs); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.dmg-cols { display: grid; gap: var(--sp-2); margin-top: 14px; }
.dmg-cols .dmg-section { margin-top: 0; }
@media (min-width: 860px) { .dmg-cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.dmg-tbl th:not(.dmg-nm), .dmg-tbl td:not(.dmg-nm) { white-space: nowrap; }
.dmg-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dmg-mcard { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface-2, var(--surface-3)); }
.dmg-micon { width: 28px; height: 28px; border-radius: 6px; flex: 0 0 auto; object-fit: cover; }
.dmg-micon-ph { background: var(--surface-3); border: 1px solid var(--border-soft); }
.dmg-mcard-b { display: flex; flex-direction: column; min-width: 0; }
.dmg-mname { font-size: var(--fs-xs); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmg-mnums { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; }
.dmg-mnums b { color: var(--attune); font-weight: 700; }
.dmg-mhits { display: block; font-size: var(--fs-2xs); color: var(--text-muted); line-height: 1.35; margin-top: 2px; white-space: normal; font-variant-numeric: tabular-nums; }
.dmg-mhits::before { content: "per hit: "; color: var(--text-faint); }
.dmg-gbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; padding: 6px 8px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface-2, var(--surface-3)); }
.dmg-gbar-l { font-size: var(--fs-2xs); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dmg-gbar-l b { color: var(--attune); }
.dmg-ck { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.dmg-ck input { margin: 0; }
.dmg-mctrl { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.dmg-rng { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); color: var(--text-muted); }
.dmg-rng input[type="range"] { width: 78px; }
.dmg-mnote { display: block; font-size: var(--fs-2xs); color: var(--attune); margin-top: 2px; }
@media (max-width: 520px) { .dmg-mgrid { grid-template-columns: 1fr; } }
.dmg-rmulti { cursor: pointer; }
.dmg-rmulti:hover { background: var(--surface-3); }
.dmg-exp { display: inline-block; width: 12px; margin-right: 2px; color: var(--text-faint); transition: transform .15s ease; }
.dmg-rmulti.open .dmg-exp, .dmg-other-h.open .dmg-exp { transform: rotate(90deg); }
.dmg-hcount { font-size: var(--fs-2xs); color: var(--text-muted); font-weight: 400; }
.dmg-other-h { cursor: pointer; }
.dmg-other-h > td { color: var(--text-muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; padding-top: 8px; }
.dmg-other-h:hover { background: var(--surface-3); }
.dmg-tbl tr.dmg-other > td { font-size: var(--fs-2xs); color: var(--text-muted); padding-top: 3px; padding-bottom: 3px; }
.dmg-tbl tr.dmg-hit > td { background: rgba(0, 0, 0, .14); color: var(--text-muted); }
.dmg-tbl td.dmg-hit-nm { padding-left: 26px; font-size: var(--fs-2xs); color: var(--text-faint); }
.dmg-note { font-size: var(--fs-2xs); color: var(--text-faint); margin-top: 10px; line-height: 1.5; }

.mh-dmg-tbl {
    width: 100%;
    border-collapse: collapse;
}
.mh-dmg-tbl th {
    text-align: right;
    font-weight: 600;
    color: var(--text-faint);
    padding: 3px var(--sp-2);
    border-bottom: 1px solid var(--surface-3);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mh-dmg-tbl th.mh-dr-nm,
.mh-dmg-tbl td.mh-dr-nm {
    text-align: left;
}
.mh-dmg-tbl td {
    text-align: right;
    padding: 5px var(--sp-2);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.mh-dmg-tbl tr + tr td {
    border-top: 1px solid color-mix(in srgb, var(--surface-3) 55%, transparent);
}
.mh-dr-res {
    display: inline-block;
    width: 15px;
    margin-right: 6px;
    font-weight: 700;
    text-align: center;
}
.mh-dr-res.win {
    color: var(--green);
}
.mh-dr-res.loss {
    color: var(--red);
}
/* Per-move breakdown (move x hit count - damage), expandable under each player's name */
.mh-sk { display: inline; }
.mh-sk > summary { cursor: pointer; list-style: none; display: inline; }
.mh-sk > summary::-webkit-details-marker { display: none; }
.mh-sk > summary::after { content: "▾"; font-size: var(--fs-2xs); color: var(--text-faint); margin-left: 5px; vertical-align: 1px; }
.mh-sk[open] > summary::after { content: "▴"; }
.mh-sk-tag { font-size: var(--fs-2xs); color: var(--text-faint); margin-left: 6px; }
.mh-sk-list { margin: 6px 0 var(--sp-1) 21px; display: flex; flex-direction: column; gap: 2px; }
.mh-sk-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.mh-sk-nm { color: var(--text); }
.mh-sk-ct { color: var(--text-faint); }
.mh-sk-dm { color: var(--text); font-weight: 600; }
/* Damage composition (Critical / Normal / Affinity / Abrasion %) - the in-game donut, as labelled bars */
.mh-comp { margin: 2px 0 var(--sp-2); display: flex; flex-direction: column; gap: 3px; }
.mh-comp-h { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 1px; }
.mh-comp-row { display: grid; grid-template-columns: 72px 1fr 34px; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.mh-comp-k { color: var(--text-faint); }
.mh-comp-k.CRI_DMG { color: var(--gold-strong); }
.mh-comp-k.BASH_DMG { color: #e08a4a; }
.mh-comp-k.ORD_DMG { color: var(--text); }
.mh-comp-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.mh-comp-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.mh-comp-v { text-align: right; color: var(--text); font-weight: 600; }
/* Live post-match summary card (auto-shows ~60s after a match while linked) */
.post-match-summary {
    margin: 0 0 var(--sp-3);
    padding: 10px var(--sp-3);
    border: 1px solid color-mix(in srgb, var(--green) 35%, var(--surface-3));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--green) 8%, transparent);
}
/* Insert-only: animate only when the card is genuinely new, never on element recreation. */
.post-match-summary.is-new {
    animation: pms-in 0.22s ease;
}
.pms-h {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--sp-2);
    color: var(--text);
}
.pms-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: pms-pulse 1.6s infinite;
}
.pms-vs {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
}
.pms-timer {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
    font-weight: 600;
}
/* Smooth shrinking countdown bar (transform only, updated once per second from --pms-frac) - replaces the
   strobing number as the primary time cue. */
.pms-bar {
    position: relative;
    height: 3px;
    margin-top: var(--sp-2);
    border-radius: 2px;
    background: color-mix(in srgb, var(--green) 18%, transparent);
    overflow: hidden;
}
.pms-fill {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(var(--pms-frac, 1));
    background: var(--green);
    transition: transform 1s linear;
}
@keyframes pms-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pms-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
    .post-match-summary.is-new { animation: none; }
    .pms-dot { animation: none; }
    .pms-fill { transition: none; }
}
/* Head-to-head record vs the opponent: drawer line + roster-card chip */
.mh-h2h {
    margin: 2px 0 10px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.mh-h2h b {
    color: var(--text);
}
.mh-h2h-rec {
    font-family: var(--font-logo), sans-serif;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.02em;
    padding: 1px var(--sp-2);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.opp-card-h .opp-lk {
    margin-left: auto;
}
.opp-h2h {
    font-family: var(--font-logo), sans-serif;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--attune);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--attune) 13%, transparent);
    white-space: nowrap;
    align-self: center;
}


.gg-raw {
    font-size: var(--fs-2xs);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* --- Match Linking tabs + account accordion --- */
.lk-tabs {
    display: flex;
    gap: 6px;
    margin: 14px 0 14px;
    border-bottom: 1px solid var(--border);
}

.lk-tab-n {
    margin-left: var(--sp-2);
    background: var(--accent);
    color: #06211a;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    padding: 1px var(--sp-2);
    vertical-align: 1px;
}

.acct-id {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.acct-rank b {
    font-weight: 800;
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
    opacity: 0.6;
    margin-right: 5px;
}
.acct-rank.neutral {
    color: var(--text-muted);
    background: var(--surface-3);
    border-color: var(--border);
}
.acct-tools {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
/* Unlink lives in the expanded detail now (not the header next to Go Live) - small, muted, deliberate. */
.acct-mgmt {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}
.acct-unlink {
    background: transparent;
    color: var(--text-faint);
    border: none;
    padding: var(--sp-1) 6px;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 0.15s;
}

.acct-detail .combat-panel {
    border: 0;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    margin: var(--sp-2) 0 0;
}
@media (prefers-reduced-motion: reduce) {
    .acct-chev { transition: none; }
}

/* account detail sub-tabs (Overview | Matches) */
.acct-subtabs {
    display: flex;
    gap: var(--sp-1);
    margin: 10px 0 var(--sp-1);
    border-bottom: 1px solid var(--border-soft);
}

.sub-tab .lk-tab-n {
    margin-left: 6px;
}
/* Sub-pane cross-fade: a freshly-mounted pane starts transparent and fades in (opacity only - never animate
   height:auto). Only one pane is mounted in .acct-pane-host at a time. */
.acct-pane-host > .sub-pane {
    opacity: 0;
    transition: opacity var(--t-fast);
}
.acct-pane-host > .sub-pane.is-shown {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .acct-pane-host > .sub-pane { opacity: 1; transition: none; }
}
.acct-detail .cp-hist {
    border-top: 0;
    padding-top: var(--sp-1);
}

/* match rows that link to the opponent profile */
a.match.mh-link {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}
a.match.mh-link:hover,
a.match.mh-link:focus-visible {
    border-color: var(--accent);
}
.mh-style {
    color: var(--text-faint);
    font-weight: 500;
    font-size: var(--fs-xs);
}

/* custom-room / match roster strip */
.cp-room {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background:
        radial-gradient(130% 150% at 0% 0%, rgba(74, 222, 128, 0.08), transparent 60%),
        var(--surface-3);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: var(--radius-md);
}

.cp-room-m {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 3px 11px;
    text-decoration: none;
}
a.cp-room-m:hover,
a.cp-room-m:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

/* Room / Match sub-tab pane */
.room-pane {
    padding: var(--sp-2) 2px var(--sp-1);
}
.room-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--fs-md);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.room-status .room-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-faint);
}
.room-status.on {
    color: var(--green);
}
.room-status.on .room-dot {
    background: var(--green);
    animation: livepulse 1.8s ease-out infinite;
}
.room-roster {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
    .room-status.on .room-dot { animation: none; }
}

/* opponent loadout cards (Room / Match pane) - looked-up build + inner ways + attunements */
.opp-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--sp-2);
}

.opp-card:only-child { max-width: none; } /* 1v1: the lone opponent spans the full page width */
.opp-card-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.opp-lk {
    font-size: var(--fs-xs);
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.opp-lk:hover {
    text-decoration: underline;
}
.opp-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}
.opp-rank {
    font-weight: 800;
    font-size: var(--fs-2xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: var(--radius-pill);
    padding: 2px 9px;
}
.opp-guild,
.opp-lvl {
    font-size: var(--fs-2xs);
    color: var(--text-faint);
    background: var(--surface-2);
    border-radius: var(--radius-pill);
    padding: 2px 9px;
}
.opp-row {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: var(--sp-2);
    padding: 3px 0;
    border-top: 1px dotted var(--border-soft);
    font-size: var(--fs-sm);
}
.opp-k {
    color: var(--text-faint);
    text-transform: uppercase;
    font-size: var(--fs-2xs);
    letter-spacing: 0.08em;
    padding-top: 2px;
}
.opp-v {
    color: var(--text);
    font-weight: 600;
}
.opp-loading {
    font-size: var(--fs-sm);
}

/* opponent attunement chips */
.opp-att-row {
    align-items: start;
}
.opp-atts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}


/* opponent inner-way / martial-skill chips (with icons) */
.opp-grid-row {
    align-items: start;
}
.opp-iws {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.opp-iw {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 2px 9px 2px 3px;
}
.opp-iw-img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}
/* full-text attunements - wrap, no truncation */
.opp-att {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--attune);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.22);
    border-radius: var(--radius-sm);
    padding: var(--sp-1) 9px;
    line-height: 1.4;
    cursor: help;
    display: block;
    width: 100%;
    white-space: normal;
}
.opp-att-row .opp-atts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 5px;
    align-items: start;
}

/* inactive (PvE) attunement - dimmed with a tag */
.opp-att.inactive {
    color: var(--text-faint);
    background: var(--surface-2);
    border-color: var(--border);
    opacity: 0.7;
}
.opp-att-off {
    margin-left: 6px;
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 var(--sp-1);
    vertical-align: 1px;
}

/* "your reader is stale" prompt - shown inside a live account whose loaded reader is behind the deployed version */
.reader-stale {
    margin: 0 0 var(--sp-3);
    padding: 9px var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--attune);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.32);
    border-radius: var(--radius-md);
}
.reader-stale strong { color: var(--text); font-weight: 700; }
.reader-stale em { font-style: normal; font-weight: 700; color: var(--attune); }

/* ════════════════════════════════════════════════════════════════
   COMBAT DOSSIER — refined combat-stats panel (frontend-design pass).
   Premium character-sheet feel: the DPS reads as a hero number, cards
   carry gradient edges + depth, sections get dossier rules. Overrides
   the base combat-panel rules above (later-in-source wins).
   ════════════════════════════════════════════════════════════════ */
.combat-panel {
    margin: 6px 0 var(--sp-1);
    padding: var(--sp-5) 22px 18px;
    background:
        radial-gradient(150% 80% at 0% -10%, rgba(95, 196, 163, 0.09), transparent 55%),
        radial-gradient(120% 90% at 100% 0%, rgba(217, 164, 65, 0.06), transparent 50%),
        linear-gradient(180deg, var(--surface), var(--bg));
    border: 1px solid #262430;
    border-radius: var(--radius-card);
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 60px -30px rgba(0, 0, 0, 0.85);
    overflow: hidden;
}
.combat-panel > * { position: relative; }

/* ── hero stat cards ──────────────────────────────────────────── */
.combat-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: var(--sp-4);
}
.chero {
    padding: var(--sp-3) 18px var(--sp-3);
    background: linear-gradient(160deg, var(--surface-3), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-fast), transform var(--t-fast);
}
.chero:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.chero::after {
    content: "";
    position: absolute;
    left: 0; top: var(--sp-3); bottom: var(--sp-3);
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
}
.chero-v {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-2xl);
    line-height: 1;
    color: transparent;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #ffffff 30%, #c3d6cf);
    -webkit-background-clip: text;
    background-clip: text;
}
.chero-rec .chero-v {
    color: transparent;
    background: linear-gradient(180deg, #ffdc84, #d39a32);
    -webkit-background-clip: text;
    background-clip: text;
}
.chero-sep {
    color: var(--text-faint);
    font-weight: 500;
    margin: 0 var(--sp-1);
    -webkit-text-fill-color: var(--text-faint);
}
.chero-l {
    margin-top: var(--sp-2);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    font-weight: 600;
}

/* ── stat groups: dossier section rules ───────────────────────── */
.cgrp {
    margin-bottom: 11px;
}

.cstat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.028);
    padding: 3px 5px;
    border-radius: 5px;
    transition: background var(--t-fast);
}
.cstat:hover { background: rgba(95, 196, 163, 0.07); }
.cs-k {
    color: var(--text-muted);
}
.cs-v {
    font-family: var(--font-logo), system-ui, sans-serif;
    color: var(--text);
    font-weight: 700;
    font-size: var(--fs-base);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
}
.gold-eff {
    color: var(--attune);
    font-size: var(--fs-xs);
    font-weight: 700;
    margin-left: 6px;
    background: var(--attune-soft);
    border-radius: 5px;
    padding: 1px 6px;
}

/* ── gear: DPS hero + gold strip + polished tiles ─────────────── */
.cp-side .gear-panel {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}
.cp-side .gear-panel .combat-title {
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
}
.gear-head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.gear-dps {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 var(--sp-3);
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-md);
}
.gear-dps .gd-l {
    flex-basis: 100%;
    font-family: var(--font-logo), sans-serif;
    font-size: var(--fs-2xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 2px;
}
.gd-row {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    flex: 1 1 150px;
    padding: var(--sp-3) 18px;
    background: linear-gradient(160deg, #1c1a27, #121118);
    border: 1px solid #2a2738;
    border-radius: var(--radius-card);
}
.gd-k {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-logo), sans-serif;
}
.gd-v {
    font-family: var(--font-logo), sans-serif;
    font-weight: 700;
    font-size: var(--fs-2xl);
    color: transparent;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
    line-height: 0.9;
    background: linear-gradient(180deg, #bde6d6, var(--accent-strong));
    -webkit-background-clip: text;
    background-clip: text;
}
.gd-reread {
    margin-left: auto;
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 5px 11px;
    min-height: 30px;
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease;
    flex-basis: 100%;
    margin-top: 2px;
}
.gd-note { flex-basis: 100%; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-faint); }
.gd-note b { color: var(--text-muted); font-weight: 700; }
.gear-gold {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 11px 15px;
    background: rgba(217, 164, 65, 0.045);
    border: 1px solid rgba(217, 164, 65, 0.2);
    border-radius: var(--radius-card);
}
.gear-gold .gd-l {
    flex-basis: 100%;
    font-size: var(--fs-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(217, 164, 65, 0.65);
    margin-bottom: 1px;
}
/* Gear optimizer: upgrade-priority card (headroom per slot, weakest highlighted). */
.gear-opt {
    margin: 0 0 14px;
    padding: 11px 15px 9px;
    background: rgba(126, 178, 255, 0.05);
    border: 1px solid rgba(126, 178, 255, 0.22);
    border-radius: var(--radius-card);
}
.gear-opt .gd-l {
    display: block;
    font-size: var(--fs-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(126, 178, 255, 0.7);
    margin-bottom: 6px;
}
.gear-opt .go-verdict {
    margin: 0 0 10px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text);
}
.gear-opt .go-verdict b { color: #9ec7ff; }
.gear-opt .go-rows { display: flex; flex-direction: column; gap: 4px; }
.gear-opt .go-row {
    display: grid;
    grid-template-columns: 82px 1fr 52px 62px;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
}
.gear-opt .go-slot { color: var(--text-muted); }
.gear-opt .go-bar {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.gear-opt .go-bar > i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(126, 178, 255, 0.5), #7eb2ff);
}
.gear-opt .go-pct { font-family: var(--font-mono); color: #9ec7ff; text-align: right; }
.gear-opt .go-cur { font-family: var(--font-mono); color: var(--text-faint); text-align: right; font-size: var(--fs-2xs); }
.gear-opt .go-row.weak .go-slot { color: var(--text); font-weight: 700; }
.gear-opt .go-row.weak .go-bar > i { background: linear-gradient(90deg, rgba(255, 168, 76, 0.55), #ffa84c); }
.gear-opt .go-row.weak .go-pct { color: #ffa84c; }
/* Owned upgrades (V2): spares from the linked owner's own bag that beat what they have equipped. */
.gear-opt.gear-own {
    background: rgba(122, 224, 168, 0.05);
    border-color: rgba(122, 224, 168, 0.24);
}
.gear-opt.gear-own .gd-l { color: rgba(122, 224, 168, 0.75); }
.gear-opt.gear-own .go-verdict b { color: #8fe3b4; }
.gear-opt .go-row.own { grid-template-columns: 82px 1fr 52px; }
.gear-opt .go-own-name {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gear-opt .go-row.own .go-pct { color: #8fe3b4; }
.cp-side .gear-grid {
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 10px;
}
.cp-side .gslot {
    padding: var(--sp-3) 14px;
    gap: 9px;
    background: linear-gradient(165deg, var(--surface-3), var(--surface));
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius-card);
    transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.gslot-name {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-base);
    letter-spacing: 0.02em;
}
.gslot-meta {
    font-size: var(--fs-2xs);
    color: var(--text-faint);
    font-weight: 600;
}
.gslot-att {
    margin-left: auto;
    align-self: center;
    font-family: var(--font-logo), system-ui, sans-serif;
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--attune);
    background: var(--attune-soft);
    border-radius: var(--radius-pill);
    padding: 1px var(--sp-2);
}
.gslot-roll {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: #b2c0ba;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-pill);
    padding: 2px var(--sp-2);
    white-space: nowrap;
}
.gslot-cta {
    font-size: var(--fs-2xs);
    color: var(--accent);
    font-weight: 600;
    opacity: 0.72;
    margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════
   MATCH BREAKDOWN - dossier-style PvP analytics (the "Breakdown" tab of the Match Linking account detail)
   ════════════════════════════════════════════════════════════════ */
.mbreak-page { width: 100%; }
.mb-page-empty { padding: 28px var(--sp-2); text-align: center; }

.mbreak > .mbreak-head, .mbreak > .mb-hero, .mbreak > .mb-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .mbreak { grid-template-columns: 1fr; } }

.mb-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.mb-rec { display: flex; align-items: baseline; gap: 5px; font-family: var(--font-mono); font-weight: 800; font-size: var(--fs-3xl); line-height: 0.9; }
.mb-rec .mb-w { color: var(--green); }
.mb-rec .mb-l { color: var(--red); }
.st-v .lm-w { color: var(--green); font-weight: 700; }
.st-v .lm-l { color: var(--red); font-weight: 700; }

.mb-wrwrap { flex: 1; min-width: 200px; }
.mb-wr-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.mb-wr-top span { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.mb-wr-top b { font: 700 var(--fs-md) var(--font-mono); color: var(--text); }
.mb-streaks { display: flex; gap: 14px; margin-top: var(--sp-2); font: 500 var(--fs-xs) var(--font-mono); color: var(--text-faint); }
.mb-track { display: block; height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-pill); overflow: hidden; }
.mb-track.lg { height: 9px; }
.mb-track > i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--attune); transition: width var(--t-med); }
.mb-track.lg > i { background: linear-gradient(90deg, #00b85a, var(--green)); }
.mb-track > i.loss { background: var(--red); }
.mb-h2h { display: flex; height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-pill); overflow: hidden; }
.mb-h2h > i { display: block; height: 100%; }
.mb-h2h > i.w { background: var(--green); }
.mb-h2h > i.l { background: var(--red); }
.mb-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--sp-4); padding: 11px 0; border-top: 1px solid var(--surface-3); border-bottom: 1px solid var(--surface-3); }
.mb-fperiod { display: inline-flex; gap: 3px; background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-pill); padding: 3px; }
.mb-fpill { font: 600 var(--fs-xs) var(--font); color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-pill); padding: 5px var(--sp-3); cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.mb-fpill:hover { color: var(--text); }
.mb-fpill.is-on { background: var(--attune); color: #1a1206; }
.mb-fchips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.mb-fchip { display: inline-flex; align-items: center; gap: var(--sp-2); font: 600 var(--fs-xs) var(--font-mono); color: var(--text); background: var(--attune-soft); border: 1px solid rgba(217, 164, 65, 0.3); border-radius: var(--radius-pill); padding: var(--sp-1) 5px var(--sp-1) var(--sp-3); }
.mb-fx { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.08); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1; cursor: pointer; }
.mb-fx:hover { background: var(--red); color: #fff; }
.mb-fhint { font: 500 var(--fs-xs) var(--font); font-style: italic; color: var(--text-faint); }
.mb-row.mb-click { cursor: pointer; border-radius: 6px; transition: background var(--t-fast); }
.mb-row.mb-click:hover { background: rgba(255, 255, 255, 0.05); }
.mb-grp { display: flex; flex-direction: column; gap: 10px; }
.mb-grp h4 { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--surface-3); }
.mb-meta { margin-left: auto; font: 500 var(--fs-2xs) var(--font-mono); color: var(--text-faint); letter-spacing: 0; text-transform: none; }
.mb-crit { margin-left: auto; font: 700 var(--fs-sm) var(--font-mono); color: var(--attune); letter-spacing: 0; text-transform: none; }
.mb-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mb-form-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px; background: linear-gradient(165deg, var(--surface-3), var(--surface)); border: 1px solid #242231; border-radius: var(--radius-card); }
.mb-form-k { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.mb-form-v { font: 700 var(--fs-lg) var(--font-mono); color: var(--text); }
.mb-form-p { font: 600 var(--fs-xs) var(--font-mono); color: var(--green); }
.mb-stack { display: flex; height: 15px; border-radius: 7px; overflow: hidden; background: rgba(255, 255, 255, 0.04); }
.mb-seg { height: 100%; transition: width var(--t-med); }
.mb-seg.mb-crit { background: var(--attune); }
.mb-seg.mb-norm { background: #44424e; }
.mb-seg.mb-aff { background: #45c0dd; }
.mb-seg.mb-abr { background: var(--brand); }
.mb-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font: 500 var(--fs-xs) var(--font-mono); color: var(--text-muted); }
.mb-pies { display: flex; flex-wrap: wrap; gap: 36px; justify-content: center; padding: var(--sp-1) 0 2px; }
.mb-pie-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mb-pie { position: relative; width: 96px; height: 96px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.mb-pie-empty { background: rgba(255, 255, 255, 0.05); }
.mb-pie-hole { position: absolute; inset: 26%; border-radius: 50%; background: #100f15; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.mb-pie-hole b { font: 800 var(--fs-lg) var(--font-mono); color: var(--attune); line-height: 1; }
.mb-pie-hole i { font: 600 var(--fs-2xs) var(--font); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-top: 1px; }
.mb-pie-lbl { font: 600 var(--fs-xs) var(--font); color: var(--text); }
.mb-pie-sub { font: 500 var(--fs-2xs) var(--font-mono); color: var(--text-faint); }
.mb-leg { display: inline-flex; align-items: center; gap: 6px; }
.mb-leg b { color: var(--text); }
.mb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }
.mb-dot.mb-crit { background: var(--attune); }
.mb-dot.mb-norm { background: #44424e; }
.mb-dot.mb-aff { background: #45c0dd; }
.mb-dot.mb-abr { background: var(--brand); }
.mb-rows { display: flex; flex-direction: column; gap: 9px; }
.mb-row { display: grid; grid-template-columns: minmax(72px, 1.3fr) 2fr auto; align-items: center; gap: var(--sp-3); }
.mb-row-k { font-size: var(--fs-sm); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-row-v { font: 600 var(--fs-sm) var(--font-mono); color: var(--text-muted); text-align: right; white-space: nowrap; }
.mb-crow { display: flex; flex-direction: column; gap: 5px; padding: var(--sp-1) 6px; border-radius: 6px; transition: background var(--t-fast); }
.mb-crow.mb-click { cursor: pointer; }
.mb-crow.mb-click:hover { background: rgba(255, 255, 255, 0.05); }
.mb-crow-name { font: 600 var(--fs-sm) var(--font); color: var(--text); line-height: 1.3; }
.mb-crow-stat { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.mb-empty { margin: 0; font-size: var(--fs-sm); }
@media (max-width: 640px) {
    .mb-rec { font-size: var(--fs-2xl); }
    .mb-row { grid-template-columns: minmax(64px, 1.2fr) 1.6fr auto; gap: 9px; }
    /* the lookup gate: field + button stack full-width so both stay easy to tap */
    .lookup-field { flex-basis: 100%; }
    .lookup-search button { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 2 - WUXIA / JIANGHU TREATMENT LAYER
   Visual-only restyle of the SHARED component classes (cards, headers, dividers,
   buttons, pills, table, nav, motion). Appended last so it wins over the base
   rules above, exactly like the existing dossier passes in this file. No class is
   renamed/removed; no layout, markup, content, or JS is touched.
   Principle: refined ink-and-brush martial-arts world - parchment text on layered
   ink panels, gilt/jade hairlines, brush-stroke section marks and dividers, the
   purple/gold brand woven through with a calm, deliberate hand.
   ════════════════════════════════════════════════════════════════════════════ */

/* ---- atmosphere: a touch more depth in the ink-wash mist + a faint paper grain --
   layered, fixed, gradient-only (no image assets). Adds a vertical "hanging scroll"
   light at the very top so every page reads as ink on mounted paper. */
body {
    margin: 0;
    background:
        radial-gradient(1000px 620px at 12% -8%, rgba(95, 196, 163, 0.09), transparent 60%),
        radial-gradient(950px 480px at 92% 2%, rgba(217, 164, 65, 0.08), transparent 55%),
        radial-gradient(900px 680px at 50% 118%, rgba(95, 196, 163, 0.06), transparent 60%),
        radial-gradient(720px 420px at 98% 96%, rgba(167, 139, 250, 0.055), transparent 60%),
        linear-gradient(180deg, rgba(217, 164, 65, 0.05), transparent 260px),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font: var(--fs-base)/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}
/* ultra-faint paper grain - a fixed, GPU-cheap repeating wash that lives behind
   everything and never intercepts pointer events */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        repeating-linear-gradient(94deg, transparent 0 2px, rgba(255, 255, 255, 0.009) 2px 3px),
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.06) 3px 4px);
    mix-blend-mode: soft-light;
}

/* ---- shared serif voice for in-card headings: h2 already serif; nudge the
   tracking + give it the warm parchment weight balance the brand uses ---- */
h2 {
    margin: 0 0 var(--sp-1);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ════════ MOTION: one orchestrated page-load reveal ════════
   A single staggered rise on the main content blocks. Transform/opacity only,
   GPU-friendly, and fully disabled under reduced-motion (block below). Each top
   surface uses the same keyframe with an increasing delay so the page "unrolls"
   like a scroll. Gated to a fresh view mount: route() sets #app.fresh-view and
   clears it once the reveal ends (app.js), so in-place refreshes (live-feed paints,
   filter updates, poll ticks) that re-insert nodes never replay the entrance.
   main.hub-main > section is the static hub page (outside #app) and reveals on its
   own page load. */
@keyframes wx-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
    #app.fresh-view .pprofile > .phero,
    #app.fresh-view .pprofile > .pactions,
    #app.fresh-view .pprofile > .pbento,
    #app.fresh-view .pprofile > .matches-link,
    #app.fresh-view .page-head,
    #app.fresh-view .lb-filters,
    #app.fresh-view .lb-wrap,
    #app.fresh-view .lb-tiers,
    #app.fresh-view .lookup-hero,
    #app.fresh-view .lk-tabs,
    #app.fresh-view .linked-list > .acct,
    main.hub-main > section {
        animation: wx-rise var(--t-slow) var(--ease-brush) both;
    }
    #app.fresh-view .pprofile > .pactions { animation-delay: 0.05s; }
    #app.fresh-view .pprofile > .pbento { animation-delay: 0.1s; }
    #app.fresh-view .pprofile > .matches-link { animation-delay: 0.16s; }
    #app.fresh-view .lb-filters { animation-delay: 0.05s; }
    #app.fresh-view .lb-tiers { animation-delay: 0.08s; }
    #app.fresh-view .lb-wrap { animation-delay: 0.12s; }
    /* accordion accounts unroll one after another */
    #app.fresh-view .linked-list > .acct:nth-child(2) { animation-delay: 0.05s; }
    #app.fresh-view .linked-list > .acct:nth-child(3) { animation-delay: 0.1s; }
    #app.fresh-view .linked-list > .acct:nth-child(4) { animation-delay: 0.15s; }
    #app.fresh-view .linked-list > .acct:nth-child(n + 5) { animation-delay: 0.2s; }
}

/* ════════ CARDS - refined ink/parchment scroll panels ════════
   A gilt hairline border, a soft brushed top edge (a fading gold/jade stroke
   drawn with a pseudo-element so it reads like ink bleeding into paper), and
   layered ink depth. The brushed edge is positioned/contained per-card so it
   never disturbs layout. */

/* generic content sections (Logs, lookup landing, admin) get the scroll edge */
section,
.pcard,
.armory {
    position: relative;
    border-color: var(--border);
    box-shadow: var(--shadow-scroll);
}
/* the brushed gilt top edge: a thin, center-weighted gold stroke that fades at the
   ends like a dry brush lifting off paper. inset so rounded corners stay clean. */
section::before,
.pcard::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--brush-gold) 22%, var(--brush-gold) 78%, transparent);
    opacity: 0.55;
}

/* the player-profile dossier cards already carry their own gradient/shadow chrome
   from the earlier pass - give them the same gilt edge + a slightly warmer hairline
   without re-doing their backgrounds */
.pprofile .pcard {
    padding: var(--sp-3) 18px;
    border: 1px solid #262430;
    border-radius: var(--radius-card);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 60px -30px rgba(0, 0, 0, 0.85);
    background:
        radial-gradient(150% 80% at 0% -10%, rgba(95, 196, 163, 0.06), transparent 55%),
        linear-gradient(180deg, var(--surface), var(--bg));
    position: relative;
    border-color: #2a2533;
}
.pprofile .pcard::before {
    content: "";
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--brush-gold) 24%, var(--brush-gold) 76%, transparent);
    opacity: 0.5;
}

/* combat dossier + match breakdown: brushed edge in the brand violet, since these
   panels already lean violet/gold in their gradients */
.combat-panel,
.mbreak {
    border-color: #2a2636;
}
.combat-panel::after,
.mbreak::after {
    content: "";
    position: absolute;
    left: var(--sp-5);
    right: var(--sp-5);
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--brush-jade) 24%, var(--brush-gold) 76%, transparent);
    opacity: 0.45;
}

/* cgrp is an inner stat group (no panel of its own) - leave its background, but
   warm its section rule (handled in the headers block below) */

/* the hero panel: a corner ink flourish (a soft quarter-arc of brand light in the
   far corner) layered behind content, plus a gilt hairline */
.phero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-6);
    margin: 0 0 var(--sp-4);
    box-shadow: var(--shadow-card);
    background:
        radial-gradient(
            120% 160% at 0% 0%,
            var(--accent-glow),
            transparent 42%
        ),
        linear-gradient(120deg, var(--accent-soft), var(--surface) 58%);
    border-color: var(--border-hover);
}

.pprofile .phero::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(90deg, transparent, var(--brush-gold) 26%, var(--brush-jade) 74%, transparent);
    opacity: 0.5;
}

/* search result cards on the lookup landing - quiet scroll tiles with a gilt edge */
.card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 14px;
    border-radius: var(--radius-md);
    transition: border-color var(--t-med), transform var(--t-med), box-shadow var(--t-med);
    position: relative;
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
}
.card::before {
    content: "";
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--brush-gold) 30%, var(--brush-gold) 70%, transparent);
    opacity: 0;
    transition: opacity var(--t-med);
}
.card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -22px rgba(217, 164, 65, 0.4), var(--shadow-soft);
}
.card:hover::before {
    opacity: 0.7;
}

/* ════════ SECTION HEADERS / TITLES - the signature brush-mark label ════════
   A short vertical jade-to-gold brush stroke before the text reads as a single
   downward sword-stroke of ink. Refined tracking, parchment colour. Applied to
   the shared title classes; the dossier passes already gave several an accent dot
   + fading rule, so here we replace the dot with a richer two-tone brush bar and
   warm the trailing rule from cold violet to a gilt ink-wash. */

/* generic uppercase section subheads (Logs, lookup landing, etc.) */
h3 {
    margin: 0 0 var(--sp-3);
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 9px;
}
h3::before {
    content: "";
    flex: none;
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), var(--attune));
}

.link-intro-h::before {
    display: none;
}
/* don't double the mark where a more specific header treatment already draws one
   (the .pcard h3 dossier rule + the combat/breakdown titles below) */
.pcard h3::before,
.pprofile .pcard h3::before {
    width: 3px;
    height: 13px;
    margin-right: 0;
    background: linear-gradient(180deg, var(--accent), var(--attune));
    border-radius: 2px;
}
/* the dossier h3 trailing line: warm it to a gilt ink-wash that fades like a brush */
.pprofile .pcard h3 {
    align-items: center;
    font-family: var(--font-logo), sans-serif;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 var(--sp-3);
    gap: 9px;
}
.pprofile .pcard h3::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 11px;
    background: linear-gradient(90deg, var(--hairline), transparent);
}

/* combat panel + match breakdown titles: a two-tone brush bar leads the Rajdhani
   label; a gilt rule trails it to the panel edge */
/* ONE flagship dossier-title treatment, shared by the combat panel and the match
   breakdown: Cormorant display, brush-bar lead. (Was two competing treatments:
   Rajdhani-uppercase combat title vs Cormorant mbreak title.) */
.combat-title,
.mbreak-title {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-xl);
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text);
    line-height: 1;
}
.combat-title::before,
.mbreak-title::before {
    content: "";
    flex: none;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), var(--attune));
    box-shadow: 0 0 9px var(--accent-glow);
}

/* cgrp stat-group heads: swap the cold dot for the jade/gold brush bar + gilt rule */
.cgrp h4 {
    display: flex;
    align-items: center;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin: 0 0 5px;
    font-family: var(--font-logo), sans-serif;
    font-weight: 700;
    gap: 0;
}
.cgrp h4::before {
    content: "";
    width: 3px;
    height: 12px;
    margin-right: 9px;
    background: linear-gradient(180deg, var(--accent), var(--attune));
    border-radius: 2px;
}
.cgrp h4::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 10px;
    background: linear-gradient(90deg, var(--hairline), transparent);
}

/* armory inner-section labels (Weapons / Inner Ways / Mystic / Gear) */
.pprofile .arm-label::before {
    content: "";
    flex: none;
    width: 3px;
    height: 12px;
    margin-right: 9px;
    background: linear-gradient(180deg, var(--accent), var(--attune));
    border-radius: 2px;
}
.pprofile .arm-label::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 11px;
    background: linear-gradient(90deg, var(--hairline), transparent);
}

/* ════════ DIVIDERS - brush-stroke / ink-wash rules ════════
   Plain solid hairlines that act as section dividers become center-weighted
   gradients that fade at both ends, like a brush drawn across paper. Done by
   turning the existing 1px border into a transparent border + a layered linear
   gradient on the element's box, so no layout shifts. */

/* combat-panel + match-breakdown head underlines: gilt brush rule */
.combat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid #1e1c26;
    border-bottom-color: transparent;
    background-image: linear-gradient(90deg, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 1px;
}
.mbreak-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid #1e1c26;
    border-bottom-color: transparent;
    background-image: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 1px;
}

/* the Match-History link card divider (cp-hist top rule) -> ink-wash */
.cp-hist {
    margin-top: var(--sp-3);
    padding-top: 10px;
    border-top: 1px solid var(--border);
    border-top-color: transparent;
    background-image: linear-gradient(90deg, transparent, var(--border-hover) 15%, var(--border-hover) 85%, transparent);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 1px;
}

/* Match-Linking tab strip + account sub-tab strip: replace the flat 1px underline
   rule with a long ink-wash that fades to nothing at both ends */
.lk-tabs,
.acct-subtabs {
    border-bottom-color: transparent;
    background-image: linear-gradient(90deg, transparent, var(--border-hover) 8%, var(--border-hover) 70%, transparent);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 1px;
}

/* the passcode / link-success dashed rules + #claimsigbox keep their dashed look
   but warm to the gilt hairline so the whole link flow reads on-brand */
#claimsigbox {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: flex-start;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    width: 100%;
    border-top-color: var(--hairline);
}

/* ════════ BUTTONS - elegant wuxia controls ════════
   Primary (accent-filled) controls keep the brand violet fill but gain a refined
   lift + soft gold-edged glow on hover, so they feel like a pressed seal rather
   than a flat web button. Ghost/outline controls fill with an ink wash on hover.
   The Start/Stop tracking CTAs are handled separately below and stay green/red. */

/* primary filled controls (lookup, compare, save, refresh, calc CTA) */
.lookup-search button,
.cmp-bar button,
.set-save,
.cache-refresh,
.calc-btn {
    position: relative;
    box-shadow: 0 3px 12px -4px var(--accent-glow);
    transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.lookup-search button:hover,
.cmp-bar button:hover,
.set-save:hover,
.cache-refresh:hover,
.calc-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px var(--accent-glow), 0 0 0 1px rgba(217, 164, 65, 0.25);
}
.lookup-search button:active,
.cmp-bar button:active,
.set-save:active,
.cache-refresh:active,
.calc-btn:active {
    transform: translateY(0);
}

/* ghost / outline controls: ink-wash fill on hover (Logs tabs, lb-load, copy,
   back links, pagers). They already set their own hover colours; layer a soft
   surface fill + lift so the hover feels deliberate. */
.lb-load,
.log-tab,
.copy-btn,
.back-lookup,
.q-pager button,
.mh-pg,
.mh-export {
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.lb-load:hover:not(:disabled),
.copy-btn:hover,
.back-lookup:hover,
.q-pager button:hover:not(:disabled),
.mh-pg:hover:not(:disabled),
.mh-export:hover {
    background: var(--accent-soft);
    transform: translateY(-1px);
}
.log-tab:hover {
    border-color: var(--accent);
    color: var(--text);
    background: var(--accent-soft);
}

/* generic outline request button (Player Lookup "Go Live", link flow) - keep the
   violet outline -> filled hover, add a gentle lift */
.link-req-btn {
    margin-top: 10px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-sm);
    padding: 9px var(--sp-4);
    font: inherit;
    font-weight: 700;
    font-size: var(--fs-base);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.link-req-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px var(--accent-glow);
}

/* ── Match-Linking Start / Stop: MUST stay prominent + clearly green / red ──
   These are the headline actions of a linked account. Re-affirm the green pulsing
   Start CTA and the red Stop, give them a wuxia-seal finish (a faint inner sheen +
   a gilt focus ring), and keep the trackPulse animation. Colour is reinforced by
   the pulsing box-shadow + the explicit fills, so colour is never the only signal. */
.acct-head .link-req-btn {
    background: linear-gradient(180deg, #1cf07f, var(--green) 60%, #00c853);
    color: #06210f;
    border-color: transparent;
    font-weight: 800;
    font-size: var(--fs-base);
    padding: 10px 22px;
    box-shadow: 0 4px 14px rgba(0, 230, 118, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation: trackPulse 2.6s ease-in-out infinite;
    border: 1px solid rgba(0, 230, 118, 0.6);
    transition: transform var(--t-fast), filter var(--t-fast);
}
.acct-head .link-req-btn:hover {
    background: linear-gradient(180deg, #1cf07f, #00c853);
    color: #06210f;
    filter: brightness(1.04);
    transform: translateY(-1px);
}
.acct-head .link-stop {
    color: var(--red);
    border-color: rgba(255, 94, 91, 0.55);
    font-weight: 800;
    font-size: var(--fs-base);
    padding: 10px var(--sp-5);
    background: rgba(255, 94, 91, 0.08);
    border: 1px solid rgba(255, 94, 91, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.acct-head .link-stop:hover {
    background: var(--red);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
}
/* keep the pulse honoured under reduced-motion (steady prominent glow, no pulse) */
@media (prefers-reduced-motion: reduce) {
    .acct-head .link-req-btn {
        animation: none;
        box-shadow: 0 4px 16px rgba(0, 230, 118, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    .lookup-search button,
    .cmp-bar button,
    .set-save,
    .cache-refresh,
    .calc-btn,
    .lb-load,
    .log-tab,
    .copy-btn,
    .back-lookup,
    .q-pager button,
    .mh-pg,
    .mh-export,
    .link-req-btn,
    .acct-head .link-stop {
        transition: none;
    }
    .lookup-search button:hover,
    .cmp-bar button:hover,
    .set-save:hover,
    .cache-refresh:hover,
    .calc-btn:hover,
    .lb-load:hover:not(:disabled),
    .copy-btn:hover,
    .back-lookup:hover,
    .q-pager button:hover:not(:disabled),
    .mh-pg:hover:not(:disabled),
    .mh-export:hover,
    .link-req-btn:hover:not(:disabled),
    .acct-head .link-req-btn:hover,
    .acct-head .link-stop:hover {
        transform: none;
    }
}

/* ════════ FOCUS - visible, on-brand, never removed ════════
   A consistent gilt/violet focus ring across interactive controls. Uses
   :focus-visible so it only appears for keyboard users, and never strips an
   existing visible affordance. Sits above any element's own outline removal. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* the green/red tracking controls focus in their own colour so the signal stays */
.acct-head .link-req-btn:focus-visible {
    outline-color: var(--green);
}
.acct-head .link-stop:focus-visible {
    outline-color: var(--red);
}

/* ════════ PILLS / BADGES - wuxia-refined chips ════════
   Quieter ink chips with a gilt hairline; the brand/sect/rank chips keep their
   accent colour but gain a faint inner sheen so they read like small seals. */

/* region / guild / dim meta chips: warm the border to a gilt hairline */
.phero-meta .ppill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.55;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-color: var(--hairline);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.phero-meta .pp-region {
    color: var(--text);
    border-color: rgba(217, 164, 65, 0.3);
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* sect chip stays violet (it's the brand identity marker) - add a soft glow */
.phero-meta .pp-sect {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: rgba(167, 139, 250, 0.4);
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(167, 139, 250, 0.12);
}
/* level chip: the one solid-accent seal - give it a pressed sheen */
.phero-meta .pp-lvl {
    color: var(--bg);
    background: var(--accent);
    border-color: transparent;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 8px -3px var(--accent-glow);
}

/* "master" tag + the h3 count chip: jade->gold hairline ring */
.master-tag {
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(95, 196, 163, 0.42);
    border-radius: var(--radius-pill);
    padding: 3px 9px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.h3-count {
    margin-left: auto;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 1px var(--sp-2);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(95, 196, 163, 0.28);
    border-color: rgba(95, 196, 163, 0.32);
}

/* leaderboard live-cooldown + sync stat chips: gilt hairline */
.sync-stat {
    font-size: var(--fs-sm);
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    border-color: var(--hairline);
}

/* link-status chip: gilt hairline default; the live/wait/off/fail colour states
   are unchanged so status colour stays the signal */
.link-status {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-color: var(--hairline);
}

/* tab count badges + queue badges: pressed-seal sheen */
.lk-tab-n,
.sub-tab .lk-tab-n,
.q-badge {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Logs history / opponent pills: gilt hairline + ink-wash hover */
.hist-chip,
.op-pill {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: var(--sp-1) 10px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
    border-color: var(--hairline);
}
.hist-chip:hover,
.op-pill:hover {
    border-color: var(--accent);
    color: var(--text);
    background: var(--accent-soft);
    transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
    .hist-chip,
    .op-pill { transition: none; }
    .hist-chip:hover,
    .op-pill:hover { transform: none; }
}

/* ════════ INPUTS / SEARCH - ink fields with gilt/jade focus rings ════════
   Unify the focus affordance across every text field + select to a warm gold ring
   over the brand-violet border, so search feels like dipping a brush in ink. */
#q:focus,
.lb-search:focus,
.lb-sel:focus,
.set-in:focus,
.cmp-input:focus,
.mh-filter:focus,
.jt-search:focus,
.q-detail-tools input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px rgba(217, 164, 65, 0.25);
}
/* selects + search get a jade hover edge (a cool counterpoint to the gold focus) */
.lb-sel:hover,
.lb-search:hover {
    border-color: var(--accent);
}
/* the hero lookup field: a slightly taller, calmer ink well with a gilt baseline */
#q {
    background:
        linear-gradient(180deg, var(--surface-2), var(--surface-3)),
        var(--surface-2);
    border: 1px solid var(--hairline);
    color: var(--text);
    padding: 14px 18px 14px 42px;
    border-radius: var(--radius-md);
    width: 100%;
    outline: none;
    font: inherit;
    font-size: var(--fs-md);
    letter-spacing: 0.01em;
    transition:
        border-color var(--t-fast),
        box-shadow var(--t-fast);
    border-color: var(--hairline);
}
#q:hover {
    border-color: var(--accent);
}

/* ════════ LEADERBOARD TABLE - a ranked scroll / ledger ════════
   Ink rows on layered paper, parchment text, a gilt header band, refined row
   hover with a left ink-edge, and gold/jade accents for the podium ranks. The
   rank accents key off [data-rank] on each <tr> (set by the app) - no JS change. */

table.lb {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background:
        linear-gradient(180deg, rgba(217, 164, 65, 0.03), transparent 90px),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-scroll);
    border-color: #2a2533;
}
/* header = a gilt ledger band */
.lb th {
    color: var(--attune);
    font-weight: 700;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    background:
        linear-gradient(180deg, rgba(217, 164, 65, 0.07), rgba(217, 164, 65, 0.02)),
        var(--surface-2);
    border-bottom: 1px solid var(--hairline);
}
/* body rows: parchment text, dotted ink separators, a left edge that inks in on hover */
.lb td {
    color: var(--text);
    border-bottom-color: rgba(255, 255, 255, 0.04);
}
.lb tbody tr {
    transition: background var(--t-fast), box-shadow var(--t-fast);
    position: relative;
}
.lb tbody tr:hover {
    background: rgba(95, 196, 163, 0.07);
    box-shadow: inset 3px 0 0 var(--accent);
}

.lb a:hover {
    color: var(--gold-strong);
}

/* podium accents - the top three ranks get a coloured left seal-edge + a tinted
   rank number, so the scroll's head reads at a glance. Colour is paired with the
   "#1/#2/#3" text, so rank is never colour-only. */
.lb tbody tr[data-rank="1"] {
    background: linear-gradient(90deg, rgba(217, 164, 65, 0.1), transparent 60%);
    box-shadow: inset 3px 0 0 var(--attune);
}
.lb tbody tr[data-rank="1"]:hover {
    background: linear-gradient(90deg, rgba(217, 164, 65, 0.16), transparent 60%);
    box-shadow: inset 3px 0 0 var(--gold-strong);
}
.lb tbody tr[data-rank="1"] td:first-child {
    color: var(--gold-strong);
    font-weight: 800;
}
.lb tbody tr[data-rank="2"] {
    box-shadow: inset 3px 0 0 #c8cdd6;
}
.lb tbody tr[data-rank="2"] td:first-child {
    color: #d6dae1;
    font-weight: 800;
}
.lb tbody tr[data-rank="3"] {
    box-shadow: inset 3px 0 0 var(--accent);
}
.lb tbody tr[data-rank="3"] td:first-child {
    color: var(--accent);
    font-weight: 800;
}
@media (prefers-reduced-motion: reduce) {
    .lb tbody tr { transition: none; }
}

/* ════════ SHARED PAGE HEADER (.page-head) ════════
   One header component for Leaderboard, Logs, and Match Linking: a gilt-edged ink
   panel (a hanging scroll with a brushed gold/jade top stroke), an uppercase kicker
   on a short gilt rule, a serif display title, and a muted subtitle. Built by
   pageHead() in app.js. .page-head-top is the optional flex row pages slot controls
   into (Leaderboard drops its region/mode nav there). Player Lookup's .phero and the
   Landing's .lookup-hero are their own hero components and intentionally not this. */
.page-head {
    position: relative;
    margin: 0 0 18px;
    padding: 22px var(--sp-6) var(--sp-4);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(140% 180% at 100% -40%, rgba(217, 164, 65, 0.08), transparent 55%),
        radial-gradient(120% 160% at -10% 120%, rgba(95, 196, 163, 0.06), transparent 55%),
        linear-gradient(180deg, var(--surface-3), var(--surface-2));
    box-shadow: var(--shadow-scroll);
}
.page-head::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--brush-gold) 22%, var(--brush-jade) 78%, transparent);
    opacity: 0.6;
}
.page-head-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: wrap;
}
.page-head-title {
    min-width: 0;
}
.ph-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font: 700 var(--fs-2xs) var(--font);
    text-transform: uppercase;
    letter-spacing: 0.26em;
    color: var(--attune);
}
.ph-kicker::before {
    content: "";
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--attune));
}
.ph-h2 {
    margin: 5px 0 var(--sp-1);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.02;
    letter-spacing: 0.005em;
    background: linear-gradient(112deg, #fff 0%, #efe7d6 36%, var(--accent) 74%, var(--attune) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ph-sub {
    margin: 0;
    max-width: 640px;
    color: var(--text-muted);
    font-size: var(--fs-base);
    letter-spacing: 0.01em;
}
@media (max-width: 640px) {
    .page-head { padding: 18px var(--sp-4) 14px; }
    .page-head-top { flex-direction: column; gap: 14px; }
    .ph-h2 { font-size: clamp(26px, 7vw, 34px); }
}

/* ════════ LEADERBOARD - LEDGER HEAD, REFINE TOOLBAR, PODIUM ════════
   A per-page redesign: the page opens with a mounted-scroll header (serif title +
   the region/mode navigation + a live scan-status line), a calmer grouped refine
   toolbar beneath it, then the ranked ledger. All scoped under leaderboard
   selectors so no other page is affected. JS hooks (.lb-f, .lb-sel, .lb-search,
   .lb-meta/.lb-last/.lb-cd, .lb-tiers, .lb-load, data-rank) are unchanged. */

/* the region + mode navigation sits in the head, framed as the scroll's controls */
.lb-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: none;
}
.lb-f-nav .lb-sel {
    background: linear-gradient(180deg, rgba(217, 164, 65, 0.06), transparent), var(--surface);
    border-color: var(--hairline);
}
.lb-f-nav .lb-sel:hover {
    border-color: var(--attune);
}

/* scan-status line: last scan + the live countdown, on a gilt ink-wash rule */
.lb-meta {
    text-align: left;
    margin: 14px 0 0;
    font-size: var(--fs-sm);
    padding-top: 11px;
    color: var(--text-muted);
    border-top: 1px solid transparent;
    background-image: linear-gradient(90deg, var(--hairline) 0%, transparent 70%);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 1px;
}
.lb-meta .lb-cd {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* ── the refine toolbar: a quiet inset card grouping the client-side filters ── */
.lb-filters {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
    position: relative;
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent), var(--surface-2);
    box-shadow: var(--shadow-soft);
}
.lb-filters-cap {
    align-self: center;
    flex: none;
    font: 700 var(--fs-2xs) var(--font);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-faint);
    padding-right: 14px;
    border-right: 1px solid var(--border);
}
.lb-filters-fields {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
    flex-wrap: wrap;
    flex: 1 1 auto;
}
.lb-filters-end {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: none;
    margin-left: auto;
}
.lb-count {
    font: 600 var(--fs-sm) var(--font-mono);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lb-clear {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font: 600 var(--fs-xs) var(--font);
    border-radius: var(--radius-sm);
    padding: 6px var(--sp-3);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.lb-clear:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.lb-clear:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── ledger table rhythm: roomier rows, tabular figures, anchored score column ── */
.lb th,
.lb td {
    padding: 11px var(--sp-3);
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.lb td:nth-child(n + 3) {
    font-variant-numeric: tabular-nums;
}
.lb td:nth-child(3) {
    color: var(--accent);
    font-weight: 800;
    font-size: var(--fs-base);
    letter-spacing: 0.01em;
}
.lb tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.012);
}
.lb tbody tr:nth-child(even):hover {
    background: rgba(95, 196, 163, 0.07);
}
.lb a {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.005em;
}

/* the rank cell: a centred figure; the top three become a struck seal medallion */
.lb td:first-child {
    text-align: center;
}
.lb-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.lb-medal {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: var(--fs-base);
    font-weight: 800;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.lb-medal-1 {
    color: #2a1f06;
    background: radial-gradient(circle at 32% 28%, var(--gold-strong), var(--attune) 70%, #b9842c);
    border-color: rgba(233, 189, 99, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 12px rgba(217, 164, 65, 0.4);
}
.lb-medal-2 {
    color: #1c2026;
    background: radial-gradient(circle at 32% 28%, #eef1f5, #c8cdd6 70%, #9aa1ab);
    border-color: rgba(214, 218, 225, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 10px rgba(200, 205, 214, 0.28);
}
.lb-medal-3 {
    color: #06231a;
    background: radial-gradient(circle at 32% 28%, #bde6d6, var(--accent) 72%, var(--accent-strong));
    border-color: rgba(95, 196, 163, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 10px var(--accent-glow);
}
/* keep the existing podium left-edge accents, but the medallion now carries the
   colour cue too - so rank is signalled by shape + colour + the "#1/#2/#3" text */
.lb tbody tr[data-rank="1"] td:first-child,
.lb tbody tr[data-rank="2"] td:first-child,
.lb tbody tr[data-rank="3"] td:first-child {
    font-weight: 800;
}

/* ── the weapon-usage-by-rank-tier card, integrated as a parchment ledger inset ── */
.lb-tiers {
    margin: 0 0 var(--sp-4);
    padding: 15px 18px;
    background:
        radial-gradient(120% 200% at 100% -30%, rgba(217, 164, 65, 0.06), transparent 60%),
        linear-gradient(180deg, var(--surface-3), var(--surface-2));
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    position: relative;
    box-shadow: var(--shadow-soft);
}
.lb-tiers::before {
    content: "";
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--brush-gold) 24%, var(--brush-gold) 76%, transparent);
    opacity: 0.55;
}
.lb-tier {
    min-width: 124px;
    padding: 11px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent), var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
    position: relative;
    flex: 1 1 130px;
    transition: border-color var(--t-fast), transform var(--t-fast);
}
.lb-tier:hover {
    border-color: var(--hairline);
    transform: translateY(-1px);
}
.lb-tier-n {
    font: 800 var(--fs-2xl) var(--font-mono);
    color: var(--text);
    line-height: 1;
    background: linear-gradient(180deg, var(--gold-strong), var(--attune));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── responsive: let the toolbar end-controls wrap cleanly (the head itself stacks
   via the shared .page-head mobile rule) ── */
@media (max-width: 640px) {
    .lb-nav {
        width: 100%;
    }
    .lb-f-nav {
        flex: 1 1 0;
    }
    .lb-f-nav .lb-sel {
        width: 100%;
    }
    .lb-filters-cap {
        border-right: 0;
        padding-right: 0;
    }
    .lb-filters-end {
        width: 100%;
        justify-content: space-between;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lb-tier { transition: none; }
    .lb-tier:hover { transform: none; }
    .lb-clear { transition: none; }
}

/* ════════ TOP NAV + FOOTER - wuxia polish ════════
   Keep the existing brand logo (rendered into #topbarBrand) and the blurred ink
   bar; add a gilt baseline hairline, a brush underline on the active/hover nav
   link, and a matching ink-wash edge on the footer. */

.topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(10, 10, 10, 0.82);
    backdrop-filter: blur(20px);
    border-bottom-color: transparent;
    background-image:
        linear-gradient(90deg, transparent, var(--hairline) 12%, var(--hairline) 88%, transparent),
        radial-gradient(120% 300% at 50% -180%, var(--brand-glow), transparent 60%),
        linear-gradient(rgba(10, 10, 10, 0.82), rgba(10, 10, 10, 0.82));
    background-repeat: no-repeat;
    background-position: bottom left, top center, center;
    background-size: 100% 1px, 100% 100%, 100% 100%;
}
/* nav links: animated brush underline that grows from the left on hover/active */
.topbar-nav a {
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 600;
    transition: color 0.15s;
    position: relative;
    padding-bottom: 2px;
}
.topbar-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--attune));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-med);
}
.topbar-nav a:hover::after,
.topbar-nav a.on::after {
    transform: scaleX(1);
}
/* the .on link already appends its own ::after block-line in the base CSS; suppress
   that duplicate so only the brush underline shows */
.topbar-nav a.on::after {
    content: "";
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    margin-top: 0;
}
@media (prefers-reduced-motion: reduce) {
    .topbar-nav a::after { transition: none; }
}

/* footer: ink-wash top edge to match the topbar's gilt baseline */
.site-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 14px var(--sp-8) var(--sp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.35);
    border-top-color: transparent;
    background-image:
        linear-gradient(90deg, transparent, var(--hairline) 14%, var(--hairline) 86%, transparent),
        linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
    background-repeat: no-repeat;
    background-position: top left, center;
    background-size: 100% 1px, 100% 100%;
}
.site-footer-links a:hover {
    color: var(--gold-strong);
}

/* ════════ DISTINCTIVE HOVERS + SCROLL-EDGE ACCENTS ════════ */

/* lookup hero search panel: a gilt brushed top edge to match the cards */
.lookup-hero {
    background:
        radial-gradient(120% 150% at 50% -30%, rgba(217, 164, 65, 0.10), transparent 55%),
        radial-gradient(140% 170% at 50% 130%, rgba(95, 196, 163, 0.08), transparent 58%),
        linear-gradient(180deg, var(--surface-3), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-scroll);
    position: relative;
    overflow: hidden;
    border-color: var(--hairline);
}
.lookup-hero::before {
    content: "";
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--brush-gold) 22%, var(--brush-jade) 78%, transparent);
    opacity: 0.6;
}
/* a faint seal-disc bloom centred behind the title for jianghu depth (decorative) */
.lookup-hero-inner::before {
    content: "";
    position: absolute;
    top: clamp(var(--sp-5), 4vw, 44px);
    left: 50%;
    width: clamp(180px, 36vw, 280px);
    height: clamp(180px, 36vw, 280px);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, var(--accent-glow), transparent 68%);
    opacity: 0.5;
    filter: blur(6px);
}
.lookup-hero-inner > * {
    position: relative;
    z-index: 1;
}

/* the player name in the hero: a white -> jade -> gilt wash so the wuxia jade and
   the brand gold carry the headline identity (was a white -> violet wash) */
.phero-name {
    background: linear-gradient(115deg, #fff 0%, #e8f3ee 30%, var(--accent) 70%, var(--attune) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent);
}

/* weapon chips in the loadout: a gold edge + lift on hover (a drawn blade) */
.pprofile .wpn {
    gap: 9px;
    padding: var(--sp-2) 14px;
    border-radius: var(--radius-card);
    background: linear-gradient(160deg, var(--surface-3), var(--surface));
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    transition: border-color var(--t-med), transform var(--t-med), box-shadow var(--t-med);
}
.pprofile .wpn:hover {
    transform: translateY(-1px);
    border-left-color: var(--attune);
    box-shadow: 0 12px 26px -18px rgba(217, 164, 65, 0.5);
}

/* hero headline figures lift very slightly as a group cue on hover */
.phero-figs .hf {
    transition: transform var(--t-med);
}
.phero-figs:hover .hf {
    transform: translateY(-1px);
}

/* leaderboard "open in builds" + weapon cells brighten toward gold on row hover */
.lb tbody tr:hover .lb-wpn {
    color: var(--gold-strong);
}

/* gear slot tiles (Match Linking combat dossier): a gilt accent edge on hover to
   complement the existing violet lift */
.cp-side .gslot:hover,
.cp-side .gslot:focus-visible {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -18px rgba(67, 169, 135, 0.55);
    border-left-color: var(--attune);
}

@media (prefers-reduced-motion: reduce) {
    .pprofile .wpn,
    .phero-figs .hf {
        transition: none;
    }
    .pprofile .wpn:hover,
    .phero-figs:hover .hf {
        transform: none;
    }
}

/* ════════════════════════════════════════════════════════════════
   PLAYER PROFILE - JIANGHU CHARACTER DOSSIER (heavy layout pass)
   A taller hero "scroll head": an eyebrow kicker, a circular jade-gold
   RANK SEAL at the head, the serif display name + sign + meta beneath
   it, then a refined headline figure band on a gilt ink-wash rule.
   The bento gets matched column heads ("Standing & Record" / "Loadout
   & Armory"), each a brush-mark label, so the two columns read as the
   left ledger + right plate of a dossier. Every category stays visible
   - no drawer, no collapse. Scoped under .pprofile so nothing else
   shifts; placed after the earlier .pprofile passes so it wins the
   cascade. Motion is transform/opacity only and reduced-motion safe.
   ════════════════════════════════════════════════════════════════ */

/* the hero becomes a vertical scroll head: top zone (seal + identity)
   over a divided figure band */
.pprofile .phero {
    gap: var(--sp-3) var(--sp-5);
    padding: 16px 26px 14px;
    border: 1px solid #262430;
    border-radius: var(--radius-card);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 60px -30px rgba(0, 0, 0, 0.85);
    background:
        radial-gradient(135% 110% at 0% -12%, rgba(95, 196, 163, 0.14), transparent 50%),
        radial-gradient(120% 95% at 100% -6%, rgba(217, 164, 65, 0.10), transparent 48%),
        radial-gradient(90% 80% at 100% 120%, rgba(167, 139, 250, 0.045), transparent 55%),
        linear-gradient(180deg, var(--surface), var(--bg));
    border-color: #2c2738;
    display: block;
    position: relative;
}
/* LIVE badge - hero top-right; only shown when the profile is reading live game-client data */
.pprofile .phero-live {
    position: absolute;
    top: var(--sp-4);
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: 5px var(--sp-3);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(0, 230, 118, 0.32);
    background: rgba(0, 230, 118, 0.08);
    font: 700 var(--fs-xs) var(--font);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green);
}
.pprofile .phero-live .pl-dot {
    align-self: center;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.9);
    animation: phLivePulse 1.8s ease-in-out infinite;
}
.pprofile .phero-live .pl-sub {
    font-weight: 500;
    font-size: var(--fs-2xs);
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--text-muted);
}
@keyframes phLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
    .pprofile .phero-live .pl-dot { animation: none; }
}
@media (max-width: 640px) {
    .pprofile .phero-live { position: static; margin: 0 0 var(--sp-3); }
    .pprofile .phero-live .pl-sub { display: none; }
}
.pprofile .phero-top {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "eyebrow eyebrow"
        "seal    id";
    align-items: center;
    column-gap: 22px;
    row-gap: var(--sp-2);
    position: relative;
    z-index: 1;
}
.pprofile .phero-eyebrow {
    grid-area: eyebrow;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: 700 var(--fs-2xs) var(--font);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--attune);
}
.pprofile .phero-eyebrow .pe-mark {
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--attune));
}

/* RANK SEAL: a circular jianghu medallion with a double ring + faint seal bloom.
   Decorative ring drawn with pseudo-elements; the tier / headline / sub text sit
   centred. The colour ramps jade->gold like a struck seal. */
.pprofile .phero-seal {
    grid-area: seal;
    position: relative;
    flex: none;
    width: 108px;
    height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    padding: 6px;
    background:
        radial-gradient(circle at 50% 38%, rgba(217, 164, 65, 0.14), transparent 62%),
        radial-gradient(circle at 50% 50%, #16151c, #0e0d12 78%);
    box-shadow:
        inset 0 0 0 1px rgba(217, 164, 65, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 18px 38px -22px rgba(0, 0, 0, 0.9);
}
.pprofile .phero-seal .seal-ring {
    position: absolute;
    inset: var(--sp-2);
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid transparent;
    background:
        conic-gradient(from -90deg, var(--accent), var(--attune), var(--accent)) border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.55;
}
.pprofile .phero-seal .seal-tier {
    font: 700 var(--fs-2xs) var(--font-logo), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--attune);
    line-height: 1.1;
}
.pprofile .phero-seal .seal-head {
    margin-top: 3px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    line-height: 1.04;
    letter-spacing: 0.01em;
    background: linear-gradient(160deg, #fff 0%, #e9f3ee 38%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent);
    max-width: 92px;
    overflow-wrap: anywhere;
}
.pprofile .phero-seal .seal-sub {
    margin-top: var(--sp-1);
    font: 600 var(--fs-2xs) var(--font-mono);
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

/* identity block to the right of the seal */
.pprofile .phero-top .phero-id {
    grid-area: id;
    min-width: 0;
}
.pprofile .phero-top .phero h2,
.pprofile .phero-top h2 {
    margin: 0;
}
.pprofile .phero h2 {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 700;
    font-family: var(--font-display);
    line-height: 1.02;
    letter-spacing: 0.004em;
}
.pprofile .phero-sign {
    color: var(--text-muted);
    margin-top: 9px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-md);
    line-height: 1.4;
}
.pprofile .phero-meta {
    margin-top: var(--sp-3);
}

/* the headline figure band: a gilt ink-wash rule separates it from the identity zone,
   the figures breathe with even rhythm, mono numerals lit jade for accents */
.pprofile .phero-figs {
    margin-top: var(--sp-5);
    padding-top: 18px;
    gap: var(--sp-5) var(--sp-6);
    position: relative;
    z-index: 1;
    border-top: 1px solid transparent;
    background-image: linear-gradient(90deg, transparent, var(--hairline) 14%, var(--hairline) 86%, transparent);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 1px;
}
.pprofile .hf {
    min-width: 82px;
    gap: 0;
}
.pprofile .hf-v {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--fs-2xl);
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, #ffffff 30%, #c3d6cf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pprofile .hf-l {
    font-family: var(--font-logo), sans-serif;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    margin-top: var(--sp-2);
}

/* ── bento column heads: a brush-mark label introducing each column ── */
.pprofile .pstack-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 2px;
    font: 700 var(--fs-xs) var(--font-logo), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-muted);
}
.pprofile .pstack-head .psh-mark {
    flex: none;
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), var(--attune));
}
.pprofile .pstack-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--hairline), transparent);
}

/* the rail is an auto-fit grid (see .pstack): the column head + the headline combat
   sheet span the full rail width, while the smaller stat sections flow into columns.
   collapses cleanly at 1 column since 1 / -1 still spans the lone track. */
.pprofile .pstack > .pstack-head,
.pprofile .pstack > .pcard-combat {
    grid-column: 1 / -1;
}

/* the right column wrapper - holds the head + the loadout plate, full height */
.pprofile .parmory-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
}

/* combat sheet leads the rail: a faint jade frame so the live/estimated sheet
   reads as the headline card of the standing column */
.pprofile .pcard-combat {
    border-color: rgba(95, 196, 163, 0.26);
    background:
        radial-gradient(150% 90% at 0% -10%, rgba(95, 196, 163, 0.10), transparent 55%),
        linear-gradient(180deg, #15161b, var(--bg));
}
.pprofile .pcard-combat h3 {
    color: var(--accent);
}

/* loadout plate: a touch more presence than the rail cards (it is the centrepiece) */
.pprofile .armory.pcard {
    padding: var(--sp-5) 22px;
    background:
        radial-gradient(120% 70% at 100% -8%, rgba(217, 164, 65, 0.06), transparent 55%),
        radial-gradient(150% 80% at 0% -10%, rgba(95, 196, 163, 0.05), transparent 55%),
        linear-gradient(180deg, var(--surface), var(--bg));
}
.pprofile .armory.pcard > h3 {
    font-size: var(--fs-base);
}

/* weapons read as drawn blades: larger, gold-edged chips */
.pprofile .arm-weapons {
    gap: var(--sp-3);
}
.pprofile .arm-weapons .wpn {
    flex: 1 1 220px;
}

/* ── responsive: the hero scroll head reflows to a single column on mobile ── */
@media (max-width: 640px) {
    .pprofile .phero {
        padding: var(--sp-5) 18px 18px;
    }
    .pprofile .phero-top {
        grid-template-columns: 1fr;
        grid-template-areas:
            "eyebrow"
            "seal"
            "id";
        justify-items: start;
        row-gap: 14px;
    }
    .pprofile .phero-seal {
        width: 104px;
        height: 104px;
    }
    .pprofile .phero-figs {
        gap: var(--sp-4) var(--sp-5);
    }
}

/* reduced motion: the seal ring + figure band carry no motion, but keep the
   group-hover lift override consistent with the existing profile rule */
@media (prefers-reduced-motion: reduce) {
    .pprofile .pstack-head .psh-mark {
        box-shadow: none;
    }
}

/* the live-account being tracked: a faint jade aura so an active scroll stands out */
.acct:has(.acct-head .link-stop) {
    box-shadow: var(--shadow-scroll), 0 0 0 1px var(--hairline-jade);
}

/* ════════ LOGS PAGE - the bot chronicle ════════
   Header is the shared .page-head (pageHead() in app.js); below it a calmer tab row
   and an elevated console feed. All JS hooks (.log-tabs/.log-tab[data-tab],
   .log-view[data-view], #logbox, .logline, .logts, .json-tools, .verify-*, .q-dash)
   are untouched - this is visual only. */
/* the tab row gets a gilt baseline so it reads as one band under the header */
.log-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid transparent;
    background-image: var(--ink-wash);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 1px;
}

/* the console feed: an ink panel with a gilt brushed top edge + a leading rule on
   each line so the tail reads like a hanging bamboo-slip ledger */
.logbox {
    background:
        linear-gradient(90deg, transparent, var(--hairline) 16%, var(--hairline) 84%, transparent) top left / 100% 1px no-repeat,
        linear-gradient(180deg, var(--surface-2), var(--surface)),
        var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--sp-4) 18px;
    max-height: clamp(220px, 48vh, 520px);
    overflow: auto;
    overscroll-behavior: contain;
    margin: 0;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: var(--fs-sm);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
    position: relative;
    border-color: var(--hairline);
    box-shadow: var(--shadow-scroll);
}
.logline {
    padding: 2px 0 2px var(--sp-3);
    border-left: 1px solid transparent;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.logline:hover {
    border-left-color: var(--hairline-jade);
    background: rgba(95, 196, 163, 0.04);
}
.logts {
    color: var(--attune);
    opacity: 0.85;
    margin-right: 10px;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .logline { transition: none; }
}

/* Logs reveal: the header rides the shared .page-head reveal; the tab row + active
   view get their own staggered entrance. Gated to a fresh view mount (#app.fresh-view)
   so a poll-tick re-render of the feed never replays it. */
@media (prefers-reduced-motion: no-preference) {
    #app.fresh-view .log-tabs {
        animation: wx-rise var(--t-slow) var(--ease-brush) both;
        animation-delay: 0.05s;
    }
    #app.fresh-view .log-view:not([hidden]) {
        animation: wx-rise var(--t-slow) var(--ease-brush) both;
        animation-delay: 0.1s;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   MATCH LINKING - deepened jianghu treatment (CSS ONLY)
   Brings the "Your Accounts" / live-tracking view up to the polish of The Ledger,
   the Landing, Logs and Player Lookup: a serif ledger hero, a refined intro scroll,
   elegant tabs, an elevated account-card feel, brush-mark sub-tab headers and a
   calmer, more deliberate dossier hierarchy.

   Hard guarantees baked into the selectors below:
   - Start Tracking (.acct-head .link-req-btn) stays the green pulsing CTA, Stop
     (.acct-head .link-stop) stays the red control - both untouched here (their
     deepened green/red + trackPulse rules live earlier in this file; nothing below
     re-colours them).
   - The .link-status states (live/wait/off/fail/offline) keep their meaning colours.
   - NO entry/mount animations are added to anything that re-renders on the live feed
     (.acct-detail content, .sub-pane, .acct-head, status badges, the room pane, match
     rows). Motion here is the one-time wx-rise page reveal + hover/focus only.
   ════════════════════════════════════════════════════════════════════════════ */

/* The Match Linking header is the shared .page-head (pageHead() in app.js); the WIP
   banner below it keeps its inscribed-caution-slip styling on .wip-banner directly. */

/* ── Linking intro → a refined parchment scroll ─────────────────────────────
   Warmer ink surface, a gilt brushed top edge, and a serif lead-in so the intro
   reads like the opening note of a dossier rather than a plain card. */
.link-intro {
    position: relative;
    margin: 0 0 14px;
    padding: var(--sp-4) 18px 14px;
    background:
        radial-gradient(120% 140% at 100% -30%, rgba(217, 164, 65, 0.06), transparent 55%),
        radial-gradient(120% 140% at -10% 130%, rgba(95, 196, 163, 0.05), transparent 55%),
        linear-gradient(180deg, var(--surface-3), var(--surface-2));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-scroll);
}
.link-intro::before {
    content: "";
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--brush-gold) 22%, var(--brush-jade) 78%, transparent);
    opacity: 0.55;
}
.link-intro-h {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-lg);
    color: var(--text);
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.01em;
}
.link-intro-x {
    position: absolute;
    top: 6px;
    right: var(--sp-2);
    background: none;
    border: none;
    color: var(--text);
    opacity: 0.5;
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    transition: opacity var(--t-fast), background var(--t-fast);
}
.link-intro-x:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
}

/* ── Top tab strip (Your Accounts | Link New Account) → elegant band ────────
   The base file already turns the underline into an ink-wash; deepen the active
   tab into a small lit seal so the current section reads at a glance. */
.lk-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-md);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 9px 14px;
    cursor: pointer;
    min-height: 44px;
    position: relative;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color var(--t-fast), background var(--t-fast);
}
.lk-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.02);
}
.lk-tab.on {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-soft), transparent);
}
/* swap the flat 2px bottom rule for a brush stroke that fades at its ends */
.lk-tab.on::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--attune) 90%, transparent);
}

/* ── Account accordion cards → deeper scroll surface ────────────────────────
   The base .acct already carries the gilt top edge + scroll shadow; add depth
   layering, a quiet hover lift, and a clearer "open scroll" state. */
.acct {
    background:
        linear-gradient(90deg, transparent, var(--hairline) 16%, var(--hairline) 84%, transparent) top left / 100% 1px no-repeat,
        var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    overflow: hidden;
    border-color: #2a2533;
    border-top: 1px solid transparent;
    box-shadow: var(--shadow-scroll);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
@media (prefers-reduced-motion: no-preference) {
    .acct {
        transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
    }
    /* hover lift on the closed card only - never lift an open scroll (its content
       re-renders on the live feed and a moving container would feel unstable) */
    .acct:not(.open):hover {
        transform: translateY(-1px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-scroll), 0 10px 24px -16px rgba(0, 0, 0, 0.7);
    }
}
.acct.open {
    border-color: var(--border-hover);
    background:
        linear-gradient(90deg, transparent, var(--hairline) 16%, var(--hairline) 84%, transparent) top left / 100% 1px no-repeat,
        radial-gradient(130% 60% at 0% 0%, rgba(95, 196, 163, 0.05), transparent 60%),
        var(--surface-2);
    box-shadow: var(--shadow-scroll), 0 18px 44px -28px rgba(0, 0, 0, 0.8);
}
/* a live (tracked) scroll: keep the jade aura, and warm the open state's aura too */
.acct.open:has(.acct-head .link-stop) {
    box-shadow: var(--shadow-scroll), 0 18px 44px -28px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--hairline-jade);
}

/* ── Account header row ─────────────────────────────────────────────────────
   Roomier padding, a gilt-ringed avatar, a serif name, and a settled rank/badge
   line. Pure presentation - the click target + flex order are unchanged. */
.acct-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: 14px 18px;
    background: transparent;
    border: 0;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    min-height: 44px;
    flex-wrap: wrap;
    font-size: var(--fs-base);
    row-gap: 9px;
}
.acct-head:hover {
    background: rgba(255, 255, 255, 0.015);
}
.link-av,
.link-av-tile {
    border-color: var(--hairline);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.acct-name {
    font-weight: 700;
    font-size: var(--fs-lg);
    font-family: var(--font-display);
    letter-spacing: 0.005em;
    color: var(--text);
}
.link-sign {
    font-size: var(--fs-base);
    color: var(--text-faint);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
    font-family: var(--font-display);
    letter-spacing: 0.01em;
}

/* rank chips: tighten into inlaid seals with tabular numerals (already have the
   inner sheen from the pills block; refine spacing + the label cap) */
.acct-ranks {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.acct-rank {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--fs-2xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tier, #8b8f98);
    background: color-mix(in srgb, var(--tier, #8b8f98) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier, #8b8f98) 40%, transparent);
    border-radius: var(--radius-pill);
    padding: 3px 9px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: saturate(1.1);
}

/* the status pill keeps its state colour; give the default chip a warmer ink fill */
.acct-head .link-status {
    background: var(--surface-3);
}

/* chevron → a gilt mark that brightens when the scroll is open */
.acct-chev {
    color: var(--text-faint);
    transition: transform 0.18s var(--ease-brush), color var(--t-fast);
    font-size: var(--fs-base);
}
.acct.open .acct-chev {
    transform: rotate(180deg);
    color: var(--attune);
}
@media (prefers-reduced-motion: reduce) {
    .acct-chev { transition: color var(--t-fast); }
}

/* privacy toggles read as small switches with a clear focus + hover affordance */
.link-priv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.link-priv:hover {
    color: var(--text);
    border-color: var(--hairline);
    background: rgba(255, 255, 255, 0.02);
}
.link-priv input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.link-priv:has(.priv-cb:checked) {
    color: var(--text-muted);
}
.link-priv:has(.rsheet-cb:checked) {
    color: var(--accent);
    border-color: var(--hairline-jade);
}
.link-debug {
    color: var(--text-faint);
    border-radius: var(--radius-sm);
    padding: 3px var(--sp-2);
    transition: color var(--t-fast), background var(--t-fast);
}
.link-debug:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

/* ── Expanded detail surface ────────────────────────────────────────────────
   Inset the detail so it reads as the unrolled lower half of the scroll, parted
   from the header by an ink-wash rule rather than a hard line. */
.acct-detail {
    padding: var(--sp-1) 18px var(--sp-4);
    border-top: 1px solid var(--border-soft);
    border-top-color: transparent;
    background-image: linear-gradient(90deg, transparent, var(--border-hover) 10%, var(--border-hover) 90%, transparent);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 1px;
}
/* the small "Unlink account" affordance: quiet, deliberate, gilt on hover-intent */
.acct-unlink:hover {
    color: var(--red);
    text-decoration: none;
    background: rgba(255, 94, 91, 0.08);
}

/* ── Detail sub-tabs (Overview | Room/Match | Matches | Breakdown) ──────────
   The base file gives this strip the ink-wash baseline; deepen the active tab to
   match the top strip's lit seal so the two tab levels feel like one system. */
.sub-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    min-height: 36px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color var(--t-fast), background var(--t-fast);
}
.sub-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.02);
}
.sub-tab.on {
    color: var(--accent);
    border-bottom-color: var(--accent);
    position: relative;
    background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.sub-tab.on::after {
    content: "";
    position: absolute;
    left: var(--sp-2);
    right: var(--sp-2);
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--attune) 90%, transparent);
}
/* the "Room/Match" tab when a room/match is live: keep its green signal, add a dot */
.sub-tab.alive {
    color: var(--green);
    position: relative;
    padding-left: 22px;
}
.sub-tab.alive::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.6);
}

/* ── Room / Match pane ──────────────────────────────────────────────────────
   The roster reads as a muster roll: a serif label, opponent dossier tiles with a
   gilt edge + soft hover, and a status line that lights when in a room/match. */
.cp-room-l {
    font-size: var(--fs-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--text);
    font-family: var(--font-display);
}
.opp-card {
    flex: 1 1 420px;
    max-width: 880px;
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(95, 196, 163, 0.05), transparent 60%),
        linear-gradient(180deg, var(--surface-3), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    overflow: hidden;
    position: relative;
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.opp-card::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--brush-gold) 24%, var(--brush-gold) 76%, transparent);
    opacity: 0.4;
}
.opp-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-soft), 0 10px 26px -18px rgba(0, 0, 0, 0.7);
}
.opp-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--text);
    letter-spacing: 0.005em;
}

/* ── Match-breakdown dossier (.mbreak) ──────────────────────────────────────
   The base file already gives this its grid, gradient, brushed edge and a brush
   title mark. Deepen the head into a serif dossier title so the Breakdown tab
   matches the Player Lookup combat dossier. */
.mbreak {
    position: relative;
    padding: var(--sp-5) 22px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sp-4) var(--sp-6);
    align-items: start;
    background:
        radial-gradient(140% 80% at 100% -10%, rgba(217, 164, 65, 0.06), transparent 55%),
        linear-gradient(180deg, var(--surface), var(--bg));
    border: 1px solid #262430;
    border-radius: var(--radius-card);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 60px -30px rgba(0, 0, 0, 0.85);
    border-color: #2a2636;
}
.mbreak-sub {
    font: 500 var(--fs-sm) var(--font-mono);
    color: var(--text-muted);
}
/* the record figure stays the headline number; warm its slash + keep W/L colours */
.mb-rec .mb-slash {
    color: var(--attune);
    font-size: var(--fs-2xl);
    opacity: 0.7;
}

/* ── One-time page reveal ───────────────────────────────────────────────────
   The header rides the shared .page-head reveal; the WIP banner + intro stagger in
   after it. Gated to a fresh view mount (#app.fresh-view) and the account accordions
   get their staggered wx-rise from the main reveal block; do NOT animate detail/pane
   content (it re-renders on the feed). */
@media (prefers-reduced-motion: no-preference) {
    #app.fresh-view .wip-banner,
    #app.fresh-view .link-intro {
        animation: wx-rise var(--t-slow) var(--ease-brush) both;
    }
    #app.fresh-view .wip-banner { animation-delay: 0.04s; }
    #app.fresh-view .link-intro { animation-delay: 0.08s; }
}

@media (max-width: 640px) {
    .acct-head { padding: var(--sp-3) 14px; }
    .acct-detail { padding: var(--sp-1) 14px 14px; }
    .mbreak { padding: var(--sp-4) var(--sp-4) 14px; }
}