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

:root {
    --bg: #0a0a0a;
    --surface: #111;
    --surface-2: #0f0f0f;
    --surface-3: #161616;
    --border: #1f1f1f;
    --border-soft: #1a1a1a;
    --border-hover: #2e2a3a;
    --accent: #a78bfa;
    --accent-strong: #8b5cf6;
    --accent-soft: rgba(167, 139, 250, 0.1);
    --accent-glow: rgba(167, 139, 250, 0.22);
    --attune: #d9a441;
    --attune-soft: rgba(217, 164, 65, 0.12);
    --text: #fafafa;
    --text-muted: #888;
    --text-faint: #666;
    --green: #00e676;
    --red: #ff5e5b;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-logo: "Rajdhani";
    --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35);
    --max-width: 100%; /* full-bleed on ultrawides; section padding keeps the gutters */
    --sp-1: 4px;
    --sp-2: 7px;
    --sp-3: 10px;
    --sp-4: 13px;
    --sp-5: 16px;
    --sp-6: 20px;
    --sp-8: 26px;
    --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%;
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 13.5px/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}
a {
    color: inherit;
    text-decoration: none;
}
.muted {
    color: var(--text-muted);
}
h2 {
    margin: 0 0 4px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
h3 {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
}

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

/* topbar (mirrors the hub) */
.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);
}
.topbar-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 12px 32px;
    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 {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    transition: color 0.15s;
}
.topbar-nav a:hover {
    color: var(--accent);
}
.topbar-nav a.on {
    color: var(--accent);
}
.topbar-nav a.on::after {
    content: "";
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    margin-top: 3px;
}
.nav-hub {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    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: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 6px 14px;
    border-radius: 999px;
    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: #e9bd63;
}
.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: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: filter 0.15s;
}
.nav-signin:hover {
    filter: brightness(1.1);
}
.nav-user {
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
}
.nav-signout {
    color: var(--text-muted);
    font-size: 11px;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    transition:
        color 0.15s,
        border-color 0.15s;
}
.nav-signout:hover {
    color: var(--accent);
    border-color: var(--border-hover);
}
/* in-page player-lookup search box */
.lookup-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-card);
    text-align: center;
}
.lookup-hero h2 {
    margin: 0 0 6px;
}
.lookup-hero .muted {
    margin: 0 auto 16px;
    max-width: 560px;
}
.lookup-search {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
#q {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    color: var(--text);
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    width: min(420px, 100%);
    outline: none;
    font: inherit;
    font-size: 15px;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
#q:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.lookup-search button {
    background: var(--accent);
    color: #0a0a0a;
    border: 0;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    padding: 11px 24px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}
.lookup-search button:hover {
    background: var(--accent-strong);
}

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

/* leaderboard filter bar */
.lb-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.lb-f {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lb-f-l {
    color: var(--text-faint);
    font-size: 10px;
    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: 8px 12px;
    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:hover,
.lb-search:hover {
    border-color: var(--accent);
}
.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);
} /* 11 cols -> scroll on narrow instead of breaking layout */
table.lb {
    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);
}
.lb th,
.lb td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.lb th {
    color: var(--text-faint);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: var(--surface-2);
}
.lb tbody tr {
    transition: background 0.15s;
}
.lb tbody tr:hover {
    background: #161616;
}
.lb tbody tr:last-child td {
    border-bottom: 0;
}
.lb td:nth-child(3) {
    color: var(--accent);
    font-weight: 700;
} /* score */
.lb th:nth-child(n + 5):nth-child(-n + 8),
.lb td:nth-child(n + 5):nth-child(-n + 8) {
    text-align: center;
} /* win rate / W / L / games */
.lb a {
    color: var(--accent);
    font-weight: 600;
}
.lb a:hover {
    color: #fff;
}
.lb-build {
    min-width: 150px;
}
.lb-load {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    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: 11px;
    margin-left: 4px;
}

/* search cards */
.cards {
    display: grid;
    gap: 10px;
}
.card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 14px;
    border-radius: var(--radius-md);
    transition: all 0.15s;
}
.card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.card-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--accent);
}

/* sections */
section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    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: 11px;
    line-height: 1.35;
    margin: -6px 0 var(--sp-3);
}
.h3-count {
    margin-left: auto;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid rgba(167, 139, 250, 0.22);
}

/* --- hero: identity + headline figures --- */
.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%);
}
.phero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        80% 120% at 100% 120%,
        rgba(139, 92, 246, 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: 28px;
    line-height: 1.05;
    overflow-wrap: anywhere;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.phero-name {
    background: linear-gradient(
        115deg,
        #fff 0%,
        #e2deff 34%,
        var(--accent) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent);
}
.master-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(167, 139, 250, 0.4);
    border-radius: 999px;
    padding: 3px 9px;
}
.phero-sign {
    margin-top: 8px;
    color: var(--text-faint);
    font-style: italic;
    font-size: 0.95rem;
    max-width: 60ch;
    overflow-wrap: anywhere;
}
.phero-meta {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}
.phero-meta .ppill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.phero-meta .pp-region {
    color: var(--text);
    border-color: var(--border-hover);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.phero-meta .pp-sect {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: rgba(167, 139, 250, 0.4);
    font-weight: 700;
}
.phero-meta .pp-guild {
    color: var(--text);
}
.phero-meta .pp-lvl {
    color: #0a0a0a;
    background: var(--accent);
    border-color: transparent;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.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: 30px;
    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: 10px;
    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) --- */
.pbento {
    display: grid;
    grid-template-columns: minmax(248px, 300px) 1fr;
    gap: var(--sp-4);
    align-items: start;
    margin: 0 0 var(--sp-4);
}
.pstack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    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: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.st-v {
    font-weight: 700;
    font-size: 14px;
    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: 13px;
    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: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.trail-v {
    color: var(--text);
    font-size: 13px;
    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: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.wpn-tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}
.wpn b {
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
}
.arm-block {
    margin-top: var(--sp-4);
}
.arm-label {
    font-size: 10px;
    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: 7px 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: 12.5px;
    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: 900px) {
    .gear {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.gp {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 7px 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: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-soft);
}
.gp-name {
    font-weight: 700;
    color: var(--accent);
    font-size: 12px;
    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: 11px;
    font-weight: 700;
    margin: 2px 0 0;
} /* gear-set name + equipped piece count */
.gp-dur {
    margin-left: auto;
    flex: none;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 7px;
}
.gp-attrs {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gp-affixes {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
}
.af {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: 11.5px;
    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: 4px;
}
.af.attune span,
.af.attune b {
    color: var(--attune);
}
.af.attune .af-star {
    font-size: 10px;
}
.af.attune.inactive span,
.af.attune.inactive b {
    color: var(--text-faint);
}
.af-off {
    font-size: 9px;
    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: 4px;
}

/* ════════════════════════════════════════════════════════════════
   PLAYER PROFILE - DOSSIER RESTYLE (visual pass only, no structure change)
   Everything is scoped under .pprofile so the shared .pcard / .stats / .st
   classes keep their original look in Match History + the combat sheet.
   Mirrors the Match Linking "dossier" panels (.mbreak / .combat-panel /
   .cgrp): dark gradient cards, Rajdhani uppercase section rules with an
   accent-dot + fading gradient line, mono numerals, purple/gold accents.
   ════════════════════════════════════════════════════════════════ */

/* --- hero: identity + headline figures (dossier header) --- */
.pprofile .phero {
    gap: var(--sp-5) var(--sp-6);
    padding: 20px 24px;
    border: 1px solid #262430;
    border-radius: 16px;
    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(140% 100% at 0% -10%, rgba(167, 139, 250, 0.13), transparent 52%),
        radial-gradient(120% 90% at 100% 0%, rgba(217, 164, 65, 0.05), transparent 50%),
        linear-gradient(180deg, #141318, #0c0c0e);
}
.pprofile .phero::after {
    background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, 0.012) 3px 4px);
    opacity: 0.5;
}
.pprofile .phero h2 {
    font-size: 30px;
    font-weight: 800;
}
.pprofile .phero-sign {
    color: var(--text-muted);
}
.pprofile .phero-meta .ppill {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.07);
}
.pprofile .phero-meta .pp-region,
.pprofile .phero-meta .pp-sect {
    background: var(--accent-soft);
    border-color: rgba(167, 139, 250, 0.3);
}

/* headline figures: mono numerals, accent figures glow like the dossier hero stats */
.pprofile .hf-v {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, #ffffff 30%, #b9b1d6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pprofile .hf-accent .hf-v {
    background: linear-gradient(180deg, #cdbcff, var(--accent-strong));
    -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;
}
.pprofile .hf-sep {
    -webkit-text-fill-color: var(--text-faint);
    color: var(--text-faint);
}

/* --- stat / loadout / trail cards: dossier surface + section rules --- */
.pprofile .pcard {
    padding: 16px 18px;
    border: 1px solid #262430;
    border-radius: 16px;
    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(167, 139, 250, 0.07), transparent 55%),
        linear-gradient(180deg, #141318, #0c0c0e);
}
.pprofile .pstack .pcard {
    padding: 14px 16px;
}
.pprofile .armory.pcard {
    padding: 18px 20px;
}

/* section header: Rajdhani uppercase + accent dot + fading gradient rule (mirrors .cgrp h4) */
.pprofile .pcard h3 {
    align-items: center;
    font-family: var(--font-logo), sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 var(--sp-3);
}
.pprofile .pcard h3::before {
    content: "";
    flex: none;
    width: 4px;
    height: 4px;
    margin-right: 9px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-glow);
}
.pprofile .pcard h3::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 11px;
    background: linear-gradient(90deg, #221f2c, transparent);
}
.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: 6px 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    transition: background var(--t-fast);
}
.pprofile .st:hover {
    background: rgba(167, 139, 250, 0.06);
}
.pprofile .st-l {
    color: var(--text-muted);
    letter-spacing: 0.1em;
}
.pprofile .st-v {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13.5px;
}
.pprofile .pcard-id .st-v {
    font-size: 12.5px;
}

/* 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: 11px;
    letter-spacing: 0.16em;
    color: var(--accent);
    display: flex;
    align-items: center;
}
.pprofile .arm-label::before {
    content: "";
    flex: none;
    width: 4px;
    height: 4px;
    margin-right: 9px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-glow);
}
.pprofile .arm-label::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 11px;
    background: linear-gradient(90deg, #221f2c, transparent);
}
.pprofile .wpn {
    gap: 9px;
    padding: 8px 14px;
    border-radius: 12px;
    background: linear-gradient(160deg, #1b1924, #131217);
    border: 1px solid #262433;
    border-left: 2px solid var(--accent);
}
.pprofile .wpn-tag {
    font-family: var(--font-logo), sans-serif;
    color: var(--accent);
}
.pprofile .iw {
    padding: 8px 11px;
    background: linear-gradient(165deg, #1a1923, #131217);
    border: 1px solid #262433;
    border-left: 3px solid var(--pc, var(--accent));
    border-radius: 11px;
}
.pprofile .iw:hover {
    background: linear-gradient(165deg, #201d2c, #15131b);
    border-color: var(--border-hover);
    box-shadow: 0 14px 30px -20px rgba(139, 92, 246, 0.5);
}
.pprofile .iw.mystic {
    border-left-color: var(--accent);
}
.pprofile .gp {
    padding: 9px 11px;
    background: linear-gradient(165deg, #1a1923, #131217);
    border: 1px solid #262433;
    border-radius: 12px;
}
.pprofile .gp:hover {
    border-color: var(--accent);
    box-shadow: 0 14px 30px -20px rgba(139, 92, 246, 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: 11px;
}

/* --- 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: 13px;
    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 .res {
    font-family: var(--font-logo), sans-serif;
    font-weight: 700;
    width: 46px;
    flex: none;
    letter-spacing: 0.05em;
    font-size: 14px;
}
.match.win .res {
    color: var(--green);
}
.match.loss .res {
    color: var(--red);
}
.match .mode {
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.match .vs {
    color: var(--text-muted);
    font-size: 12.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match .dur {
    margin-left: auto;
    flex: none;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* responsive: collapse the bento, then the figure row */
@media (max-width: 980px) {
    .pbento {
        grid-template-columns: 1fr;
    }
    .pstack {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .pstack .pcard {
        flex: 1 1 220px;
    }
}
@media (max-width: 560px) {
    .pprofile .phero {
        padding: var(--sp-4);
    }
    .phero h2 {
        font-size: 23px;
    }
    .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: 24px;
    }
    .hf-div {
        display: none;
    }
    .pstack .pcard {
        flex: 1 1 100%;
    }
}
@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: 8px;
    margin-bottom: 14px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 11px;
    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: 999px;
}
/* Cached-snapshot banner: prominent "this is saved data" notice + premium refresh CTA */
.cache-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    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: 14px;
}
.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: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.cache-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--attune);
    box-shadow: 0 0 0 4px rgba(217, 164, 65, 0.16);
}
.cache-banner-sub {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
}
.cache-refresh {
    margin-left: auto;
    flex: none;
    background: var(--accent);
    color: #0a0a0a;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 999px;
    padding: 12px 22px;
    cursor: pointer;
}
.cache-refresh:hover {
    background: var(--accent-strong);
}
.cache-prem {
    margin-left: auto;
    flex: none;
    color: var(--accent);
    font-size: 12.5px;
    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 24px;
    box-shadow: var(--shadow-card);
}
.pending h2 {
    font-size: 20px;
}
.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: 12px;
    margin-top: var(--sp-4);
    flex-wrap: wrap;
}
.calc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #0a0a0a;
    font-weight: 700;
    font-size: 13px;
    padding: 9px 16px;
    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 4px;
    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: 7px 11px;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 13px;
    outline: none;
    width: 180px;
}
.cmp-input:focus {
    border-color: var(--accent);
}
.cmp-bar button {
    background: var(--accent);
    color: #0a0a0a;
    border: 0;
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.cmp-heads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 12px 0;
}
.cmp-head {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.cmp-name {
    font-size: 18px;
    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: 11px;
    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: 12px;
    margin: 16px 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: 12px;
    color: var(--text-muted);
    padding: 3px 7px;
    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: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.link-uid {
    font-weight: 700;
}
.link-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 5px;
}
.link-sync {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 7px;
}
.sync-stat {
    font-size: 12px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 10px;
}
.sync-k {
    color: var(--text-muted);
    margin-right: 3px;
}
.wip-banner {
    margin: 8px 0 4px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    background: var(--attune-soft);
    border: 1px solid var(--attune);
    color: var(--attune);
    font-size: 12px;
}
.wip-banner b {
    color: var(--attune);
}
.link-hint {
    margin-top: 9px;
    font-size: 12.5px;
    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: 8px 11px;
}
.link-hint b {
    color: var(--text);
    font-weight: 700;
}
.sync-help {
    margin-top: 9px;
    font-size: 12.5px;
    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 12px;
}
.sync-help-h {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--attune);
    margin-bottom: 4px;
}
.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-sign {
    font-size: 12px;
    color: var(--text-faint);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}
.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: 16px;
    flex-shrink: 0;
}
.link-status {
    font-size: 12.5px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.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, #f87171);
    font-weight: 700;
}
.link-status .phase {
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
}
.link-stop {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.link-stop:hover {
    color: var(--red);
    border-color: var(--red);
}
.link-req-btn {
    margin-top: 10px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-sm);
    padding: 9px 16px;
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.link-req-btn:hover {
    color: #0a0a0a;
    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: 7px 18px;
}
.claim-btn .claim-sub {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.75;
}
.claim-btn .claim-soon {
    font-size: 6px;
    font-weight: 600;
    opacity: 0.65;
}
.claim-btn .claim-main {
    font-size: 14px;
    font-weight: 800;
}
.link-del {
    background: transparent;
    color: var(--text-faint);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.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 {
    align-items: center;
}
.link-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    align-self: flex-start;
}
.link-priv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.link-badges .link-req-btn {
    margin-top: 0;
    background: var(--green);
    color: #07210f;
    border-color: transparent;
    font-weight: 800;
    font-size: 14.5px;
    padding: 11px 24px;
    box-shadow: 0 4px 14px rgba(0, 230, 118, 0.22);
    /* Idle/not-tracking is the only state this button renders in, so draw the eye to it as the primary CTA. */
    animation: trackPulse 2.6s ease-in-out infinite;
}
@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) {
    .link-badges .link-req-btn { animation: none; box-shadow: 0 4px 16px rgba(0, 230, 118, 0.35); }
}
.link-badges .link-req-btn:hover {
    background: #00c853;
    color: #07210f;
}
.link-del {
    color: var(--red);
    border-color: rgba(255, 94, 91, 0.4);
}
/* Combat-stats panel (synced, live) */
.combat-panel {
    margin: 6px 0 4px;
    padding: 10px 14px 8px;
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(167, 139, 250, 0.06), transparent 60%),
        var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.combat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.combat-spacer {
    flex: 1;
}
.combat-title {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text);
}
.live-dot {
    position: relative;
    padding-left: 15px;
    font-size: 11px;
    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; }
}
.combat-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}
.chero {
    padding: 6px 10px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.chero-v {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.chero-rec .chero-v {
    color: var(--attune);
}
.chero-rank .chero-v {
    color: var(--accent);
}
.chero-sep {
    color: var(--text-faint);
    font-weight: 500;
    margin: 0 3px;
}
.chero-l {
    margin-top: 2px;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
.cgrp {
    margin-bottom: 6px;
}
.cgrp h4 {
    display: flex;
    align-items: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--accent);
    margin: 0 0 2px;
}
.cgrp h4::before {
    content: "";
    width: 3px;
    height: 10px;
    margin-right: 7px;
    background: var(--accent);
    border-radius: 2px;
}
/* one consolidated stats column: dense leader rows, value + delta chip right-aligned */
.cgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.cstat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    border-bottom: 1px dotted var(--border-soft);
    padding: 2px 2px;
}
.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: 12.5px;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}

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

/* footer (mirrors the hub) */
.site-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 14px 32px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.35);
}
.site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}
.site-footer-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.site-footer-links a {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    transition: color 0.15s;
}
.site-footer-links a:hover {
    color: var(--accent);
}
.site-footer-copy {
    color: rgba(255, 255, 255, 0.28);
    font-size: 11px;
}
.site-footer-disclaimer {
    max-width: 1180px;
    margin: 14px auto 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

/* agent log tail */
.logbox {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    max-height: clamp(220px, 48vh, 520px); /* ~half-screen on 1080p, not the whole page; scroll inside */
    overflow: auto;
    overscroll-behavior: contain; /* don't chain scroll to the page when hitting top/bottom */
    margin: 0;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}
.logline {
    padding: 1px 0;
}
.logts {
    color: var(--accent);
    opacity: 0.75;
    margin-right: 8px;
}
/* /logs tab chooser + history pickers */
.log-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
.log-tab {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 7px 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:hover {
    border-color: var(--accent);
    color: var(--text);
}
.log-tab.on {
    color: #0a0a0a;
    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: 4px 9px;
    font: 12px/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,
.op-pill {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition:
        color 0.15s,
        border-color 0.15s;
}
.hist-chip:hover,
.op-pill:hover {
    border-color: var(--accent);
    color: var(--text);
}
.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: 4px; /* room for the scrollbar so rows aren't clipped */
}
/* keep the health strip pinned while the tables scroll under it */
.q-health {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg);
    padding-bottom: var(--sp-1);
}
.q-health {
    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 18px/1.1 var(--font);
    color: var(--text);
}
.q-stat i {
    font-style: normal;
    font-size: 12px;
    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 13px/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: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    text-align: center;
}
.q-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.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: 12px;
    color: var(--text-faint);
}
.q-detail-h code {
    color: var(--accent);
}
.q-detail-x {
    background: none;
    border: 0;
    color: var(--text-faint);
    font-size: 18px;
    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: 12px;
}
.q-pager button {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 12px;
    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: 12px;
    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: 12px;
    padding: 3px 8px;
    width: 150px;
}
.q-detail-tools button {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 11px;
    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;
}
.jt-head {
    min-width: 0;
}
.jt-raw {
    overflow-wrap: anywhere;
}
.q-table {
    table-layout: fixed;
    width: 100%;
}
.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 8px;
    min-width: 180px;
}
.jt-count {
    font-size: 12px;
    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: 12px;
    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: 11px;
    transition: transform 0.12s;
}
.rpc-cap:not(.open) .cap-tog {
    transform: rotate(-90deg);
}
.rpc-cap:not(.open) .cap-body {
    display: none;
}
.copy-btn {
    margin-left: auto;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 10px;
    cursor: pointer;
    transition:
        border-color var(--t-fast),
        color var(--t-fast);
}
.copy-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}
.lb-meta {
    text-align: right;
    margin: 0 0 10px;
    font-size: 12px;
}
.lb-meta .lb-cd {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
/* weapon-usage-by-rank-tier breakdown (shown when a weapon filter is active) */
.lb-tiers {
    margin: 2px 0 14px;
    padding: 13px 16px;
    background: linear-gradient(180deg, #16151b, #100f14);
    border: 1px solid #262430;
    border-radius: 12px;
}
.lb-tiers-h { font: 600 13px 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: 11px; }
.lb-tiers-row { display: flex; flex-wrap: wrap; gap: 12px; }
.lb-tier {
    min-width: 124px;
    padding: 11px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #242231;
    border-radius: 10px;
    text-align: center;
}
.lb-tier-n { font: 800 26px var(--font-mono); color: var(--text); line-height: 1; }
.lb-tier-l { font: 600 11px var(--font); color: var(--text-muted); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.06em; }
.lb-tier-sub { font: 500 10px 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: 20px;
}
.load-card {
    background: var(--surface);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 32px 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 4px;
    width: 48px;
    height: 48px;
    border-width: 4px;
}
.load-label {
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.01em;
}
.load-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    min-height: 18px;
}
.load-prem {
    margin-top: 4px;
    color: var(--accent);
    font-size: 12px;
    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 {
    margin-top: 22px;
    text-align: left;
}
.recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.recent-clear {
    background: none;
    border: 0;
    color: var(--text-faint);
    font: inherit;
    font-size: 10px;
    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: 8px;
}
.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 12px;
    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: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-sub {
    color: var(--text-faint);
    font-size: 11px;
}

/* back-to-lookup link (profile actions) */
.back-lookup {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    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 {
    white-space: pre-wrap;
    word-break: break-word;
}
.jt-kids {
    margin-left: 14px;
    border-left: 1px solid var(--border-soft);
    padding-left: 8px;
}
.jt-head {
    cursor: pointer;
    user-select: text;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}
.jt-head:hover {
    background: var(--surface-3);
    border-radius: 4px;
}
.jt-tog {
    display: inline-block;
    color: var(--text-faint);
    font-size: 10px;
    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: 11px;
    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: 8px;
    margin: 14px 0 6px;
    font-size: 11px;
    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: 11px;
    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: 16px 0;
    max-width: 640px;
}
.set-row {
    display: grid;
    gap: 4px;
}
.set-k {
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.set-k code {
    color: var(--text-faint);
    font-size: 11px;
    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: 14px;
    padding: 8px 12px;
    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: 12px;
}
/* read-only (wrangler-managed) settings: show set/unset state in place of an input */
.set-ro-val {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    padding: 7px 2px;
}
.set-ro-val em {
    color: var(--text-faint);
}
.set-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.set-save {
    background: var(--accent);
    color: #0a0a0a;
    border: 0;
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    padding: 9px 22px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast);
}
.set-save:hover {
    background: var(--accent-strong);
}

@media (max-width: 768px) {
    .topbar-inner {
        padding: 12px 16px;
    }
    main.hub-main {
        padding: 20px 16px 8px;
    }
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .nav-hub {
        margin-left: 0;
    }
    .site-footer {
        padding: 14px 16px 12px;
    }
    .site-footer-bottom {
        justify-content: center;
    }
}

/* --- Match Linking: gear panel + in-site compare drawer ------------------- */
.gear-panel {
    margin: 14px 0 6px;
    padding: 18px 20px 16px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(167, 139, 250, 0.07), transparent 60%),
        var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.gear-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}
.gear-sub {
    font-size: 12px;
    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: 7px;
    padding: 10px 12px;
    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: 8px;
}
.gslot-name {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.02em;
}
.gslot-meta {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.gslot-att {
    margin-left: auto;
    align-self: center;
    font-family: var(--font-logo), system-ui, sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--attune);
    background: color-mix(in srgb, var(--attune) 14%, transparent);
    border-radius: 999px;
    padding: 1px 7px;
}
.gslot-rolls {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.gslot-roll {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}
.gslot-roll.empty {
    color: var(--text-faint);
    font-style: italic;
    border-style: dashed;
}
.gslot-cta {
    font-size: 10.5px;
    color: var(--accent);
    font-weight: 600;
    opacity: 0.82;
}
.gslot:hover .gslot-cta {
    opacity: 1;
}
.gear-note {
    margin: 10px 2px 0;
    font-size: 11.5px;
    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 20px 20px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
.gcmp-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.gcmp-title {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.03em;
    flex: 1;
}
.gcmp-mode {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.gm-btn {
    padding: 5px 14px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.gm-btn.on {
    background: var(--accent);
    color: #16121f;
}
.gcmp-close {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
}
.gcmp-close:hover {
    color: var(--text);
}
.gcmp-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) {
    .gcmp-cols {
        grid-template-columns: 1fr;
    }
}
.gcmp-col h4 {
    margin: 0 0 8px;
    font-size: 11px;
    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: 13px;
}
.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, 6px);
    color: var(--text);
    font-size: 12.5px;
    padding: 7px 8px;
    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, 6px);
    color: var(--text-faint);
    cursor: pointer;
    font-size: 15px;
}
.gcmp-del:hover {
    color: var(--red, #f87171);
    border-color: var(--red, #f87171);
}
.gcmp-add {
    margin-top: 2px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 12px;
    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 16px;
    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: 26px;
    letter-spacing: 0.08em;
}
.gv-stamp.up { color: var(--green, #4ade80); }
.gv-stamp.down { color: var(--red, #f87171); }
.gv-stamp.even { color: var(--text-muted); }
.gv-pct {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}
.gv-pct.up { color: var(--green, #4ade80); }
.gv-pct.down { color: var(--red, #f87171); }
.gv-pct.even { color: var(--text-muted); }
.gv-note {
    font-size: 12px;
    color: var(--text-faint);
}
.gv-phys { flex-basis: 100%; display: flex; gap: 8px; margin-top: 2px; }
.gvp {
    font-size: 12px;
    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, #4ade80); border-color: rgba(74, 222, 128, 0.3); }
.gvp.down { color: var(--red, #f87171); 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: 13px;
    width: min(360px, calc(100vw - 36px));
    padding: 15px 16px;
    background:
        radial-gradient(140% 150% at 100% 0%, rgba(167, 139, 250, 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(167, 139, 250, 0.18);
    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: 24px;
    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: 16px;
    letter-spacing: 0.04em;
    color: var(--accent);
    margin-bottom: 4px;
}
.cfly-steps {
    margin: 0;
    padding-left: 17px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
}
.cfly-steps b {
    color: var(--attune);
}
.cfly-x {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: 0;
    color: var(--text-faint);
    font-size: 17px;
    cursor: pointer;
    padding: 4px 7px;
}
.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: rgba(74, 222, 128, 0.14);
    border: 2px solid var(--green, #4ade80);
    color: var(--green, #4ade80);
    font-size: 26px;
    font-weight: 800;
}
.ls-stamp {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 800;
    font-size: 34px;
    letter-spacing: 0.22em;
    color: var(--green, #4ade80);
    text-shadow: 0 0 26px rgba(74, 222, 128, 0.35);
}
.ls-sub {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text);
}
.ls-pin {
    margin-top: 12px;
    display: inline-block;
    padding: 7px 13px;
    font-size: 12.5px;
    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: 12px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.ls-next b {
    color: var(--green, #4ade80);
}
@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;
}
.combat-panel.no-side .cp-body {
    grid-template-columns: 1fr;
}
@media (max-width: 780px) {
    .cp-body {
        grid-template-columns: 1fr;
    }
}
/* the gear module renders inside the side region — flatten its outer panel chrome */
.cp-side .gear-panel {
    margin: 0;
    padding: 11px 12px 10px;
}
.cp-side .gear-grid {
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 8px;
}
.cp-side .gslot {
    padding: 9px 11px;
}
.cp-side .gear-head {
    margin-bottom: 9px;
}
.cp-side .gear-sub {
    display: none;
}
.cp-side .gear-panel .combat-title {
    font-size: 13px;
}

/* --- snapshot mode: gold is reserved for the armed state --- */
.snap-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 5px 12px;
    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: 11.5px;
    font-weight: 700;
    color: var(--attune);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.35);
    border-radius: 999px;
    padding: 5px 12px;
    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: 13px;
    line-height: 1;
    cursor: pointer;
}
.snap-clear:hover {
    color: var(--red, #f87171);
    border-color: var(--red, #f87171);
}

/* --- 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: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 1px 6px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.dlt.up {
    color: var(--green, #4ade80);
    background: rgba(74, 222, 128, 0.12);
}
.dlt.down {
    color: var(--red, #f87171);
    background: rgba(248, 113, 113, 0.12);
}
.cs-v .dlt {
    margin-right: 4px;
}
@keyframes dlt-pop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .dlt { animation: none; }
}

/* --- gear-based average DPS headline (engine score; deltas vs the armed snapshot) --- */
.gear-dps {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 8px 11px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.gd-l {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    flex-basis: 100%;
}
.gd-row {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}
.gd-k {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.gd-v {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 800;
    font-size: 19px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

/* --- link-account stepper (1 enter UID → 2 set Signature → 3 verify) --- */
.lsteps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 10px;
    flex-wrap: wrap;
}
.lstep {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    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: 12.5px;
    color: var(--text-faint);
    background: var(--surface-3);
    border: 1px solid var(--border);
}
.lstep.on .lstep-n {
    color: #16121f;
    background: var(--accent);
    border-color: var(--accent);
}
.lstep-t {
    font-size: 12.5px;
    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: 8px;
    flex-wrap: wrap;
}
.copy-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 700;
    padding: 0 14px;
    min-height: 44px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.copy-btn:hover,
.copy-btn:focus-visible {
    border-color: var(--accent);
}
.lc-instr {
    font-size: 13px;
    color: var(--text);
}
.lc-instr b {
    color: var(--attune);
}
.lc-temp {
    font-size: 12px;
    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: 12px;
    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 {
    position: relative;
    margin: 0 0 14px;
    padding: 14px 16px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
}
.link-intro-x {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text);
    opacity: 0.5;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}
.link-intro-x:hover {
    opacity: 1;
}
.link-intro-h {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--text);
}
.link-intro p {
    margin: 0 0 8px;
    font-size: 13px;
    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 12px;
    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: 12.5px;
}
.link-intro-ad-tag {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--attune);
    background: rgba(217, 164, 65, 0.14);
    border-radius: 999px;
    padding: 3px 8px;
    margin-top: 1px;
}

/* --- not-live indicators: honest state when stats are a last-sync snapshot --- */
.live-off,
.link-status.offline {
    font-size: 11px;
    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, #f87171);
    opacity: 0.75;
    margin-right: 5px;
    font-size: 9px;
    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: 9px;
    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; }
}

/* --- re-read gear control (forces a bot re-scan so DPS tracks an in-game swap) --- */
.gd-reread {
    margin-left: auto;
    align-self: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--accent);
    font-size: 11px;
    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;
}
.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 12px 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: 11px;
    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: 12.5px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
}
.sw-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 11.5px;
    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: 12px;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}
.sw-arr {
    color: var(--text-faint);
    font-weight: 400;
}
.sw-verdict {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--border);
}
.sw-verdict .gv-stamp {
    font-size: 15px;
}
.sw-pcts {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.swap-card.sw-multi {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
    .swap-card { animation: none; }
}

/* --- gold rates strip: WWM caps the gold (gear-bonus) number — crit 80 / affinity 40 --- */
.gear-gold {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 7px 11px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.gg-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.gg-k {
    font-size: 11px;
    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: 15px;
    color: var(--attune);
    font-variant-numeric: tabular-nums;
}
.gg-cap {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
}
.gg-item.over .gg-v {
    color: var(--red, #f87171);
}
.gg-flag {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--red, #f87171);
    background: rgba(248, 113, 113, 0.12);
    border-radius: 999px;
    padding: 1px 7px;
}
.sw-cap {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--red, #f87171);
}

/* --- takeover claim UI + live-gear tag --- */
.link-claim .lc-instr b {
    color: var(--red, #f87171);
}
#claimsigbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    width: 100%;
}
.gear-live-tag {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--green, #4ade80);
    background: rgba(74, 222, 128, 0.12);
    border-radius: 999px;
    padding: 2px 8px;
    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 {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.cp-hist h4 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--accent);
    margin: 0 0 8px;
}
.cp-hist-note {
    font-size: 10px;
    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: 7px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}
.mh-filter {
    font: inherit;
    font-size: 12px;
    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: 8px; }
.mh-pg {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
}
.mh-pg:hover:not(:disabled) { border-color: var(--accent, #a78bfa); }
.mh-pg:disabled { opacity: 0.4; cursor: default; }
.mh-pg-n { font-size: 11px; color: var(--text-faint); min-width: 84px; text-align: center; }
.mh-export {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
}
.mh-export:hover { border-color: var(--accent, #a78bfa); }
.mh-dmg-tbl td.mh-dps { color: var(--text-faint); font-size: 11.5px; }
.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: 11px;
    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: 8px;
    padding: 12px 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: 8px;
    font-size: 13px;
    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: 12px;
    padding: 2px 7px;
    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-when {
    margin-left: auto;
    color: var(--text-faint);
    font-size: 11px;
    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: 18px;
    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: 12px;
    line-height: 1.5;
}
.mh-dmg.is-empty {
    color: var(--text-faint);
    font-style: italic;
}
.mh-dmg-tbl {
    width: 100%;
    border-collapse: collapse;
}
.mh-dmg-tbl th {
    text-align: right;
    font-weight: 600;
    color: var(--text-faint);
    padding: 3px 8px;
    border-bottom: 1px solid var(--surface-3);
    font-size: 10.5px;
    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 8px;
    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: 9px; color: var(--text-faint); margin-left: 5px; vertical-align: 1px; }
.mh-sk[open] > summary::after { content: "▴"; }
.mh-sk-tag { font-size: 10px; color: var(--text-faint); margin-left: 6px; }
.mh-sk-list { margin: 6px 0 4px 21px; display: flex; flex-direction: column; gap: 2px; }
.mh-sk-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; font-size: 11.5px; 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 8px; display: flex; flex-direction: column; gap: 3px; }
.mh-comp-h { font-size: 10px; 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: 8px; font-size: 11px; font-variant-numeric: tabular-nums; }
.mh-comp-k { color: var(--text-faint); }
.mh-comp-k.CRI_DMG { color: var(--gold, #e8c66a); }
.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(--accent, #a78bfa); }
.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 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--green) 35%, var(--surface-3));
    border-radius: var(--radius-md, 8px);
    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: 7px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    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: 8px;
    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: 12.5px;
    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 7px;
    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: 10.5px;
    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;
}

/* gold (effective) rate values - matches the in-game parenthesised gold number */
.gold-eff {
    color: var(--attune);
    font-size: 11.5px;
    font-weight: 700;
    margin-left: 4px;
}
.gg-raw {
    font-size: 10.5px;
    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 {
    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: 14.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 9px 14px;
    cursor: pointer;
    min-height: 44px;
}
.lk-tab:hover {
    color: var(--text);
}
.lk-tab.on {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.lk-tab-n {
    margin-left: 7px;
    background: var(--accent);
    color: #16121f;
    border-radius: 999px;
    font-size: 11px;
    padding: 1px 7px;
    vertical-align: 1px;
}
.acct {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    overflow: hidden;
}
.acct-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 16px;
    background: transparent;
    border: 0;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    min-height: 44px;
    flex-wrap: wrap;
    font-size: 13px;
}
.acct-head:hover {
    background: rgba(255, 255, 255, 0.02);
}
.acct-id {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.acct-name {
    font-weight: 700;
    font-size: 14.5px;
}
.acct-ranks {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.acct-rank {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 800;
    font-size: 10.5px;
    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: 999px;
    padding: 2px 8px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.acct-rank b {
    font-weight: 800;
    font-size: 8.5px;
    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: 4px 6px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 0.15s;
}
.acct-unlink:hover {
    color: var(--red);
    text-decoration: underline;
}
.acct-chev {
    color: var(--text-faint);
    transition: transform 0.18s ease;
    font-size: 13px;
}
.acct.open .acct-chev {
    transform: rotate(180deg);
}
.acct-detail {
    padding: 0 16px 14px;
    border-top: 1px solid var(--border-soft);
}
.acct-detail .combat-panel {
    border: 0;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    margin: 8px 0 0;
}
@media (prefers-reduced-motion: reduce) {
    .acct-chev { transition: none; }
}

/* account detail sub-tabs (Overview | Matches) */
.acct-subtabs {
    display: flex;
    gap: 4px;
    margin: 10px 0 4px;
    border-bottom: 1px solid var(--border-soft);
}
.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: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 7px 12px;
    cursor: pointer;
    min-height: 36px;
}
.sub-tab:hover {
    color: var(--text);
}
.sub-tab.on {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.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: 4px;
}

/* 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: 11.5px;
}

/* custom-room / match roster strip */
.cp-room {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 12px;
    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-l {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--green, #4ade80);
}
.cp-room-m {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    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: 8px 2px 4px;
}
.room-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 800;
    font-size: 15px;
    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, #4ade80);
}
.room-status.on .room-dot {
    background: var(--green, #4ade80);
    animation: livepulse 1.8s ease-out infinite;
}
.room-roster {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.sub-tab.alive {
    color: var(--green, #4ade80);
}
@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: 8px;
}
.opp-card {
    flex: 1 1 420px;
    max-width: 880px; /* multiple opponents (3v3) share the row, each capped */
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 13px 16px;
    overflow: hidden;
}
.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: 8px;
    margin-bottom: 7px;
}
.opp-name {
    font-family: var(--font-logo), system-ui, sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
}
.opp-lk {
    font-size: 11px;
    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: 8px;
}
.opp-rank {
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: 999px;
    padding: 2px 9px;
}
.opp-guild,
.opp-lvl {
    font-size: 10.5px;
    color: var(--text-faint);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 2px 9px;
}
.opp-row {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 8px;
    padding: 3px 0;
    border-top: 1px dotted var(--border-soft);
    font-size: 12px;
}
.opp-k {
    color: var(--text-faint);
    text-transform: uppercase;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    padding-top: 2px;
}
.opp-v {
    color: var(--text);
    font-weight: 600;
}
.opp-loading {
    font-size: 12px;
}

/* opponent attunement chips */
.opp-att-row {
    align-items: start;
}
.opp-atts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.opp-att {
    font-size: 11px;
    font-weight: 600;
    color: var(--attune);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.25);
    border-radius: var(--radius-sm, 6px);
    padding: 2px 7px;
    line-height: 1.3;
    cursor: help;
}

/* 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: 11.5px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    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 {
    display: block;
    width: 100%;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--attune);
    background: var(--attune-soft);
    border: 1px solid rgba(217, 164, 65, 0.22);
    border-radius: var(--radius-sm, 6px);
    padding: 4px 9px;
    line-height: 1.4;
    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: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 4px;
    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 12px;
    padding: 9px 13px;
    font-size: 12.5px;
    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, 10px);
}
.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 {
    position: relative;
    padding: 20px 22px 18px;
    background:
        radial-gradient(150% 80% at 0% -10%, rgba(167, 139, 250, 0.10), transparent 55%),
        radial-gradient(120% 90% at 100% 0%, rgba(217, 164, 65, 0.05), transparent 50%),
        linear-gradient(180deg, #141318, #0c0c0e);
    border: 1px solid #262430;
    border-radius: 16px;
    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::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, 0.012) 3px 4px);
    pointer-events: none;
    opacity: 0.5;
}
.combat-panel > * { position: relative; }
.combat-head {
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 13px;
    border-bottom: 1px solid #1e1c26;
}
.combat-title {
    font-family: var(--font-logo), sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
}

/* ── hero stat cards ──────────────────────────────────────────── */
.combat-hero {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.chero {
    position: relative;
    padding: 13px 18px 12px;
    background: linear-gradient(160deg, #1b1924, #131217);
    border: 1px solid #262433;
    border-radius: 13px;
    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: 13px; bottom: 13px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
    box-shadow: 0 0 12px var(--accent-glow);
}
.chero-v {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(180deg, #ffffff 30%, #b9b1d6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.chero-rec .chero-v {
    background: linear-gradient(180deg, #ffdc84, #d39a32);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.chero-sep { -webkit-text-fill-color: var(--text-faint); color: var(--text-faint); margin: 0 4px; font-weight: 500; }
.chero-l {
    margin-top: 7px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── stat groups: dossier section rules ───────────────────────── */
.cgrp { margin-bottom: 11px; }
.cgrp h4 {
    align-items: center;
    font-family: var(--font-logo), sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin: 0 0 5px;
}
.cgrp h4::before {
    content: "";
    width: 4px; height: 4px;
    margin-right: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-glow);
}
.cgrp h4::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 10px;
    background: linear-gradient(90deg, #221f2c, transparent);
}
.cstat {
    padding: 3px 5px;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.028);
    border-radius: 5px;
    transition: background var(--t-fast);
}
.cstat:hover { background: rgba(167, 139, 250, 0.06); }
.cs-k { color: var(--text-muted); }
.cs-v { font-size: 13px; color: var(--text); }
.gold-eff {
    color: var(--attune);
    background: var(--attune-soft);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 11px;
    margin-left: 6px;
}

/* ── gear: DPS hero + gold strip + polished tiles ─────────────── */
.cp-side .gear-panel { padding: 0; margin: 0; background: none; border: none; }
.cp-side .gear-panel .combat-title { font-size: 12px; letter-spacing: 0.16em; }
.gear-head { margin-bottom: 12px; }
.gear-dps {
    gap: 10px;
    margin: 0 0 12px;
    padding: 0;
    background: none;
    border: none;
    flex-wrap: wrap;
}
.gear-dps .gd-l {
    flex-basis: 100%;
    font-family: var(--font-logo), sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 2px;
}
.gd-row {
    flex: 1 1 150px;
    align-items: baseline;
    gap: 10px;
    padding: 13px 18px;
    background: linear-gradient(160deg, #1c1a27, #121118);
    border: 1px solid #2a2738;
    border-radius: 13px;
}
.gd-k {
    font-family: var(--font-logo), sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.gd-v {
    margin-left: auto;
    font-family: var(--font-logo), sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 0.9;
    background: linear-gradient(180deg, #cdbcff, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.gd-reread { flex-basis: 100%; align-self: flex-start; margin-top: 2px; }
.gd-note { flex-basis: 100%; margin-top: 2px; font-size: 11px; line-height: 1.45; color: var(--text-faint); }
.gd-note b { color: var(--text-muted); font-weight: 700; }
.gear-gold {
    gap: 12px;
    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: 12px;
    flex-wrap: wrap;
}
.gear-gold .gd-l {
    flex-basis: 100%;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(217, 164, 65, 0.65);
    margin-bottom: 1px;
}
.cp-side .gear-grid {
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 10px;
}
.cp-side .gslot {
    gap: 9px;
    padding: 12px 14px;
    background: linear-gradient(165deg, #1a1923, #131217);
    border: 1px solid #262433;
    border-left: 2px solid var(--accent);
    border-radius: 12px;
    transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.cp-side .gslot:hover, .cp-side .gslot:focus-visible {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -18px rgba(139, 92, 246, 0.55);
}
.gslot-name { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.gslot-meta { color: var(--text-faint); }
.gslot-att { background: var(--attune-soft); color: var(--attune); }
.gslot-roll {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #b6b0c2;
}
.gslot-cta { margin-top: 2px; color: var(--accent); opacity: 0.72; }

/* ════════════════════════════════════════════════════════════════
   MATCH BREAKDOWN - dossier-style PvP analytics (the "Breakdown" tab of the Match Linking account detail)
   ════════════════════════════════════════════════════════════════ */
.mbreak-page { width: 100%; }
.mb-page-empty { padding: 28px 8px; text-align: center; }
.mbreak {
    position: relative;
    padding: 18px 20px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px 24px;
    align-items: start;
    background:
        radial-gradient(140% 80% at 100% -10%, rgba(217, 164, 65, 0.06), transparent 55%),
        linear-gradient(180deg, #141318, #0c0c0e);
    border: 1px solid #262430;
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 60px -30px rgba(0, 0, 0, 0.85);
}
.mbreak > .mbreak-head, .mbreak > .mb-hero, .mbreak > .mb-wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .mbreak { grid-template-columns: 1fr; } }
.mbreak-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #1e1c26; }
.mbreak-title { font-family: var(--font-logo), sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); }
.mbreak-sub { font: 500 12px var(--font-mono); color: var(--text-faint); }
.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: 36px; line-height: 0.9; }
.mb-rec .mb-w { color: var(--green); }
.mb-rec .mb-l { color: var(--red); }
.mb-rec .mb-slash { color: var(--text-faint); font-size: 26px; }
.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: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.mb-wr-top b { font: 700 16px var(--font-mono); color: var(--text); }
.mb-streaks { display: flex; gap: 14px; margin-top: 7px; font: 500 11px var(--font-mono); color: var(--text-faint); }
.mb-track { display: block; height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 99px; overflow: hidden; }
.mb-track.lg { height: 9px; }
.mb-track > i { display: block; height: 100%; border-radius: 99px; 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: 99px; 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 16px; padding: 11px 0; border-top: 1px solid #1a1822; border-bottom: 1px solid #1a1822; }
.mb-fperiod { display: inline-flex; gap: 3px; background: rgba(255, 255, 255, 0.04); border-radius: 99px; padding: 3px; }
.mb-fpill { font: 600 11px var(--font); color: var(--text-muted); background: transparent; border: 0; border-radius: 99px; padding: 5px 13px; 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: 8px; align-items: center; }
.mb-fchip { display: inline-flex; align-items: center; gap: 7px; font: 600 11px var(--font-mono); color: var(--text); background: var(--attune-soft); border: 1px solid rgba(217, 164, 65, 0.3); border-radius: 99px; padding: 4px 5px 4px 12px; }
.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: 12px; line-height: 1; cursor: pointer; }
.mb-fx:hover { background: var(--red); color: #fff; }
.mb-fhint { font: 500 11px 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: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 7px; border-bottom: 1px solid #1a1822; }
.mb-meta { margin-left: auto; font: 500 10px var(--font-mono); color: var(--text-faint); letter-spacing: 0; text-transform: none; }
.mb-crit { margin-left: auto; font: 700 12px 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, #1a1923, #131217); border: 1px solid #242231; border-radius: 11px; }
.mb-form-k { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.mb-form-v { font: 700 17px var(--font-mono); color: var(--text); }
.mb-form-p { font: 600 11px 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(--accent); }
.mb-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 500 11px var(--font-mono); color: var(--text-muted); }
.mb-pies { display: flex; flex-wrap: wrap; gap: 36px; justify-content: center; padding: 4px 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 20px var(--font-mono); color: var(--attune); line-height: 1; }
.mb-pie-hole i { font: 600 8px var(--font); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-top: 1px; }
.mb-pie-lbl { font: 600 11px var(--font); color: var(--text); }
.mb-pie-sub { font: 500 10px 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(--accent); }
.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: 12px; }
.mb-row-k { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-row-v { font: 600 12px var(--font-mono); color: var(--text-muted); text-align: right; white-space: nowrap; }
.mb-crow { display: flex; flex-direction: column; gap: 5px; padding: 4px 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 12px 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: 12px; }
@media (max-width: 480px) {
    .mb-rec { font-size: 30px; }
    .mb-row { grid-template-columns: minmax(64px, 1.2fr) 1.6fr auto; gap: 9px; }
}