/* =====================================================
   CRIMORA CITY PROFILE SYSTEM
   ===================================================== */

:root {
    --profile-accent: #e0b84c;
    --profile-accent-rgb: 224, 184, 76;
    --profile-accent-soft: rgba(224, 184, 76, .14);
    --profile-bg: #080a0d;
    --profile-surface: #11151b;
    --profile-surface-raised: #171c24;
    --profile-surface-soft: #1c222c;
    --profile-border: rgba(255,255,255,.09);
    --profile-border-strong: rgba(255,255,255,.16);
    --profile-text: #f4f6f9;
    --profile-muted: #98a1ad;
    --profile-dim: #68717d;
    --profile-success: #4fd786;
    --profile-danger: #ff6673;
    --profile-warning: #f2bd55;
    --profile-info: #65b9ff;
    --profile-radius-xl: 28px;
    --profile-radius-lg: 20px;
    --profile-radius-md: 14px;
    --profile-shadow: 0 24px 70px rgba(0,0,0,.48);
}

body[data-accent="red"] { --profile-accent:#ef5f67; --profile-accent-rgb:239,95,103; }
body[data-accent="admin-red"] { --profile-accent:#ff3f50; --profile-accent-rgb:255,63,80; --profile-accent-soft:rgba(255,63,80,.16); }
body[data-accent="blue"] { --profile-accent:#5faeff; --profile-accent-rgb:95,174,255; }
body[data-accent="green"] { --profile-accent:#55d88b; --profile-accent-rgb:85,216,139; }
body[data-accent="purple"] { --profile-accent:#bb7cff; --profile-accent-rgb:187,124,255; }
body[data-accent="cyan"] { --profile-accent:#4de8df; --profile-accent-rgb:77,232,223; }
body[data-accent="orange"] { --profile-accent:#f29c52; --profile-accent-rgb:242,156,82; }
body[data-accent="silver"] { --profile-accent:#c8d0da; --profile-accent-rgb:200,208,218; }

body[data-theme="slate"] { --profile-bg:#0a0d11; --profile-surface:#141920; --profile-surface-raised:#1c232c; --profile-surface-soft:#232b36; }
body[data-theme="crimson"] { --profile-bg:#0e0709; --profile-surface:#190e12; --profile-surface-raised:#241319; --profile-surface-soft:#301921; }
body[data-theme="emerald"] { --profile-bg:#06100d; --profile-surface:#0c1915; --profile-surface-raised:#10231d; --profile-surface-soft:#163028; }
body[data-theme="royal"] { --profile-bg:#0c0813; --profile-surface:#171020; --profile-surface-raised:#21172d; --profile-surface-soft:#2b1d3a; }
body[data-theme="neon"] { --profile-bg:#050910; --profile-surface:#0a1420; --profile-surface-raised:#0d1c2a; --profile-surface-soft:#102638; }
body[data-theme="syndicate"] { --profile-bg:#080808; --profile-surface:#121212; --profile-surface-raised:#191919; --profile-surface-soft:#202020; }
body[data-theme="imperial"] { --profile-bg:#0c0b08; --profile-surface:#17140d; --profile-surface-raised:#211c11; --profile-surface-soft:#2d2617; }
body[data-theme="administrator"] { --profile-bg:#0d0305; --profile-surface:#1a070a; --profile-surface-raised:#290a0f; --profile-surface-soft:#3a1017; }
body[data-theme="amber"] { --profile-bg:#150d02; --profile-surface:#241705; --profile-surface-raised:#382209; --profile-surface-soft:#4f3010; }
body[data-theme="toxic"] { --profile-bg:#0a1400; --profile-surface:#182b00; --profile-surface-raised:#253f00; --profile-surface-soft:#345700; }
body[data-theme="wine"] { --profile-bg:#170308; --profile-surface:#2b0610; --profile-surface-raised:#3f0a18; --profile-surface-soft:#591024; }
body[data-theme="arctic"] { --profile-bg:#050d14; --profile-surface:#0d1e2c; --profile-surface-raised:#142c40; --profile-surface-soft:#1c3d57; }
body[data-theme="carbon"] { --profile-bg:#0a0a0a; --profile-surface:#141414; --profile-surface-raised:#1e1e1e; --profile-surface-soft:#292929; }
body[data-accent="rose"] { --profile-accent:#ff8fb3; --profile-accent-rgb:255,143,179; }
body[data-accent="lime"] { --profile-accent:#a8ff3d; --profile-accent-rgb:168,255,61; }
body[data-accent="copper"] { --profile-accent:#c97b4a; --profile-accent-rgb:201,123,74; }
body[data-accent="ice"] { --profile-accent:#bdeeff; --profile-accent-rgb:189,238,255; }


/* =====================================================
   RELIABLE HIDDEN STATE
   ===================================================== */

/*
   Some profile components use display:grid or display:flex.
   This rule ensures the HTML hidden attribute always wins,
   including hospital and prison status cards.
*/
[hidden] {
    display: none !important;
}

.is-hidden {
    display: none !important;
}

body {
    background:
        radial-gradient(circle at 15% 8%, rgba(var(--profile-accent-rgb), .08), transparent 34rem),
        linear-gradient(180deg, var(--profile-bg), #07080a 72%);
    color: var(--profile-text);
}

body.modal-open { overflow: hidden; }

.profile-page-shell,
.customisation-shell {
    width: min(1480px, calc(100% - 24px));
    margin: 14px auto 40px;
}

.profile-loading-card,
.profile-error-card {
    min-height: 380px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:45px;
    border:1px solid var(--profile-border);
    border-radius:var(--profile-radius-xl);
    background:linear-gradient(145deg, var(--profile-surface-raised), var(--profile-surface));
    box-shadow:var(--profile-shadow);
}

.profile-loading-card h1,
.profile-loading-card h2,
.profile-error-card h1,
.profile-error-card h2 { margin:18px 0 8px; color:var(--profile-text); }
.profile-loading-card p,
.profile-error-card p { margin:0 0 24px; color:var(--profile-muted); }
.profile-loading-spinner {
    width:54px; height:54px; border-radius:50%;
    border:4px solid rgba(255,255,255,.09);
    border-top-color:var(--profile-accent);
    animation:profileSpin .8s linear infinite;
}
.profile-error-icon { font-size:54px; }

.profile-dossier { animation:profileEntrance .45s ease both; }

.profile-hero {
    min-height:335px;
    position:relative;
    overflow:hidden;
    border:1px solid var(--profile-border-strong);
    border-radius:var(--profile-radius-xl);
    box-shadow:var(--profile-shadow);
    isolation:isolate;
    background:#111;
}

.profile-hero::before,
.profile-preview-banner::before {
    content:"";
    position:absolute; inset:0;
    background:
        radial-gradient(circle at 78% 18%, rgba(var(--profile-accent-rgb), .35), transparent 27rem),
        linear-gradient(115deg, rgba(6,8,11,.12), rgba(6,8,11,.8));
    z-index:1;
}

.profile-hero-image,
.profile-preview-header-image {
    position:absolute;
    inset:0;
    z-index:0;
    background-position:center right;
    background-size:cover;
    background-repeat:no-repeat;
}
.profile-hero-image::after,
.profile-preview-header-image::after {
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,#050609 0%,rgba(5,6,9,.82) 11%,rgba(5,6,9,.42) 24%,rgba(5,6,9,.08) 38%,transparent 52%),
        linear-gradient(180deg,transparent 65%,rgba(5,6,9,.12));
}
.profile-preview-header-image { background-position:center; }
.profile-preview-header-image::after {
    background:linear-gradient(180deg,transparent 58%,rgba(5,6,9,.28));
}

.profile-hero[data-banner="city"], .profile-preview-card[data-banner="city"] .profile-preview-banner { background:linear-gradient(135deg,#101820,#1e2731 48%,#0b0e13); }
.profile-hero[data-banner="alleys"], .profile-preview-card[data-banner="alleys"] .profile-preview-banner { background:linear-gradient(135deg,#171416,#332021 48%,#0b0b0c); }
.profile-hero[data-banner="docks"], .profile-preview-card[data-banner="docks"] .profile-preview-banner { background:linear-gradient(135deg,#081922,#173446 48%,#071014); }
.profile-hero[data-banner="skyline"], .profile-preview-card[data-banner="skyline"] .profile-preview-banner { background:linear-gradient(135deg,#11162c,#283d65 48%,#080b15); }
.profile-hero[data-banner="vault"], .profile-preview-card[data-banner="vault"] .profile-preview-banner { background:linear-gradient(135deg,#161718,#41464a 48%,#0b0c0d); }
.profile-hero[data-banner="penthouse"], .profile-preview-card[data-banner="penthouse"] .profile-preview-banner { background:linear-gradient(135deg,#17120a,#59441c 48%,#0b0905); }
.profile-hero[data-banner="command"], .profile-preview-card[data-banner="command"] .profile-preview-banner { background:radial-gradient(circle at 76% 22%,rgba(255,61,78,.34),transparent 27%),linear-gradient(135deg,#150204,#700d18 50%,#080102); }
.profile-hero[data-banner="warehouse"], .profile-preview-card[data-banner="warehouse"] .profile-preview-banner { background:linear-gradient(135deg,#141210,#3a3327 48%,#0c0b09); }
.profile-hero[data-banner="underground"], .profile-preview-card[data-banner="underground"] .profile-preview-banner { background:linear-gradient(135deg,#0d0f0a,#2a3320 48%,#080a06); }
.profile-hero[data-banner="neon-strip"], .profile-preview-card[data-banner="neon-strip"] .profile-preview-banner { background:radial-gradient(circle at 70% 25%,rgba(255,45,190,.35),transparent 30%),linear-gradient(135deg,#0a0414,#2a0f3d 55%,#07030c); }
.profile-hero[data-banner="rooftop"], .profile-preview-card[data-banner="rooftop"] .profile-preview-banner { background:linear-gradient(135deg,#0a0f1c,#1f2f4d 48%,#060911); }

.profile-hero-pattern {
    position:absolute; inset:0;
    z-index:2;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:36px 36px;
    mask-image:linear-gradient(to right, transparent, #000 35%, #000);
}
.profile-hero.has-custom-header .profile-hero-pattern,
.profile-preview-card.has-custom-header .profile-hero-pattern { display:none; }
.profile-hero.has-custom-header::before {
    background:
        linear-gradient(90deg,rgba(0,0,0,.22),transparent 42%),
        linear-gradient(180deg,transparent 58%,rgba(0,0,0,.72));
}
.profile-preview-card.has-custom-header .profile-preview-banner::before {
    background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.78));
}
.profile-hero-shade { position:absolute; inset:0; z-index:3; background:linear-gradient(90deg,rgba(5,7,9,.92),rgba(5,7,9,.58) 55%,rgba(5,7,9,.14)); }
.profile-hero.has-custom-header .profile-hero-shade { background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 42%); }
.profile-hero.has-hospital-status { border-color:rgba(101,185,255,.5); }
.profile-hero.has-prison-status { border-color:rgba(255,102,115,.5); }

.profile-hero-content {
    position:relative;
    z-index:4;
    min-height:335px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:end;
    gap:32px;
    padding:58px 58px 46px;
}

.profile-avatar-frame {
    width:184px; height:184px; flex:0 0 auto;
    border-radius:50%; padding:7px; position:relative;
    background:linear-gradient(145deg,var(--profile-accent),rgba(var(--profile-accent-rgb),.25));
    box-shadow:0 0 0 5px rgba(0,0,0,.35),0 20px 55px rgba(0,0,0,.5),0 0 32px rgba(var(--profile-accent-rgb),.22);
}
.profile-avatar { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; background:#0a0b0d; border:4px solid #0c0e11; }
.profile-online-dot { position:absolute; right:10px; bottom:18px; width:24px; height:24px; border-radius:50%; background:#66707c; border:5px solid #0c0e11; }
.profile-online-dot.online { background:#4fd786; box-shadow:0 0 16px rgba(79,215,134,.75); }

.frame-steel { border-radius:24%; background:repeating-linear-gradient(135deg,#d5d9de 0 8px,#666d76 8px 16px); }
.frame-steel::before,.frame-steel::after { content:"•"; position:absolute; color:#252a30; font-size:24px; z-index:3; }
.frame-steel::before { left:8px; top:2px; }.frame-steel::after { right:8px; bottom:2px; }
.frame-crimson { background:linear-gradient(135deg,#f9ff9f,#d3a014,#f9ff9f); clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%); border-radius:10%; }
.frame-tactical { background:conic-gradient(from 0deg,var(--profile-accent) 0 8%,transparent 8% 17%,var(--profile-accent) 17% 25%,transparent 25% 42%,var(--profile-accent) 42% 50%,transparent 50% 67%,var(--profile-accent) 67% 75%,transparent 75% 92%,var(--profile-accent) 92%); padding:10px; }
.frame-tactical::after { content:"⌖"; position:absolute; inset:-16px; display:grid; place-items:center; font-size:230px; color:rgba(var(--profile-accent-rgb),.18); pointer-events:none; }
.frame-royal { background:conic-gradient(#f5d77c,#7f48c7,#f5d77c,#7f48c7,#f5d77c); box-shadow:0 0 0 5px #21152d,0 0 35px rgba(187,124,255,.38); }
.frame-crown::before { content:"♛"; position:absolute; left:50%; top:-42px; transform:translateX(-50%); font-size:52px; color:var(--profile-accent); text-shadow:0 5px 15px #000; z-index:4; }
.frame-administrator { border-radius:18px; background:linear-gradient(135deg,#ff3448,#7b0715 48%,#ff5364); box-shadow:0 0 0 3px rgba(255,255,255,.08),0 0 40px rgba(255,45,67,.48); }
.frame-neon-ring { background:#0a0c10; box-shadow:0 0 0 4px #0a0c10,0 0 0 6px #2ff3ff,0 0 26px 4px rgba(47,243,255,.65),0 0 46px 10px rgba(255,47,230,.35); }
.frame-chainlink { border-radius:50%; background:repeating-radial-gradient(circle at 50% 50%,#9aa0a6 0 3px,#3a3f44 3px 9px,#9aa0a6 9px 12px); }
.frame-barbed { border-radius:50%; background:repeating-conic-gradient(#c7cbd1 0 5deg,#33383e 5deg 22deg); box-shadow:0 0 0 4px #14161a,0 10px 26px rgba(0,0,0,.5); }
.frame-barbed::before,.frame-barbed::after { content:"✕"; position:absolute; color:#1a1c20; font-size:16px; font-weight:900; z-index:3; }
.frame-barbed::before { left:2px; top:38%; } .frame-barbed::after { right:2px; bottom:38%; }
.frame-laurel { background:conic-gradient(#d9b64a,#4a7c3f,#d9b64a,#4a7c3f,#d9b64a); box-shadow:0 0 0 4px #14170f,0 0 30px rgba(74,124,63,.4); }

.profile-identity { min-width:0; }
.profile-eyebrow-row { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:13px; }
.profile-presence,.profile-role-badge,.profile-featured-badge {
    display:inline-flex; align-items:center; min-height:29px; padding:5px 11px;
    border-radius:999px; border:1px solid var(--profile-border-strong);
    background:rgba(7,9,12,.58); color:#bac1ca; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
.profile-presence::before { content:""; width:7px; height:7px; border-radius:50%; background:#69717b; margin-right:7px; }
.profile-presence.online::before { background:#4fd786; box-shadow:0 0 9px rgba(79,215,134,.75); }
.profile-role-badge.administrator { border-color:rgba(255,67,84,.62); color:#ff7886; background:rgba(92,5,16,.46); }
.profile-featured-badge.administrator { border-color:rgba(255,67,84,.62); color:#ff7886; background:rgba(92,5,16,.46); box-shadow:0 0 18px rgba(255,45,67,.16); }
.profile-featured-badge { border-color:rgba(var(--profile-accent-rgb),.38); color:var(--profile-accent); }
.profile-account-ban {
    display:inline-flex; align-items:center; min-height:29px; padding:5px 11px;
    border:1px solid #ff3b3b; border-radius:999px;
    background:#ff2d2d; color:#000; font-size:11px; font-weight:900;
    letter-spacing:.06em; line-height:1; text-transform:uppercase; white-space:nowrap;
    box-shadow:0 0 16px rgba(255,45,45,.45);
}
.profile-account-ban[hidden] { display:none !important; }
.profile-identity h1 { margin:0; font-size:clamp(34px,5vw,62px); line-height:1; letter-spacing:-.035em; color:#fff; text-shadow:0 8px 30px #000; overflow-wrap:anywhere; }
.profile-title { margin:13px 0 0; font-size:19px; font-weight:800; color:var(--profile-accent); letter-spacing:.03em; }
.profile-status-message { margin:15px 0 0; max-width:720px; font-size:16px; color:#dfe4ea; font-style:italic; }
.profile-identity-meta { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:24px; color:#aeb6c1; font-size:14px; }
.profile-identity-meta strong { color:#fff; }
.profile-hero.has-custom-header .profile-identity h1,
.profile-hero.has-custom-header .profile-identity .profile-status-message,
.profile-hero.has-custom-header .profile-identity-meta,
.profile-hero.has-custom-header .profile-identity-meta strong {
    text-shadow:0 1px 3px #000,0 0 9px rgba(0,0,0,.92),0 0 20px rgba(0,0,0,.66);
}
.profile-level-meta,.profile-experience-meta,.profile-rank-meta,.profile-protection-meta { display:inline-flex; align-items:center; gap:7px; }
.profile-protection-meta { padding:5px 8px; border:1px solid rgba(91,176,255,.32); border-radius:9px; background:rgba(45,121,184,.12); color:#b9ddff; }
.profile-protection-meta[hidden] { display:none; }
.profile-protection-meta button { margin-left:3px; padding:3px 7px; border:1px solid rgba(255,120,130,.4); border-radius:7px; background:rgba(120,25,34,.28); color:#ffd8dc; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.profile-protection-meta button:hover,.profile-protection-meta button:focus-visible { border-color:#ff7c88; background:rgba(160,36,47,.42); }
.profile-level-icon { width:30px; height:30px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 3px 7px rgba(0,0,0,.45)); }
.profile-rank-icon { width:27px; height:27px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 3px 7px rgba(0,0,0,.45)); }
.profile-rank-icon[hidden] { display:none !important; }
.profile-role-badge { gap:7px; }
.profile-role-icon { width:24px; height:24px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 3px 7px rgba(0,0,0,.45)); }
.profile-hero-actions { display:flex; flex-direction:column; gap:10px; align-items:stretch; min-width:180px; }

.profile-primary-button,.profile-secondary-button,.profile-level-button {
    display:inline-flex; justify-content:center; align-items:center; gap:7px;
    min-height:38px; padding:8px 14px; border-radius:10px; cursor:pointer;
    font:inherit; font-size:14px; font-weight:850; text-decoration:none; transition:.2s ease;
}
.profile-primary-button { border:1px solid var(--profile-accent); background:var(--profile-accent); color:#111; box-shadow:0 10px 24px rgba(var(--profile-accent-rgb),.18); }
.profile-secondary-button { border:1px solid var(--profile-border-strong); background:rgba(12,15,19,.72); color:#f4f6f9; }
.profile-primary-button:hover,.profile-secondary-button:hover,.profile-level-button:hover { transform:translateY(-2px); filter:brightness(1.08); }
.profile-primary-button:disabled,.profile-secondary-button:disabled,.profile-level-button:disabled { opacity:.55; cursor:not-allowed; transform:none; }


.profile-status-stack[hidden],
.profile-live-status[hidden],
.profile-status-stack.is-hidden,
.profile-live-status.is-hidden {
    display: none !important;
}

.profile-status-stack { display:grid; gap:8px; margin-top:10px; }
.profile-live-status {
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px;
    padding:12px 14px; border-radius:13px; border:1px solid var(--profile-border-strong);
    box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.status-hospital { background:linear-gradient(115deg,rgba(20,54,78,.96),rgba(10,25,36,.96)); border-color:rgba(101,185,255,.42); }
.status-prison { background:linear-gradient(115deg,rgba(72,22,29,.96),rgba(32,11,15,.96)); border-color:rgba(255,102,115,.42); }
.status-icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); }
.status-copy h2 { margin:2px 0 3px; font-size:16px; color:#fff; }.status-copy p { margin:0; font-size:12px; color:#cbd3dc; }
.status-kicker,.panel-kicker { display:block; color:var(--profile-accent); font-size:10px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.status-timing { text-align:right; }.status-timing span,.status-timing small { display:block; color:#aeb6c1; font-size:12px; }.status-timing strong { display:block; margin:3px 0; font-size:16px; color:#fff; font-variant-numeric:tabular-nums; }

.profile-summary-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:8px 0; border:1px solid var(--profile-border); border-radius:13px; background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.006)),rgba(15,19,24,.9); box-shadow:inset 0 1px rgba(255,255,255,.04); overflow:hidden; }
.profile-summary-item { display:flex; align-items:center; gap:8px; padding:9px 10px; border-right:1px solid var(--profile-border); }
.profile-summary-item:last-child { border-right:0; }.summary-icon { font-size:16px; }.summary-icon--image { width:22px; height:22px; display:grid; place-items:center; flex:0 0 22px; }.summary-icon--image img { width:22px; height:22px; object-fit:contain; filter:drop-shadow(0 3px 7px rgba(0,0,0,.4)); }.profile-summary-item small,.profile-summary-item strong { display:block; }.profile-summary-item small { color:var(--profile-muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }.profile-summary-item strong { margin-top:2px; color:#fff; font-size:12px; }

.profile-main-grid { column-count:2; column-gap:7px; column-fill:balance; }
.profile-main-grid > * { break-inside:avoid; -webkit-column-break-inside:avoid; }
.profile-main-column { display:flex; flex-direction:column; gap:7px; }
.profile-main-grid .profile-panel,
.profile-main-grid .profile-live-status,
.profile-main-grid .profile-actions-panel { margin-bottom:7px; }
.profile-panel { position:relative; padding:9px; border-radius:11px; border:1px solid var(--profile-border); background:linear-gradient(145deg,var(--profile-surface-raised),var(--profile-surface)); box-shadow:0 14px 38px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.04); overflow:hidden; transition:border-color .2s,transform .2s; }
.profile-panel::before { content:""; position:absolute; top:0; left:22px; right:22px; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--profile-accent-rgb),.55),transparent); opacity:.65; }
.profile-panel:hover { border-color:rgba(var(--profile-accent-rgb),.35); transform:translateY(-2px); }
.profile-panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px; }
.profile-panel-heading h2 { margin:2px 0 0; font-size:13px; color:#fff; }.panel-icon { width:22px; height:22px; display:grid; place-items:center; border-radius:7px; font-size:12px; background:var(--profile-accent-soft); border:1px solid rgba(var(--profile-accent-rgb),.2); }
.panel-icon--image img { width:18px; height:18px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.profile-bio { margin:0; color:#c7ced7; font-size:12px; line-height:1.45; white-space:pre-line; overflow-wrap:anywhere; }

.profile-progress-copy,.profile-progress-footer,.resource-label { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.profile-progress-copy { margin-bottom:4px; color:var(--profile-muted); font-size:12px; }.profile-progress-copy strong { color:#fff; }
.profile-progress-track,.resource-track { height:6px; border-radius:999px; overflow:hidden; background:#080a0d; border:1px solid rgba(255,255,255,.08); }
.profile-progress-fill,.resource-fill { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--profile-accent),rgba(var(--profile-accent-rgb),.72)); transition:width .5s ease; }
.profile-progress-footer { margin-top:4px; color:var(--profile-muted); font-size:11px; }.profile-level-button { min-height:26px; padding:5px 9px; border:1px solid var(--profile-accent); background:var(--profile-accent-soft); color:var(--profile-accent); }
@media(max-width:600px){.profile-progress-footer{display:grid;grid-template-columns:1fr;align-items:stretch}.profile-level-button{width:100%;min-height:36px}}
.profile-resource-list { display:grid; gap:6px; }.profile-resource { --resource-color:var(--profile-accent); }.profile-resource[data-resource="health"] { --resource-color:#ff4b55; }.profile-resource[data-resource="energy"] { --resource-color:#ffd83d; }.profile-resource[data-resource="momentum"] { --resource-color:#35cfff; }.profile-resource[data-resource="courage"] { --resource-color:#ff9f2f; }
.resource-label span { display:inline-flex; align-items:center; gap:4px; }.resource-label .ec-resource-icon-image { width:14px; height:14px; }.resource-label { margin-bottom:3px; color:#b8c0ca; font-size:11px; }.resource-label strong { color:#fff; }.profile-resource .resource-fill { background:var(--resource-color); box-shadow:0 0 16px color-mix(in srgb,var(--resource-color) 32%,transparent); }

.profile-finance-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.profile-finance-grid>div { padding:7px 8px; border-radius:8px; background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.008)),var(--profile-surface-soft); box-shadow:inset 0 1px rgba(255,255,255,.04); border:1px solid var(--profile-border); }.profile-finance-grid small,.profile-finance-grid strong { display:block; }.profile-finance-grid small { color:var(--profile-muted); font-size:10px; }.profile-finance-grid strong { margin-top:2px; color:#68df98; font-size:15px; }.profile-private-note { margin:6px 0 0; color:var(--profile-dim); font-size:10px; }

.profile-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }.profile-stat { padding:6px 5px; border-radius:7px; text-align:center; background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.008)),var(--profile-surface-soft); box-shadow:inset 0 1px rgba(255,255,255,.04); border:1px solid var(--profile-border); }.profile-stat small,.profile-stat strong { display:block; }.profile-stat small { color:var(--profile-muted); font-size:8.5px; letter-spacing:.04em; text-transform:uppercase; }.profile-stat strong { margin-top:2px; color:#fff; font-size:13px; }.profile-stat.featured { border-color:rgba(var(--profile-accent-rgb),.3); background:var(--profile-accent-soft); }.profile-stat.featured strong { color:var(--profile-accent); }.profile-stat.success strong { color:var(--profile-success); }.profile-stat.danger strong { color:var(--profile-danger); }
.profile-private-state { padding:10px; border:1px dashed var(--profile-border-strong); border-radius:9px; background:rgba(0,0,0,.14); text-align:center; color:var(--profile-muted); font-size:12px; }

.profile-equipment-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.equipment-slot { display:flex; align-items:center; gap:7px; min-height:0; padding:7px; border-radius:9px; background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.008)),var(--profile-surface-soft); box-shadow:inset 0 1px rgba(255,255,255,.04); border:1px solid var(--profile-border); }.equipment-icon { width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; border-radius:8px; font-size:14px; background:rgba(var(--profile-accent-rgb),.11); }.equipment-slot small,.equipment-slot strong,.equipment-slot em { display:block; }.equipment-slot small { color:var(--profile-muted); font-size:10px; }.equipment-slot strong { margin-top:1px; color:#fff; font-size:12px; }.equipment-slot em { margin-top:1px; color:var(--profile-accent); font-size:9px; font-style:normal; }

.battle-record-display { display:flex; align-items:center; justify-content:space-between; gap:8px; }.battle-record-score { display:flex; align-items:center; gap:8px; }.battle-record-score span:not(.record-divider) { text-align:center; }.battle-record-score small,.battle-record-score strong { display:block; }.battle-record-score small { color:var(--profile-muted); text-transform:uppercase; font-size:8.5px; letter-spacing:.06em; }.battle-record-score strong { margin-top:2px; font-size:19px; }.wins strong { color:var(--profile-success); }.losses strong { color:var(--profile-danger); }.record-divider { color:var(--profile-dim); font-size:16px; }.battle-win-rate { min-width:70px; padding:6px; text-align:center; border-radius:8px; background:var(--profile-accent-soft); border:1px solid rgba(var(--profile-accent-rgb),.22); }.battle-win-rate span,.battle-win-rate strong { display:block; }.battle-win-rate span { color:var(--profile-muted); font-size:9px; }.battle-win-rate strong { margin-top:2px; color:var(--profile-accent); font-size:15px; }
.combat-attribute-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }.combat-attribute-grid>div { display:grid; justify-items:center; align-content:center; min-height:62px; padding:6px 5px; border-radius:7px; text-align:center; background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.008)),var(--profile-surface-soft); box-shadow:inset 0 1px rgba(255,255,255,.04); border:1px solid var(--profile-border); }.combat-attribute-grid>div>.combat-stat-icon { margin-bottom:4px; width:20px !important; height:20px !important; }.combat-attribute-grid small,.combat-attribute-grid strong { display:block; }.combat-attribute-grid small { color:var(--profile-muted); font-size:9px; }.combat-attribute-grid strong { margin-top:2px; color:#fff; font-size:13px; }.combat-attribute-grid .battle-power { grid-column:1/-1; background:var(--profile-accent-soft); border-color:rgba(var(--profile-accent-rgb),.25); }.combat-attribute-grid .battle-power strong { color:var(--profile-accent); font-size:16px; }

.profile-actions-panel { margin-top:8px; padding:14px 16px; border:1px solid var(--profile-border); border-radius:16px; background:linear-gradient(145deg,var(--profile-surface-raised),var(--profile-surface)); box-shadow:var(--profile-shadow), inset 0 1px rgba(255,255,255,.04); }.profile-actions-heading { display:flex; justify-content:space-between; gap:12px; align-items:end; margin-bottom:10px; }.profile-actions-heading h2 { margin:2px 0 0; font-size:16px; }.profile-actions-heading p { margin:0; color:var(--profile-muted); font-size:12px; }.profile-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.profile-action { min-height:46px; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; cursor:pointer; text-align:left; color:#fff; background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.008)),var(--profile-surface-soft); box-shadow:inset 0 1px rgba(255,255,255,.04); border:1px solid var(--profile-border); transition:.2s; }.profile-action:hover { transform:translateY(-2px); border-color:var(--action-color,var(--profile-accent)); box-shadow:0 12px 25px rgba(0,0,0,.24); }.profile-action:disabled { opacity:.38; cursor:not-allowed; transform:none; }.profile-action>span { width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; font-size:14px; background:rgba(255,255,255,.06); }.profile-action strong,.profile-action small { display:block; font-size:13px; }.profile-action small { margin-top:2px; color:var(--profile-muted); font-size:11px; }.attack-action { --action-color:#ff6673; }.mug-action { --action-color:#f2bd55; }.hospital-action { --action-color:#65b9ff; } .revive-action { --action-color:#4fd786; }.message-action { --action-color:#62d9ef; }.money-action { --action-color:#4fd786; }.trade-action { --action-color:#56d6c9; }.friend-action { --action-color:#b477f3; }

.profile-modal[hidden] { display:none; }.profile-modal { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:20px; background:rgba(3,4,6,.82); backdrop-filter:blur(10px); }.profile-modal-card { width:min(460px,100%); position:relative; padding:34px; border-radius:24px; text-align:center; background:linear-gradient(145deg,var(--profile-surface-raised),var(--profile-surface)); border:1px solid rgba(var(--profile-accent-rgb),.38); box-shadow:0 30px 90px rgba(0,0,0,.7); animation:modalEntrance .22s ease both; }.profile-modal-close { position:absolute; right:14px; top:11px; width:38px; height:38px; border:0; border-radius:50%; cursor:pointer; color:var(--profile-muted); background:transparent; font-size:28px; }.profile-modal-icon { width:70px; height:70px; display:grid; place-items:center; margin:0 auto 18px; border-radius:20px; font-size:34px; background:var(--profile-accent-soft); border:1px solid rgba(var(--profile-accent-rgb),.28); }.profile-modal-card h2 { margin:6px 0 12px; }.profile-modal-card p { margin:0; color:var(--profile-muted); line-height:1.6; }.profile-modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:25px; }

/* =====================================================
   CUSTOMISATION PAGE
   ===================================================== */
.customisation-page-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }.customisation-page-heading h1 { margin:5px 0 7px; font-size:clamp(32px,5vw,52px); color:#fff; }.customisation-page-heading p { margin:0; color:var(--profile-muted); }
.customisation-workspace { display:grid; grid-template-columns:minmax(300px,430px) minmax(0,1fr); gap:20px; align-items:start; }.customisation-preview-column,.customisation-form-column { min-width:0; }.preview-sticky-wrap { position:sticky; top:22px; display:grid; gap:15px; }.preview-label { color:var(--profile-accent); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.profile-preview-card { overflow:hidden; border-radius:26px; background:var(--profile-surface); border:1px solid var(--profile-border-strong); box-shadow:var(--profile-shadow); }.profile-preview-banner { height:125px; position:relative; z-index:0; overflow:hidden; }.profile-preview-body { position:relative; z-index:2; padding:0 25px 27px; text-align:center; }.preview-frame { z-index:3; width:128px; height:128px; margin:-64px auto 14px; }.profile-preview-body h2 { margin:9px 0 0; font-size:27px; }.profile-preview-body .profile-title { font-size:15px; }.profile-preview-body .profile-status-message { margin:11px auto 0; font-size:13px; }.profile-preview-bio { min-height:60px; margin:18px 0; color:#c3cad3; line-height:1.55; white-space:pre-line; overflow-wrap:anywhere; }.preview-placeholder { opacity:.48; font-style:italic; }.preview-stat-row { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; padding-top:15px; border-top:1px solid var(--profile-border); color:var(--profile-muted); font-size:13px; }.preview-stat-row strong { color:#fff; }
.avatar-upload-card,.customisation-section { padding:24px; border:1px solid var(--profile-border); border-radius:var(--profile-radius-lg); background:linear-gradient(145deg,var(--profile-surface-raised),var(--profile-surface)); box-shadow:0 12px 35px rgba(0,0,0,.25); }.avatar-upload-card h2 { margin:4px 0 7px; }.avatar-upload-card p { color:var(--profile-muted); }.avatar-file-control { position:relative; display:block; overflow:hidden; margin:16px 0 12px; padding:14px; border-radius:13px; border:1px dashed var(--profile-border-strong); background:rgba(0,0,0,.12); cursor:pointer; }.avatar-file-control input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.avatar-file-control span,.avatar-file-control strong { display:block; }.avatar-file-control span { color:var(--profile-accent); font-weight:800; }.avatar-file-control strong { margin-top:4px; color:var(--profile-muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.avatar-upload-card>.profile-secondary-button { width:100%; }.customisation-inline-message { min-height:18px; margin:10px 0 0!important; font-size:12px; color:var(--profile-accent)!important; }
.profile-header-upload-card { border-color:rgba(var(--profile-accent-rgb),.28); }
.profile-header-positioner{margin:14px 0;padding:13px;border:1px solid var(--profile-border);border-radius:14px;background:rgba(0,0,0,.18)}
.profile-header-position-image{position:relative;width:100%;height:140px;overflow:hidden;border:1px solid var(--profile-border-strong);border-radius:11px;background:#0b0e12 50% 50%/cover no-repeat;cursor:grab;touch-action:none}
.profile-header-position-image:active{cursor:grabbing}
.profile-header-position-preview-label{display:block;margin:12px 0 6px;color:var(--profile-accent);font-size:.6rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.profile-header-position-preview{width:100%;height:64px;overflow:hidden;border:1px solid var(--profile-border-strong);border-radius:11px;background:#0b0e12 50% 50%/cover no-repeat}
.profile-header-positioner>p{margin:12px 0 8px;color:var(--profile-muted);font-size:.7rem;line-height:1.4}
.profile-header-positioner label{display:grid;gap:4px;margin-top:8px;color:var(--profile-muted);font-size:.68rem;font-weight:800}
.profile-header-positioner input[type="range"]{width:100%;accent-color:var(--profile-accent)}
.profile-header-upload-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.profile-header-upload-actions .profile-secondary-button { width:100%; }
.profile-remove-image-button { min-height:46px; padding:11px 15px; border:1px solid rgba(255,92,108,.38); border-radius:12px; background:rgba(100,13,25,.22); color:#ff9eaa; font:inherit; font-weight:800; cursor:pointer; }
.profile-remove-image-button:hover { border-color:#ff6b7c; background:rgba(133,19,34,.34); }
.profile-remove-image-button:disabled { opacity:.55; cursor:not-allowed; }
.customisation-form-column form { display:grid; gap:16px; }.customisation-section-heading { display:flex; align-items:center; gap:15px; margin-bottom:22px; }.customisation-section-heading>span { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:var(--profile-accent-soft); font-size:23px; }.customisation-section-heading h2 { margin:0; }.customisation-section-heading p { margin:5px 0 0; color:var(--profile-muted); }
.customisation-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; }.customisation-field { display:block; }.customisation-wide-field { grid-column:1/-1; }.customisation-field>span { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; color:#e9edf2; font-weight:800; }.customisation-field>span small { color:var(--profile-dim); font-weight:600; }.customisation-field input,.customisation-field textarea,.customisation-field select { width:100%; border:1px solid var(--profile-border-strong); border-radius:12px; background:#0b0e12; color:#f5f7fa; padding:13px 14px; font:inherit; outline:none; transition:.2s; }.customisation-field textarea { resize:vertical; min-height:130px; line-height:1.55; }.customisation-field select { cursor:pointer; }.customisation-field input:focus,.customisation-field textarea:focus,.customisation-field select:focus { border-color:var(--profile-accent); box-shadow:0 0 0 3px var(--profile-accent-soft); }.customisation-field em { display:block; min-height:17px; margin-top:7px; color:var(--profile-muted); font-size:11px; font-style:normal; }
.privacy-option-list { display:grid; gap:10px; }.privacy-option { position:relative; display:grid; overflow:hidden; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; padding:15px; border:1px solid var(--profile-border); border-radius:14px; background:var(--profile-surface-soft); cursor:pointer; }.privacy-option input { position:absolute; width:1px; height:1px; opacity:0; }.privacy-toggle { width:47px; height:25px; position:relative; border-radius:999px; background:#0a0c0f; border:1px solid var(--profile-border-strong); transition:.2s; }.privacy-toggle::after { content:""; position:absolute; width:17px; height:17px; left:3px; top:3px; border-radius:50%; background:#67717e; transition:.2s; }.privacy-option input:checked+.privacy-toggle { background:var(--profile-accent-soft); border-color:var(--profile-accent); }.privacy-option input:checked+.privacy-toggle::after { left:25px; background:var(--profile-accent); }.privacy-option strong,.privacy-option small { display:block; }.privacy-option small { margin-top:4px; color:var(--profile-muted); }

/* Condensed public-visibility list used on the Settings page */
.privacy-option-list--compact{gap:6px}
.privacy-option-list--compact .privacy-option{grid-template-columns:auto minmax(0,1fr);gap:11px;padding:9px 11px;border-radius:11px}
.privacy-option-list--compact .privacy-option strong{font-size:.82rem}
.privacy-option-list--compact .privacy-option small{margin-top:1px;font-size:.68rem;line-height:1.3}
.privacy-option-list--compact .privacy-toggle{width:36px;height:20px}
.privacy-option-list--compact .privacy-toggle::after{width:12px;height:12px;left:3px;top:3px}
.privacy-option-list--compact .privacy-option input:checked+.privacy-toggle::after{left:19px}
.customisation-save-bar { position:relative; top:auto; bottom:auto; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:17px 19px; border:1px solid rgba(var(--profile-accent-rgb),.28); border-radius:17px; background:rgba(13,16,21,.93); backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(0,0,0,.45); }.customisation-save-bar strong,.customisation-save-bar span { display:block; }.customisation-save-bar span { margin-top:3px; color:var(--profile-muted); font-size:12px; }

/* Compact Identity / Change player name sections */
.customisation-section--compact { padding:15px; }
.customisation-section--compact .customisation-section-heading { margin-bottom:12px; }
.customisation-section--compact .customisation-field-grid,
.customisation-section--compact form { gap:10px; }
.customisation-section--compact .customisation-field { margin-top:0; }
.customisation-section--compact .customisation-field+.customisation-field { margin-top:10px; }
.customisation-section--compact .customisation-field>span { margin-bottom:5px; }
.customisation-section--compact .customisation-field input,
.customisation-section--compact .customisation-field textarea { padding:9px 11px; }
.customisation-section--compact .customisation-field textarea { min-height:74px; }
.customisation-section--compact .customisation-field em { min-height:0; margin-top:4px; }
.customisation-section--compact .profile-name-change-card { gap:10px; }
.customisation-section--compact .profile-name-change-cost { min-width:180px; padding:10px 12px; gap:2px; }
.customisation-section--compact .profile-name-change-cost strong { font-size:1rem; }
.customisation-section--compact .profile-name-change-cost button { margin-top:4px; min-height:38px; }

body[data-layout="compact"] .profile-panel { padding:19px; }body[data-layout="compact"] .profile-main-grid { gap:12px; }
body[data-layout="showcase"] .profile-hero { min-height:390px; } body[data-layout="showcase"] .profile-hero-content { min-height:390px; padding-top:80px; } body[data-layout="showcase"] .profile-avatar-frame { width:210px; height:210px; }

@keyframes profileSpin { to { transform:rotate(360deg); } }
@keyframes profileEntrance { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:none; } }
@keyframes modalEntrance { from { opacity:0; transform:translateY(15px) scale(.96); } to { opacity:1; transform:none; } }

@media (max-width:1100px) {
    .profile-hero-content { grid-template-columns:auto minmax(0,1fr); padding:45px 38px 38px; }
    .profile-hero-actions { grid-column:1/-1; flex-direction:row; }.profile-hero-actions>* { flex:1; }
    .profile-summary-strip { grid-template-columns:1fr 1fr; }.profile-summary-item:nth-child(2) { border-right:0; }.profile-summary-item:nth-child(-n+2) { border-bottom:1px solid var(--profile-border); }
    .profile-stat-grid { grid-template-columns:1fr 1fr; }
    .customisation-workspace { grid-template-columns:340px minmax(0,1fr); }
}

@media (max-width:820px) {
    .profile-page-shell,.customisation-shell { width:min(100% - 22px,1480px); margin-top:18px; }
    .profile-hero-content { grid-template-columns:1fr; text-align:center; justify-items:center; padding:42px 24px 30px; }.profile-hero-shade { background:linear-gradient(180deg,rgba(5,7,9,.35),rgba(5,7,9,.92)); }.profile-hero.has-custom-header .profile-hero-shade { background:linear-gradient(180deg,transparent 58%,rgba(5,7,9,.34) 100%); }.profile-hero-image { background-position:center; }.profile-hero-image::after { background:radial-gradient(circle at 50% 24%,rgba(5,6,9,.46),transparent 27%),linear-gradient(180deg,transparent 70%,rgba(5,6,9,.16)); }.profile-eyebrow-row,.profile-identity-meta { justify-content:center; }.profile-status-message { margin-left:auto; margin-right:auto; }.profile-hero-actions { width:100%; }
    .profile-main-grid { column-count:1; }.profile-live-status { grid-template-columns:auto 1fr; }.status-timing { grid-column:1/-1; padding-top:13px; border-top:1px solid rgba(255,255,255,.1); text-align:left; }
    .profile-action-grid { grid-template-columns:1fr 1fr; }.profile-actions-heading { align-items:flex-start; flex-direction:column; }
    .customisation-workspace { grid-template-columns:1fr; }.preview-sticky-wrap { position:static; }.profile-preview-card { max-width:500px; width:100%; margin:auto; }.customisation-page-heading { align-items:flex-start; flex-direction:column; }.customisation-page-heading .profile-secondary-button { width:100%; }
}

@media (max-width:560px) {
    .profile-avatar-frame { width:145px; height:145px; }.profile-identity h1 { font-size:36px; }.profile-hero-actions { flex-direction:column; }
    .profile-summary-strip { grid-template-columns:1fr; }.profile-summary-item { border-right:0; border-bottom:1px solid var(--profile-border); }.profile-summary-item:last-child { border-bottom:0; }
    .profile-live-status { grid-template-columns:1fr; text-align:center; }.status-icon { margin:auto; }.status-timing { text-align:center; }
    .profile-panel { padding:11px; }.profile-finance-grid,.profile-equipment-grid,.profile-action-grid,.customisation-field-grid { grid-template-columns:1fr; }.customisation-wide-field { grid-column:auto; }
    .battle-record-display { align-items:stretch; flex-direction:column; }.battle-record-score { justify-content:center; }.combat-attribute-grid { grid-template-columns:1fr 1fr; }.profile-modal-actions { grid-template-columns:1fr; }
    .customisation-save-bar { align-items:stretch; flex-direction:column; }.customisation-save-bar .profile-primary-button { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}


/* =====================================================
   LEVEL-UP CONFIRMATION
===================================================== */

.profile-level-up-modal {
    z-index:330000;
    background:
        radial-gradient(circle at 50% 20%, rgba(var(--profile-accent-rgb), .16), transparent 34%),
        rgba(3, 4, 6, .86);
}

.level-up-modal-card {
    width:min(580px, 100%);
    overflow:hidden;
    padding:38px;
}

.level-up-modal-card::before {
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:5px;
    background:linear-gradient(90deg, transparent, var(--profile-accent), transparent);
}

.level-up-celebration {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-bottom:16px;
    color:var(--profile-accent);
    font-size:18px;
}

.level-up-celebration > span {
    animation:levelSpark 1.7s ease-in-out infinite alternate;
}

.level-up-celebration > span:last-child {
    animation-delay:.45s;
}

.level-up-modal-icon {
    width:78px;
    height:78px;
    margin:0;
    font-size:38px;
    border-radius:24px;
    box-shadow:
        0 0 0 8px rgba(var(--profile-accent-rgb), .06),
        0 0 38px rgba(var(--profile-accent-rgb), .18);
}

.level-up-introduction {
    max-width:470px;
    margin:0 auto!important;
}

.level-up-preview {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:14px;
    align-items:center;
    margin:27px 0 18px;
}

.level-preview-stage {
    min-height:112px;
    display:grid;
    place-content:center;
    gap:7px;
    padding:17px;
    border-radius:18px;
    background:rgba(0,0,0,.18);
    border:1px solid var(--profile-border);
}

.level-preview-stage small {
    color:var(--profile-muted);
    font-size:11px;
    font-weight:850;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.level-preview-stage strong {
    color:#fff;
    font-size:42px;
    line-height:1;
}

.level-preview-stage.next-stage {
    border-color:rgba(var(--profile-accent-rgb), .5);
    background:var(--profile-accent-soft);
    box-shadow:inset 0 0 24px rgba(var(--profile-accent-rgb), .08);
}

.level-preview-stage.next-stage strong {
    color:var(--profile-accent);
    text-shadow:0 0 18px rgba(var(--profile-accent-rgb), .28);
}

.level-preview-arrow {
    color:var(--profile-accent);
    font-size:27px;
    animation:levelArrow 1.25s ease-in-out infinite alternate;
}

.level-up-benefits {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    text-align:left;
}

.level-up-benefits > div {
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px;
    border-radius:14px;
    background:rgba(255,255,255,.035);
    border:1px solid var(--profile-border);
}

.level-up-benefits > div > span {
    width:37px;
    height:37px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:var(--profile-accent-soft);
}

.level-up-benefits p,
.level-up-benefits small,
.level-up-benefits strong {
    display:block;
    margin:0;
}

.level-up-benefits small {
    color:var(--profile-muted);
    font-size:10px;
}

.level-up-benefits strong {
    margin-top:3px;
    color:#fff;
    font-size:13px;
}

.level-up-hold-note {
    margin:17px 0 0!important;
    padding:12px 14px;
    border-radius:12px;
    color:var(--profile-muted)!important;
    background:rgba(255,255,255,.025);
    border:1px dashed var(--profile-border);
    font-size:12px;
}

.level-up-modal-message {
    margin:14px 0 0!important;
    padding:11px 13px;
    border-radius:11px;
    font-weight:750;
    font-size:13px;
}

.level-up-modal-message.success {
    color:#71e49b!important;
    background:rgba(50,190,108,.1);
    border:1px solid rgba(80,220,135,.25);
}

.level-up-modal-message.error {
    color:#ff8a93!important;
    background:rgba(220,65,78,.1);
    border:1px solid rgba(255,100,112,.25);
}

.level-up-modal-actions {
    margin-top:20px;
}

@keyframes levelSpark {
    from { opacity:.45; transform:scale(.82) rotate(-8deg); }
    to { opacity:1; transform:scale(1.16) rotate(8deg); }
}

@keyframes levelArrow {
    from { transform:translateX(-3px); opacity:.65; }
    to { transform:translateX(3px); opacity:1; }
}

@media(max-width:600px) {
    .level-up-modal-card { padding:30px 20px 22px; }
    .level-up-preview { grid-template-columns:1fr auto 1fr; gap:8px; }
    .level-preview-stage { min-height:95px; padding:12px 8px; }
    .level-preview-stage strong { font-size:34px; }
    .level-preview-arrow { font-size:20px; }
    .level-up-benefits { grid-template-columns:1fr; }
}

@media(prefers-reduced-motion:reduce) {
    .level-up-celebration > span,
    .level-preview-arrow { animation:none; }
}

.profile-action.is-planned{opacity:.52;filter:saturate(.35);cursor:not-allowed}.profile-action.is-planned:hover{transform:none;border-color:var(--profile-line)}


/* =========================
   KINGPIN PROFILE OPTIONS
========================= */
body[data-accent="blackgold"] { --profile-accent:#f3cf70; --profile-accent-rgb:243,207,112; }
body[data-theme="kingpin"] {
    --profile-bg:#060606;
    --profile-surface:#0d0d0d;
    --profile-surface-raised:#15130e;
    --profile-surface-soft:#1f1a10;
}
.profile-hero[data-banner="blackcard-suite"],
.profile-preview-card[data-banner="blackcard-suite"] .profile-preview-banner {
    background:
        radial-gradient(circle at 76% 28%,rgba(225,238,255,.3),transparent 23%),
        linear-gradient(135deg,#04070a,#16222c 48%,#050708);
}
.frame-blackcard {
    border-radius:28px;
    background:linear-gradient(145deg,#f7df91,#3a2609 34%,#0a0a0a 51%,#c8912f 78%,#f7df91);
    box-shadow:0 0 0 3px #070707,0 0 42px rgba(235,183,70,.34);
}
.frame-blackcard::before {
    content:"♠";
    position:absolute;
    right:-8px;
    top:-18px;
    z-index:5;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#070707;
    border:2px solid #f3cf70;
    color:#f3cf70;
    font-size:20px;
    box-shadow:0 8px 20px rgba(0,0,0,.55);
}
body[data-layout="executive"] .profile-hero { min-height:410px; }
body[data-layout="executive"] .profile-hero-content { min-height:410px; padding-top:86px; }
body[data-layout="executive"] .profile-avatar-frame { width:220px; height:220px; }
.profile-role-badge.kingpin,
.profile-kingpin-status,
.kingpin-customisation-notice {
    border:1px solid rgba(243,207,112,.5);
    background:linear-gradient(135deg,rgba(243,207,112,.18),rgba(9,9,9,.82));
    color:#f8df91;
    box-shadow:0 0 20px rgba(221,162,42,.12);
}
.profile-role-badge.kingpin { text-transform:uppercase; letter-spacing:.08em; }
.profile-kingpin-status { display:inline-flex; width:max-content; margin-top:10px; padding:7px 11px; border-radius:999px; font-size:.78rem; font-weight:800; }
.kingpin-customisation-notice { margin-top:12px; padding:10px 13px; border-radius:12px; font-size:.84rem; }

/* Expanded Kingpin collections */
body[data-accent="platinum"]{--profile-accent:#dce5ef;--profile-accent-rgb:220,229,239}body[data-accent="champagne"]{--profile-accent:#efd59b;--profile-accent-rgb:239,213,155}body[data-accent="bloodgold"]{--profile-accent:#d9a43d;--profile-accent-rgb:217,164,61}
body[data-theme="obsidian-vault"]{--profile-bg:#030405;--profile-surface:#090b0d;--profile-surface-raised:#12161a;--profile-surface-soft:#1b2025}body[data-theme="velvet-rope"]{--profile-accent:#ff62ba;--profile-accent-rgb:255,98,186;--profile-accent-soft:rgba(255,98,186,.16);--profile-bg:#10040b;--profile-surface:#1d0714;--profile-surface-raised:#300b21;--profile-surface-soft:#45102f}body[data-theme="gold-smoke"]{--profile-bg:#0b0905;--profile-surface:#151109;--profile-surface-raised:#221b0e;--profile-surface-soft:#302613}body[data-theme="midnight-executive"]{--profile-bg:#030712;--profile-surface:#081122;--profile-surface-raised:#0d1a31;--profile-surface-soft:#132440}
.profile-hero[data-banner="penthouse-night"],.profile-preview-card[data-banner="penthouse-night"] .profile-preview-banner{background:radial-gradient(circle at 70% 20%,rgba(255,45,190,.34),transparent 28%),linear-gradient(135deg,#0a0210,#2e0a2e 54%,#070308)}.profile-hero[data-banner="private-casino"],.profile-preview-card[data-banner="private-casino"] .profile-preview-banner{background:radial-gradient(circle at 72% 30%,rgba(60,255,140,.32),transparent 24%),linear-gradient(135deg,#040a06,#0d3320 52%,#060a07)}.profile-hero[data-banner="gold-vault"],.profile-preview-card[data-banner="gold-vault"] .profile-preview-banner{background:radial-gradient(circle at 72% 22%,rgba(255,206,92,.36),transparent 25%),linear-gradient(135deg,#060606,#36260b 55%,#080704)}.profile-hero[data-banner="boardroom"],.profile-preview-card[data-banner="boardroom"] .profile-preview-banner{background:linear-gradient(145deg,rgba(3,6,12,.86),rgba(30,39,52,.86)),radial-gradient(circle at 80% 20%,rgba(225,189,96,.28),transparent 30%)}
.profile-hero[data-banner="throne-room"],.profile-preview-card[data-banner="throne-room"] .profile-preview-banner{background:radial-gradient(circle at 25% 25%,rgba(255,200,110,.26),transparent 32%),linear-gradient(135deg,#04130a,#0f5c34 52%,#020a06)}.profile-hero[data-banner="skybridge-vip"],.profile-preview-card[data-banner="skybridge-vip"] .profile-preview-banner{background:radial-gradient(circle at 30% 70%,rgba(80,200,255,.32),transparent 30%),linear-gradient(135deg,#020c16,#0e3550 52%,#040a10)}
.frame-diamond-cut{border-radius:26px;background:conic-gradient(from 20deg,#ffdcee,#8f97a3,#ff9fc9,#3a3f47,#ffdcee);box-shadow:0 0 0 3px #0a080a,0 0 35px rgba(255,140,200,.3)}.frame-crownline{border-radius:50% 50% 38% 38%;background:linear-gradient(145deg,#a7dbe8,#123342 34%,#0a1216 55%,#2f7189 78%,#a7dbe8);box-shadow:0 0 0 3px #060a0c,0 0 38px rgba(90,190,220,.35)}.frame-private-vault{border-radius:50%;background:radial-gradient(circle at 28% 26%,rgba(200,160,255,.75) 0%,rgba(160,100,230,.4) 10%,transparent 26%),radial-gradient(circle at 74% 72%,rgba(170,110,240,.7) 0%,rgba(130,70,200,.4) 11%,transparent 28%),linear-gradient(150deg,#1d1129,#0a0611 58%,#1d1129);box-shadow:0 0 0 3px #050409,0 0 0 5px rgba(180,130,255,.5),0 0 22px 3px rgba(170,110,240,.6),0 0 48px 12px rgba(140,80,220,.35)}
body[data-layout="portfolio"] .profile-content-grid{grid-template-columns:1.25fr .75fr}body[data-layout="penthouse"] .profile-hero{min-height:460px}body[data-layout="penthouse"] .profile-hero-content{min-height:460px;padding-top:105px}body[data-layout="dossier"] .profile-section{border-style:dashed}body[data-layout="dossier"] .profile-hero-content{align-items:flex-start}


/* The Administrator theme keeps its red-black surfaces, while the accent selector remains independent. */

.profile-assets-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.profile-asset-card{display:flex;gap:13px;align-items:center;padding:15px;border-radius:14px;border:1px solid var(--profile-border,rgba(255,255,255,.1));background:rgba(10,15,24,.52)}.profile-asset-card>span{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:var(--profile-accent-soft,rgba(205,160,57,.12));font-size:1.55rem}.profile-asset-card small,.profile-asset-card em{display:block;color:var(--profile-muted,#9aa5b5);font-style:normal}.profile-asset-card strong{display:block;margin:3px 0}@media(max-width:620px){.profile-assets-grid{grid-template-columns:1fr}}


.profile-achievement-summary{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:center;margin-bottom:12px}.profile-achievement-summary>div{padding:12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.profile-achievement-summary small{display:block;color:var(--profile-muted,#9ea7b4);font-size:.75rem}.profile-achievement-summary strong{font-size:1.2rem}.profile-achievement-summary a{color:var(--profile-accent,#d9aa52);font-weight:750;text-decoration:none}.profile-achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.profile-achievement-chip{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.07)}.profile-achievement-chip>span{font-size:1.35rem}.profile-achievement-chip small{display:block;color:var(--profile-muted,#9ea7b4);font-size:.72rem}.profile-achievement-chip strong{font-size:.88rem}.profile-achievement-empty{grid-column:1/-1;padding:14px;text-align:center;color:var(--profile-muted,#9ea7b4);border:1px dashed rgba(255,255,255,.08);border-radius:12px}@media(max-width:620px){.profile-achievement-summary{grid-template-columns:1fr 1fr}.profile-achievement-summary a{grid-column:1/-1}.profile-achievement-grid{grid-template-columns:1fr}}

.combat-protection-notice { margin:0 0 16px; padding:13px 15px; border-radius:14px; border:1px solid rgba(100,185,255,.28); background:rgba(47,122,180,.1); color:var(--profile-muted); }
.combat-protection-notice strong { color:#fff; }
.combat-protection-notice.is-warning { border-color:rgba(242,189,85,.35); background:rgba(242,189,85,.09); }
.combat-protection-notice.is-blocked { border-color:rgba(255,102,115,.34); background:rgba(255,102,115,.09); }
.combat-protection-notice ul { margin:8px 0 0; padding-left:20px; }
.combat-protection-notice li + li { margin-top:5px; }
.combat-modal-protection { margin:14px 0 0; padding:12px 14px; border-radius:13px; color:var(--profile-muted); background:rgba(242,189,85,.09); border:1px solid rgba(242,189,85,.28); }

/* =====================================================
   DIRECT PLAYER MONEY TRANSFER
===================================================== */
.money-send-modal-card { width:min(520px,100%); }
.money-send-balance { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:22px 0 18px; padding:15px 17px; border:1px solid var(--profile-border); border-radius:14px; background:var(--profile-surface-soft); text-align:left; }
.money-send-balance span { color:var(--profile-muted); font-size:13px; font-weight:700; }
.money-send-balance strong { color:var(--profile-accent); font-size:22px; }
.money-send-entry { text-align:left; }
.money-send-field { display:block; }
.money-send-field>span { display:block; margin-bottom:8px; color:#eef2f6; font-weight:800; }
.money-send-input-shell { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; overflow:hidden; border:1px solid var(--profile-border-strong); border-radius:13px; background:#090c10; transition:.2s; }
.money-send-input-shell:focus-within { border-color:var(--profile-accent); box-shadow:0 0 0 3px var(--profile-accent-soft); }
.money-send-input-shell>span { padding:0 0 0 15px; color:var(--profile-accent); font-size:22px; font-weight:900; }
.money-send-input-shell input { min-width:0; width:100%; border:0; outline:0; padding:14px; background:transparent; color:#fff; font:inherit; font-size:20px; font-weight:850; }
.money-send-entry>small { display:block; margin-top:10px; color:var(--profile-muted); font-size:12px; }
.money-send-max { display:block; margin:9px 0 0 auto; padding:0; border:0; background:transparent; color:var(--profile-accent); cursor:pointer; font:inherit; font-size:12px; font-weight:800; }
.money-send-max:hover { text-decoration:underline; }
.money-send-review { margin-top:18px; padding:20px; border:1px solid rgba(var(--profile-accent-rgb),.3); border-radius:16px; background:var(--profile-accent-soft); }
.money-send-review>span,.money-send-review>strong { display:block; }
.money-send-review>span { color:var(--profile-muted); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.money-send-review>strong { margin:7px 0; color:var(--profile-accent); font-size:34px; }
.money-send-review p { font-size:13px; }
.money-send-success { margin-top:18px; padding:22px; border:1px solid rgba(79,215,134,.35); border-radius:16px; background:rgba(79,215,134,.08); }
.money-send-success>span { width:44px; height:44px; display:grid; place-items:center; margin:0 auto 10px; border-radius:50%; background:#4fd786; color:#07140d; font-size:22px; font-weight:900; }
.money-send-success strong,.money-send-success small { display:block; }
.money-send-success strong { color:#7ce5a5; font-size:20px; }
.money-send-success p { margin:8px 0!important; }
.money-send-success small { color:var(--profile-muted); overflow-wrap:anywhere; }
.money-send-message { margin-top:14px!important; padding:11px 13px; border-radius:11px; font-size:13px; }
.money-send-message.error { color:#ff9ca6!important; background:rgba(255,88,105,.1); border:1px solid rgba(255,88,105,.28); }

/* =====================================
   FRIENDS & RIVALS
   ===================================== */
.rival-action { --action-color:#ff7b72; }
.friend-action.is-selected,
.rival-action.is-selected {
    border-color:var(--action-color);
    background:color-mix(in srgb,var(--action-color) 12%,var(--profile-surface-soft));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--action-color) 35%,transparent);
}
.friend-action.is-selected>span,
.rival-action.is-selected>span {
    background:color-mix(in srgb,var(--action-color) 18%,transparent);
}
.profile-social-panel { padding:0;overflow:hidden; }
.profile-social-summary--compact {
    display:grid;
    grid-template-columns:1fr 1fr;
    margin:0;
}
.profile-social-summary--compact>div {
    min-height:82px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:16px 20px;
    color:inherit;
    text-decoration:none;
    background:var(--profile-surface-soft);
    transition:.18s ease;
}
.profile-social-summary--compact>div+div { border-left:1px solid var(--profile-border); }
.profile-social-summary--compact small { color:var(--profile-muted);font-size:12px; }
.profile-social-summary--compact strong { margin-top:3px;font-size:27px; }
.social-summary-friends strong { color:#e9c76b; }
.social-summary-rivals strong { color:#ff8c84; }

/* =====================================
   PRIVATE PLAYER REPORTS
   ===================================== */
.report-action { --action-color:#ffb35c; }
.report-action>span { color:#ffd19a; }
.player-report-modal-card { width:min(600px,100%); text-align:left; }
.player-report-modal-icon { color:#ffd19a; background:rgba(255,179,92,.12); }
.player-report-form { display:grid; gap:15px; margin-top:20px; }
.player-report-form label>span { display:block; margin-bottom:7px; color:#eef2f6; font-size:13px; font-weight:800; }
.player-report-form label em { color:var(--profile-muted); font-style:normal; font-weight:600; }
.player-report-form select,
.player-report-form textarea { width:100%; border:1px solid var(--profile-border-strong); border-radius:13px; background:#090c10; color:#fff; font:inherit; padding:12px 13px; resize:vertical; outline:none; }
.player-report-form select:focus,
.player-report-form textarea:focus { border-color:var(--profile-accent); box-shadow:0 0 0 3px var(--profile-accent-soft); }
.player-report-form label>small { display:block; margin-top:5px; color:var(--profile-muted); text-align:right; font-size:11px; }
.player-report-privacy { display:grid; grid-template-columns:32px 1fr; gap:10px; padding:13px; border:1px solid rgba(255,179,92,.24); border-radius:13px; background:rgba(255,179,92,.07); }
.player-report-privacy>span { font-size:20px; }
.player-report-privacy p { margin:0!important; color:var(--profile-muted)!important; font-size:12px; line-height:1.55; }
.player-report-privacy strong { display:block; color:#fff; }
.player-report-message { margin:0!important; padding:11px 13px; border-radius:11px; font-size:13px; }
.player-report-message.error { color:#ff9ca6!important; background:rgba(255,88,105,.1); border:1px solid rgba(255,88,105,.28); }
.player-report-success { margin-top:20px; padding:24px; border:1px solid rgba(79,215,134,.35); border-radius:16px; background:rgba(79,215,134,.08); text-align:center; }
.player-report-success>span { width:46px; height:46px; display:grid; place-items:center; margin:0 auto 10px; border-radius:50%; background:#4fd786; color:#07140d; font-size:23px; font-weight:900; }
.player-report-success strong { display:block; color:#7ce5a5; font-size:20px; }
.player-report-success p { margin:8px 0 18px!important; color:var(--profile-muted)!important; overflow-wrap:anywhere; }

.profile-role-badge.staff {
    border-color: rgba(74, 168, 255, .6);
    color: #8ccaff;
    background: rgba(10, 48, 86, .52);
}
.profile-role-badge.moderator {
    border-color: rgba(172, 112, 255, .58);
    color: #c8a4ff;
    background: rgba(54, 22, 94, .5);
}

.profile-statistics-button {
    border-color: rgba(96, 165, 250, 0.38);
    background: rgba(96, 165, 250, 0.09);
}

.profile-action.statistics-action {
    --action-accent: #60a5fa;
}

/* =====================================
   SEARCHABLE NPC PROFILES
   ===================================== */
body[data-entity-type="npc"] .profile-dossier {
    --npc-blue: #76bfff;
}
.profile-role-badge.npc {
    color: #b7dcff;
    border-color: rgba(118, 191, 255, .48);
    background: rgba(55, 133, 202, .18);
}
.profile-online-dot.npc {
    opacity: 1;
    background: #76bfff;
    box-shadow: 0 0 0 4px rgba(118, 191, 255, .13), 0 0 18px rgba(118, 191, 255, .52);
}
.npc-actions-panel {
    border-color: rgba(var(--profile-accent-rgb), .28);
}
.npc-district-action {
    background: linear-gradient(145deg, rgba(var(--profile-accent-rgb), .12), rgba(255, 255, 255, .025));
}
.npc-profile-panel {
    position: relative;
    overflow: hidden;
}
.npc-profile-panel::after {
    content: "NPC PROFILE";
    position: absolute;
    right: 18px;
    bottom: 10px;
    color: rgba(255, 255, 255, .035);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .14em;
    pointer-events: none;
}
.npc-threat-display {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.npc-threat-display {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.npc-threat-display > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(var(--profile-accent-rgb), .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
}
.npc-threat-display small {
    color: var(--profile-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .09em;
}
.npc-threat-display strong {
    color: var(--profile-text);
    font-size: 18px;
}
.npc-profile-quote {
    margin: 0 0 16px;
    padding: 14px 16px;
    color: var(--profile-accent);
    background: rgba(var(--profile-accent-rgb), .07);
    border-left: 3px solid var(--profile-accent);
    border-radius: 0 12px 12px 0;
    font-size: 13px;
    font-style: italic;
    line-height: 1.65;
}
@media (max-width: 680px) {
    .npc-threat-display { grid-template-columns: 1fr; }
    .npc-profile-panel::after { display: none; }
}

.profile-role-tag { display:inline-grid; place-items:center; font-size:1rem; line-height:1; }

/* =====================================================
   CUSTOM PROFILE ICON ARTWORK
   ===================================================== */
.profile-id-meta {
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.profile-inline-icon {
    width:30px;
    height:30px;
    object-fit:contain;
    flex:0 0 auto;
    filter:drop-shadow(0 3px 7px rgba(0,0,0,.45));
}
.profile-button-icon {
    width:29px;
    height:29px;
    object-fit:contain;
    flex:0 0 auto;
    filter:drop-shadow(0 3px 7px rgba(0,0,0,.42));
}
.profile-action-icon-image {
    width:39px;
    height:39px;
    object-fit:contain;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));
}
.profile-action.statistics-action > span {
    overflow:hidden;
}
@media (max-width:640px) {
    .profile-inline-icon { width:27px; height:27px; }
    .profile-button-icon { width:26px; height:26px; }
    .profile-action-icon-image { width:36px; height:36px; }
}

/* Organisable personal profile cards */
.profile-main-column { display:contents; }
.profile-presence.inactive { color:#ffb0b0; border-color:rgba(216,91,91,.42); background:rgba(216,91,91,.12); }
.profile-card-order-heading{margin-bottom:12px}
.profile-card-order-reset{padding:9px 14px;border:1px solid var(--profile-border-strong);border-radius:10px;background:#0b0e12;color:var(--profile-muted);font-weight:800;font-size:.78rem;cursor:pointer;white-space:nowrap}
.profile-card-order-reset:disabled{opacity:.4;cursor:not-allowed}
.profile-card-order-reset:not(:disabled):hover{border-color:var(--profile-accent);color:var(--profile-accent)}
.profile-card-order-help{margin:0 0 10px;color:var(--profile-muted);font-size:.72rem;line-height:1.4}
.profile-card-order-list{display:grid;gap:5px}
.profile-card-order-item{display:grid;grid-template-columns:14px 20px minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 10px;border:1px solid var(--profile-border);border-radius:10px;background:var(--profile-surface-soft);cursor:grab}
.profile-card-order-item.is-dragging{opacity:.48}
.profile-card-order-item.is-drop-target{border-color:var(--profile-accent)}
.profile-card-order-handle{color:var(--profile-dim);font-weight:900;font-size:.8rem;letter-spacing:-.2em;text-align:center}
.profile-card-order-number{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.06);color:var(--profile-muted);font-size:.62rem;font-weight:900}
.profile-card-order-info{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden}
.profile-card-order-info>div{display:flex;align-items:center;gap:7px;min-width:0;flex:0 1 auto;overflow:hidden}
.profile-card-order-info strong{overflow:hidden;font-size:.78rem;white-space:nowrap;text-overflow:ellipsis}
.profile-card-order-info>small{overflow:hidden;color:var(--profile-muted);font-size:.66rem;white-space:nowrap;text-overflow:ellipsis}
.profile-card-order-visibility{flex:0 0 auto;padding:1px 7px;border-radius:999px;font-size:.56rem;font-weight:850;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.profile-card-order-visibility.is-public{color:#8fe3ab;background:rgba(84,219,145,.12)}
.profile-card-order-visibility.is-personal{color:#8fc8ff;background:rgba(101,185,255,.12)}
.profile-card-order-visibility.is-hidden{color:#9aa3ad;background:rgba(255,255,255,.07)}
.profile-card-order-controls{display:flex;align-items:center;gap:4px}
.profile-card-order-controls button{width:23px;height:23px;border:1px solid var(--profile-border-strong);border-radius:6px;background:#0b0e12;color:#fff;font-size:.65rem;line-height:1;cursor:pointer}
.profile-card-order-controls button:disabled{opacity:.3;cursor:not-allowed}
.profile-card-order-controls button:not(:disabled):hover{border-color:var(--profile-accent);color:var(--profile-accent)}
.profile-card-order-controls select{height:23px;padding:0 4px;border:1px solid var(--profile-border-strong);border-radius:6px;background:#0b0e12;color:#cdd3db;font-size:.6rem;max-width:88px}
.profile-card-order-announcement{min-height:0;margin:8px 0 0;color:var(--profile-accent);font-size:.7rem}
.profile-card-order-announcement:empty{margin:0}
.profile-card-order-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.profile-card-order-footer span{color:var(--profile-muted);font-size:.72rem}
@media(max-width:560px){.profile-card-order-info{flex-direction:column;align-items:flex-start;gap:1px}.profile-card-order-info>small{display:none}}

/* Dedicated combat actions directly beneath the player identity card */
.profile-combat-actions-panel {
    margin-top: 14px;
    border-color: rgba(255, 102, 115, .22);
    background: linear-gradient(145deg, rgba(31, 20, 24, .96), var(--profile-surface));
}
.profile-combat-actions-panel .profile-actions-heading { margin-bottom: 16px; }
.profile-combat-action-grid { grid-template-columns: minmax(0, 1fr); }

/* Player bounty placement */
.bounty-profile-modal-card {
    width: min(560px, calc(100vw - 28px));
}

.bounty-modal-icon {
    background: linear-gradient(135deg, rgba(211, 75, 84, 0.22), rgba(117, 28, 39, 0.22));
}

.bounty-profile-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.bounty-profile-summary > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
}

.bounty-profile-summary small,
.bounty-profile-summary strong {
    display: block;
}

.bounty-profile-summary small {
    color: var(--profile-muted, #9ba4af);
    margin-bottom: 5px;
}

.bounty-profile-summary strong {
    overflow-wrap: anywhere;
}

.bounty-profile-field {
    display: grid;
    gap: 8px;
    color: #e7e9ed;
    font-weight: 750;
}

.bounty-profile-field > div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.bounty-profile-field b {
    padding-left: 13px;
}

.bounty-profile-field input {
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 12px;
    color: #fff;
    background: transparent;
    font: inherit;
}

.bounty-profile-message {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 9px;
    color: #f0c8ca;
    background: rgba(211, 75, 84, 0.13);
}

.bounty-profile-message.success {
    color: #82deb2;
    background: rgba(76, 190, 131, 0.12);
}

.bounty-board-link {
    display: block;
    margin-top: 12px;
    color: #d8bd7e;
    text-align: center;
    text-decoration: none;
    font-weight: 750;
}

@media (max-width: 620px) {
    .bounty-profile-summary {
        grid-template-columns: 1fr;
    }
}


/* Brighter VIP Black Card profile collection. */
body[data-accent="blackgold"] { --profile-accent:#ffd85f; --profile-accent-rgb:255,216,95; }
body[data-accent="platinum"] { --profile-accent:#f2f8ff; --profile-accent-rgb:242,248,255; }
body[data-accent="champagne"] { --profile-accent:#ffe19b; --profile-accent-rgb:255,225,155; }
body[data-accent="bloodgold"] { --profile-accent:#ffb53f; --profile-accent-rgb:255,181,63; }
body[data-theme="kingpin"] { --profile-bg:#0d0a02; --profile-surface:#201805; --profile-surface-raised:#33270a; --profile-surface-soft:#493711; }
body[data-theme="obsidian-vault"] { --profile-bg:#05080d; --profile-surface:#101823; --profile-surface-raised:#1a293a; --profile-surface-soft:#253d54; }
body[data-theme="velvet-rope"] { --profile-accent:#ff72c8; --profile-accent-rgb:255,114,200; --profile-bg:#44072b; --profile-surface:#440130; --profile-surface-raised:#461039; --profile-surface-soft:#631750; }
body[data-theme="gold-smoke"] { --profile-bg:#120d02; --profile-surface:#251a06; --profile-surface-raised:#3d2b0a; --profile-surface-soft:#584013; }
body[data-theme="midnight-executive"] { --profile-accent:#75b8ff; --profile-accent-rgb:117,184,255; --profile-bg:#030918; --profile-surface:#0a1934; --profile-surface-raised:#102851; --profile-surface-soft:#183b71; }
body[data-banner="black-card"] .profile-hero { background-image:radial-gradient(circle at 78% 18%,rgba(255, 254, 253, 0.58),transparent 28%),linear-gradient(125deg,#030303 6%,#ffee00 55%,#080602); }
body[data-banner="penthouse"] .profile-hero { background-image:radial-gradient(circle at 76% 20%,rgba(103,184,255,.58),transparent 31%),linear-gradient(125deg,#020713,#153c68 58%,#05080d); }
body[data-banner="gold-smoke"] .profile-hero { background-image:radial-gradient(circle at 22% 78%,rgba(255,204,68,.55),transparent 35%),linear-gradient(125deg,#120b01,#513709 58%,#0c0802); }
body[data-banner="midnight-executive"] .profile-hero { background-image:radial-gradient(circle at 82% 20%,rgba(89,161,255,.48),transparent 32%),linear-gradient(125deg,#020716,#173765 58%,#05070c); }
.profile-role-badge.kingpin,
.profile-kingpin-status,
.kingpin-customisation-notice { box-shadow:0 0 0 1px rgba(var(--profile-accent-rgb),.48),0 0 24px rgba(var(--profile-accent-rgb),.22); }


/* Public active-bounty warning */
.profile-active-bounty{display:inline-flex;align-items:center;width:max-content;margin-top:10px;padding:7px 11px;border:1px solid rgba(255,62,76,.62);border-radius:8px;color:#ff4f5f;background:rgba(105,0,10,.34);font-size:.78rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase;box-shadow:inset 0 0 18px rgba(255,31,52,.08)}
.profile-active-bounty[hidden]{display:none}
@media(max-width:1120px){.profile-summary-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.profile-summary-item:nth-child(3){border-right:0}.profile-summary-item:nth-child(-n+3){border-bottom:1px solid var(--profile-border)}.profile-summary-item:nth-child(2){border-right:1px solid var(--profile-border)}}
@media(max-width:620px){
    .profile-summary-strip{grid-template-columns:1fr}
    .profile-summary-item{border-right:0!important;border-bottom:1px solid var(--profile-border)!important}
    .profile-summary-item:last-child{border-bottom:0!important}
}

/* Temporary caffeine combat penalty */
.profile-caffeine-penalty{margin-top:5px;color:#ff6674;font-size:.74rem;font-weight:850}.profile-caffeine-penalty[hidden]{display:none}.combat-stat-temporary-loss{display:inline-flex;margin-left:5px;color:#ff6674;font-size:.7em;font-style:normal;font-weight:900}.combat-attribute-grid strong{display:flex;align-items:baseline;justify-content:center;gap:2px;flex-wrap:wrap}

/* Property Prestige residence showcase */
.profile-residence-showcase__hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 8px;border:1px solid var(--profile-border);border-radius:9px;background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.008)),var(--profile-surface-soft);box-shadow:inset 0 1px rgba(255,255,255,.04)}
.profile-residence-showcase__hero>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--profile-accent-soft);font-size:1rem}.profile-residence-showcase__hero small,.profile-residence-showcase__hero em{display:block;color:var(--profile-muted);font-style:normal;font-size:.65rem}.profile-residence-showcase__hero strong{display:block;margin:1px 0;font-size:.8rem}.profile-residence-showcase__hero b{color:var(--profile-accent);font-size:.74rem;white-space:nowrap}.profile-residence-showcase__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:6px}.profile-residence-showcase__stats>div{padding:5px 6px;border:1px solid var(--profile-border);border-radius:7px;background:rgba(0,0,0,.14)}.profile-residence-showcase__stats small{display:block;color:var(--profile-muted);font-size:.6rem}.profile-residence-showcase__stats strong{display:block;margin-top:1px;font-size:.74rem}.profile-residence-showcase__bar{height:5px;margin-top:6px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}.profile-residence-showcase__bar span{display:block;height:100%;border-radius:inherit;background:var(--profile-accent)}@media(max-width:620px){.profile-residence-showcase__hero{grid-template-columns:auto 1fr}.profile-residence-showcase__hero b{grid-column:1/-1}.profile-residence-showcase__stats{grid-template-columns:1fr}}

/* Compact player and combat action panels */
.profile-actions-panel{padding:9px 10px!important;margin-top:7px!important}.profile-actions-heading{margin-bottom:7px!important}.profile-actions-heading h2{font-size:.86rem!important;margin:.08rem 0!important}.profile-actions-heading p{font-size:.68rem!important}.profile-action-grid{gap:6px!important}.profile-action{min-height:40px!important;padding:6px 8px!important;border-radius:8px!important}.profile-action>span{width:24px!important;height:24px!important;font-size:.82rem!important}.profile-action strong{font-size:.74rem!important}.profile-action small{font-size:.62rem!important}.profile-online-dot.idle{background:#f2c94c!important;box-shadow:0 0 0 3px rgba(242,201,76,.16),0 0 12px rgba(242,201,76,.65)!important}.profile-presence.idle{color:#f2c94c!important;border-color:rgba(242,201,76,.34)!important;background:rgba(242,201,76,.08)!important}.bounty-profile-field textarea{width:100%;resize:vertical;min-height:72px}

.profile-benefits-intro{margin:-4px 0 12px;color:var(--ec-muted);font-size:.78rem}.profile-benefits-list{display:grid;gap:8px;max-height:360px;overflow-y:auto;padding-right:5px;scrollbar-width:thin}.profile-benefit-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;padding:10px 11px;border:1px solid var(--ec-line);border-radius:10px;background:rgba(255,255,255,.025)}.profile-benefit-row>div{display:grid;gap:2px}.profile-benefit-row small{color:var(--ec-gold-bright);font-size:.63rem;text-transform:uppercase;letter-spacing:.08em}.profile-benefit-row strong{font-size:.82rem}.profile-benefit-row span{color:var(--ec-muted);font-size:.7rem}.profile-benefit-row aside{display:grid;justify-items:end;align-content:start;gap:4px}.profile-benefit-row aside b{font-size:.78rem;color:#fff}.profile-benefit-row aside em{padding:2px 6px;border-radius:999px;background:rgba(91,176,255,.1);color:#8fc8ff;font-size:.6rem;font-style:normal;text-transform:uppercase}.profile-benefit-row aside em.is-permanent{background:rgba(91,215,143,.1);color:#77e1a4}.profile-benefit-row p{grid-column:1/-1;margin:2px 0 0;color:var(--ec-muted);font-size:.68rem}
.profile-panel-link{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;padding:9px 12px;border:1px solid var(--ec-line);border-radius:10px;color:var(--ec-gold-bright);text-decoration:none;font-size:.8rem;font-weight:800;background:rgba(224,184,76,.045)}.profile-panel-link:hover{border-color:rgba(224,184,76,.38);background:rgba(224,184,76,.09)}

.profile-level-icon--max { width:36px; height:36px; filter:drop-shadow(0 0 7px rgba(232,188,76,.38)) drop-shadow(0 3px 7px rgba(0,0,0,.5)); }

.profile-name-change-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end}.profile-name-change-cost{display:grid;gap:4px;min-width:220px;padding:14px;border:1px solid var(--ec-line);border-radius:13px;background:rgba(255,255,255,.025)}.profile-name-change-cost small,.profile-name-change-cost span{color:var(--ec-muted)}.profile-name-change-cost strong{font-size:1.18rem;color:var(--ec-gold-bright)}.profile-name-change-cost button{margin-top:6px}@media(max-width:720px){.profile-name-change-card{grid-template-columns:1fr}.profile-name-change-cost{min-width:0}}

.profile-asset-image,.profile-residence-image{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.28))}.profile-asset-card>span,.profile-residence-showcase__hero>span{overflow:hidden;padding:3px}

/* =====================================================
   PROFILE VISUAL STYLE PRESETS
   ===================================================== */
.customisation-section--visual{overflow:hidden}
.customisation-subsection-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 12px;padding-top:18px;border-top:1px solid var(--profile-border)}
.customisation-subsection-heading span{color:var(--profile-accent);font-size:.68rem;font-weight:950;letter-spacing:.13em}
.customisation-subsection-heading p{margin:0;color:var(--profile-muted);font-size:.72rem}
@media(max-width:760px){.customisation-subsection-heading{align-items:flex-start;flex-direction:column;gap:4px}}

/* Compact swatch-picker UI: replaces the old plain <select> dropdowns for visual style fields. */
.style-picker-groups{display:grid;gap:14px;margin-top:14px}
.customisation-hidden-select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.profile-style-picker{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.style-swatch{position:relative;display:grid;grid-template-rows:38px 1fr;justify-items:center;gap:0;width:78px;padding:0;border:1px solid var(--profile-border);border-radius:11px;overflow:hidden;background:rgba(255,255,255,.02);color:var(--profile-text);font:inherit;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.style-swatch:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(var(--profile-accent-rgb),.55)}
.style-swatch:focus-visible{outline:2px solid var(--profile-accent);outline-offset:2px}
.style-swatch.is-selected{border-color:var(--profile-accent);box-shadow:0 0 0 2px rgba(var(--profile-accent-rgb),.35)}
.style-swatch:disabled{opacity:.4;cursor:not-allowed}
.style-swatch__visual{width:100%;height:38px;overflow:hidden;background:#0b0e12}
.style-swatch__visual.style-swatch__icon{display:grid;place-items:center;font-size:1.15rem}
.style-swatch__visual.style-swatch__icon img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.style-swatch__visual.style-swatch__frame{display:grid;place-content:center}
.style-swatch__frame .profile-avatar-frame{transform:scale(.2);pointer-events:none}
.style-swatch__label{display:flex;align-items:center;justify-content:center;width:100%;min-height:2.4em;padding:3px 4px 5px;overflow:hidden;color:var(--profile-muted);font-size:.53rem;font-weight:800;line-height:1.2;text-align:center;white-space:normal;word-break:break-word}
.style-swatch.is-selected .style-swatch__label{color:var(--profile-accent)}
.style-swatch__lock,.style-swatch__check{position:absolute;top:3px;width:14px;height:14px;display:grid;place-items:center;border-radius:50%;font-size:.5rem;line-height:1}
.style-swatch__lock{right:3px;background:rgba(0,0,0,.65)}
.style-swatch__check{left:3px;background:var(--profile-accent);color:#100b02;font-weight:950;opacity:0}
.style-swatch.is-selected .style-swatch__check{opacity:1}

/* Sharpen the previously gold-looking Crimson frame so presets read distinctly. */
.frame-crimson{background:linear-gradient(135deg,#8fd8ff,#0b6fb0 48%,#bfeaff);box-shadow:0 0 0 3px #041420,0 0 32px rgba(90,190,255,.4)}

/* =====================================================
   PROFILE CUSTOMISATION COLOUR DISTINCTNESS PASS
   Keep the original independent Theme / Accent / Frame / Banner system.
   Velvet Rope is intentionally left unchanged.
   ===================================================== */
body[data-accent="red"] { --profile-accent:#ff3d55; --profile-accent-rgb:255,61,85; --profile-accent-soft:rgba(255,61,85,.17); }
body[data-accent="blue"] { --profile-accent:#3ba9ff; --profile-accent-rgb:59,169,255; --profile-accent-soft:rgba(59,169,255,.17); }
body[data-accent="green"] { --profile-accent:#35e782; --profile-accent-rgb:53,231,130; --profile-accent-soft:rgba(53,231,130,.16); }
body[data-accent="purple"] { --profile-accent:#b85cff; --profile-accent-rgb:184,92,255; --profile-accent-soft:rgba(184,92,255,.17); }
body[data-accent="cyan"] { --profile-accent:#18e9e1; --profile-accent-rgb:24,233,225; --profile-accent-soft:rgba(24,233,225,.16); }
body[data-accent="orange"] { --profile-accent:#ff8a2b; --profile-accent-rgb:255,138,43; --profile-accent-soft:rgba(255,138,43,.17); }
body[data-accent="silver"] { --profile-accent:#edf4fb; --profile-accent-rgb:237,244,251; --profile-accent-soft:rgba(237,244,251,.14); }
body[data-accent="blackgold"] { --profile-accent:#ffd642; --profile-accent-rgb:255,214,66; --profile-accent-soft:rgba(255,214,66,.18); }
body[data-accent="platinum"] { --profile-accent:#a9b8cc; --profile-accent-rgb:169,184,204; --profile-accent-soft:rgba(169,184,204,.18); }
body[data-accent="champagne"] { --profile-accent:#f0c8a0; --profile-accent-rgb:240,200,160; --profile-accent-soft:rgba(240,200,160,.17); }
body[data-accent="bloodgold"] { --profile-accent:#ff9f21; --profile-accent-rgb:255,159,33; --profile-accent-soft:rgba(255,159,33,.18); }
body[data-accent="crimson-royale"] { --profile-accent:#ff1f7a; --profile-accent-rgb:255,31,122; --profile-accent-soft:rgba(255,31,122,.18); }
body[data-accent="voidglass"] { --profile-accent:#6a5cff; --profile-accent-rgb:106,92,255; --profile-accent-soft:rgba(106,92,255,.18); }

body[data-theme="slate"] { --profile-bg:#071019; --profile-surface:#101d2a; --profile-surface-raised:#172a3a; --profile-surface-soft:#20384b; }
body[data-theme="crimson"] { --profile-bg:#150308; --profile-surface:#260710; --profile-surface-raised:#3a0b17; --profile-surface-soft:#511020; }
body[data-theme="emerald"] { --profile-bg:#03140c; --profile-surface:#08251a; --profile-surface-raised:#0c3826; --profile-surface-soft:#124d34; }
body[data-theme="royal"] { --profile-bg:#10051d; --profile-surface:#210b38; --profile-surface-raised:#321150; --profile-surface-soft:#47186e; }
body[data-theme="neon"] { --profile-bg:#02101b; --profile-surface:#05243a; --profile-surface-raised:#083652; --profile-surface-soft:#0b4b6e; }
body[data-theme="syndicate"] { --profile-bg:#100902; --profile-surface:#211105; --profile-surface-raised:#341b08; --profile-surface-soft:#4a280d; }
body[data-theme="imperial"] { --profile-bg:#120d02; --profile-surface:#281d06; --profile-surface-raised:#3d2c09; --profile-surface-soft:#58400e; }
body[data-theme="kingpin"] { --profile-bg:#100b00; --profile-surface:#261900; --profile-surface-raised:#3d2a04; --profile-surface-soft:#58400a; }
body[data-theme="obsidian-vault"] { --profile-bg:#020a13; --profile-surface:#07192b; --profile-surface-raised:#0c2942; --profile-surface-soft:#123b5d; }
/* Velvet Rope deliberately remains exactly as previously styled. */
body[data-theme="gold-smoke"] { --profile-bg:#180d00; --profile-surface:#332003; --profile-surface-raised:#503407; --profile-surface-soft:#714a0d; }
body[data-theme="midnight-executive"] { --profile-bg:#01081d; --profile-surface:#061a3a; --profile-surface-raised:#0b2d5b; --profile-surface-soft:#12437f; }
body[data-theme="onyx-inferno"] { --profile-accent:#ff6a2b; --profile-accent-rgb:255,106,43; --profile-accent-soft:rgba(255,106,43,.17); --profile-bg:#0a0605; --profile-surface:#1a0d08; --profile-surface-raised:#2b0e04; --profile-surface-soft:#421506; }
body[data-theme="sapphire-syndicate"] { --profile-accent:#5cc8ff; --profile-accent-rgb:92,200,255; --profile-accent-soft:rgba(92,200,255,.17); --profile-bg:#020a16; --profile-surface:#071a30; --profile-surface-raised:#0d2c52; --profile-surface-soft:#12406f; }

/* Stronger banner separation while preserving the existing banner choices. */
.profile-hero[data-banner="city"], .profile-preview-card[data-banner="city"] .profile-preview-banner { background:linear-gradient(135deg,#07121e,#173752 48%,#050a10); }
.profile-hero[data-banner="alleys"], .profile-preview-card[data-banner="alleys"] .profile-preview-banner { background:linear-gradient(135deg,#21060c,#611522 50%,#0b0204); }
.profile-hero[data-banner="docks"], .profile-preview-card[data-banner="docks"] .profile-preview-banner { background:linear-gradient(135deg,#021823,#07516d 50%,#031015); }
.profile-hero[data-banner="skyline"], .profile-preview-card[data-banner="skyline"] .profile-preview-banner { background:linear-gradient(135deg,#100728,#42267d 50%,#080313); }
.profile-hero[data-banner="vault"], .profile-preview-card[data-banner="vault"] .profile-preview-banner { background:linear-gradient(135deg,#0b1115,#536675 50%,#050708); }
.profile-hero[data-banner="penthouse"], .profile-preview-card[data-banner="penthouse"] .profile-preview-banner { background:linear-gradient(135deg,#1a0a10,#8a3a52 50%,#0a0509); }

.frame-molten-core{border-radius:26px;background:radial-gradient(circle at 22% 28%,rgba(255,176,90,.95) 0%,rgba(255,110,30,.6) 9%,transparent 20%),radial-gradient(circle at 78% 68%,rgba(255,140,50,.9) 0%,rgba(255,80,20,.55) 10%,transparent 24%),radial-gradient(circle at 65% 18%,rgba(255,210,150,.7) 0%,transparent 14%),linear-gradient(150deg,#0c0806,#050302 55%,#0c0806);box-shadow:0 0 0 3px #050302,0 0 0 5px rgba(255,100,30,.4),inset 0 0 16px rgba(0,0,0,.55),0 0 22px 3px rgba(255,120,40,.55),0 0 48px 12px rgba(255,70,15,.32)}
.frame-phantom-halo{border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.1),transparent 55%),conic-gradient(from 0deg,#8cbeff,#b478ff,#8cbeff);box-shadow:0 0 0 3px #05070c,0 0 0 7px rgba(255,255,255,.07),0 0 24px 4px rgba(150,210,255,.55),0 0 46px 10px rgba(150,110,255,.35)}

/* Every active-Kingpin-only avatar frame carries the same Kingpin marker. */
.frame-blackcard::before,
.frame-diamond-cut::before,
.frame-crownline::before,
.frame-private-vault::before,
.frame-molten-core::before,
.frame-phantom-halo::before {
    content:"♠";
    position:absolute;
    right:-8px;
    top:-18px;
    z-index:5;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#070707;
    border:2px solid var(--profile-accent);
    color:var(--profile-accent);
    font-size:20px;
    line-height:1;
    box-shadow:0 8px 20px rgba(0,0,0,.55),0 0 16px rgba(var(--profile-accent-rgb),.24);
    pointer-events:none;
}

/* Gold Tooth: profile-launched shared boss encounter */
body[data-npc-slug="gold-tooth"] {
    --profile-accent:#e6b94f;
    --profile-accent-rgb:230,185,79;
}
body[data-npc-slug="gold-tooth"] .profile-hero {
    border-color:rgba(230,185,79,.48);
    background:
        radial-gradient(circle at 76% 22%,rgba(165,24,30,.26),transparent 35%),
        linear-gradient(115deg,#070707 0%,#15100a 58%,#090706 100%);
    box-shadow:0 28px 75px rgba(0,0,0,.6),0 0 38px rgba(230,185,79,.1);
}
body[data-npc-slug="gold-tooth"] .profile-avatar-frame {
    box-shadow:0 0 0 5px rgba(7,7,7,.96),0 0 0 8px #d3a83f,0 16px 46px rgba(0,0,0,.75),0 0 30px rgba(230,185,79,.25);
}
body[data-npc-slug="gold-tooth"] .profile-title,
body[data-npc-slug="gold-tooth"] .profile-status-message { text-shadow:0 2px 10px #000,0 0 16px rgba(0,0,0,.92); }
.gold-tooth-raid-action { --action-color:#e6b94f; }
.gold-tooth-raid-action>span {
    color:#f6d878;
    background:linear-gradient(145deg,rgba(230,185,79,.2),rgba(117,21,24,.12));
    border:1px solid rgba(230,185,79,.28);
}
.gold-tooth-raid-panel {
    isolation:isolate;
    position:relative;
    overflow:hidden;
    margin:18px 0;
    padding:clamp(20px,3vw,34px);
    border:1px solid rgba(230,185,79,.38);
    border-radius:var(--profile-radius-xl);
    background:
        linear-gradient(135deg,rgba(22,18,12,.97),rgba(9,10,12,.98) 52%,rgba(26,9,11,.96)),
        #0b0c0e;
    box-shadow:0 24px 60px rgba(0,0,0,.46),inset 0 1px rgba(255,224,139,.05);
}
.gold-tooth-raid-panel[hidden] { display:none; }
.gold-tooth-raid-glow {
    position:absolute;
    z-index:-1;
    width:380px;
    height:380px;
    right:-150px;
    top:-230px;
    border-radius:50%;
    background:rgba(226,180,70,.15);
    filter:blur(60px);
    pointer-events:none;
}
.gold-tooth-raid-header { display:flex; justify-content:space-between; gap:26px; align-items:flex-start; }
.gold-tooth-raid-header h2 { margin:5px 0 8px; color:#fff; font-size:clamp(25px,3vw,37px); letter-spacing:-.025em; }
.gold-tooth-raid-header p { max-width:720px; margin:0; color:#aeb6c0; line-height:1.6; }
.gold-tooth-raid-rules { max-width:390px; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:7px; }
.gold-tooth-raid-rules span { padding:7px 10px; border:1px solid rgba(230,185,79,.24); border-radius:999px; background:rgba(230,185,79,.07); color:#e9cb7c; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.055em; }
.gold-tooth-raid-status { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; margin:24px 0 12px; padding:15px 17px; border:1px solid rgba(230,185,79,.17); border-radius:14px; background:rgba(0,0,0,.22); }
.gold-tooth-raid-status strong { color:#f3d272; }
.gold-tooth-raid-status span { color:#aeb5bf; font-size:13px; }
.gold-tooth-raid-status b { color:#fff; }
.gold-tooth-raid-roster { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.gold-tooth-member { min-width:0; display:grid; grid-template-columns:48px minmax(0,1fr); gap:11px; align-items:center; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(255,255,255,.025); }
.gold-tooth-member img { grid-row:1/3; width:48px; height:48px; object-fit:cover; border-radius:12px; border:2px solid rgba(230,185,79,.55); box-shadow:0 6px 15px rgba(0,0,0,.45); }
.gold-tooth-member div { min-width:0; }
.gold-tooth-member strong,.gold-tooth-member span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gold-tooth-member strong { color:#fff; font-size:14px; }
.gold-tooth-member span { margin-top:3px; color:#8f99a5; font-size:10px; }
.gold-tooth-member em { grid-column:2; width:max-content; padding:4px 7px; border-radius:999px; background:rgba(79,215,134,.1); color:#70e5a0; font-size:9px; font-weight:900; font-style:normal; text-transform:uppercase; letter-spacing:.06em; }
.gold-tooth-member.has-drop { animation:goldToothDropPulse 1.3s ease both; border-color:#f0c95d; box-shadow:0 0 26px rgba(230,185,79,.3); }
.gold-tooth-empty { grid-column:1/-1; min-height:104px; display:flex; align-items:center; justify-content:center; gap:16px; border:1px dashed rgba(230,185,79,.18); border-radius:14px; color:#8e96a1; }
.gold-tooth-empty img { width:66px; height:66px; object-fit:contain; filter:drop-shadow(0 0 16px rgba(230,185,79,.28)); }
.gold-tooth-raid-controls { display:flex; flex-wrap:wrap; gap:9px; margin-top:17px; }
.gold-tooth-button { min-height:44px; padding:10px 17px; border-radius:11px; border:1px solid rgba(255,255,255,.13); color:#fff; background:#15171b; font:inherit; font-weight:850; cursor:pointer; transition:transform .18s,border-color .18s,box-shadow .18s; }
.gold-tooth-button:hover:not(:disabled) { transform:translateY(-2px); border-color:#e6b94f; }
.gold-tooth-button:disabled { opacity:.45; cursor:not-allowed; }
.gold-tooth-button--primary,.gold-tooth-button--launch { color:#161006; border-color:#f2ce68; background:linear-gradient(180deg,#f4d271,#d7a83b); box-shadow:0 8px 25px rgba(230,185,79,.13); }
.gold-tooth-button--launch { background:linear-gradient(180deg,#ffda70,#d9972f); }
.gold-tooth-raid-message { min-height:18px; margin:10px 0 0; color:#8d97a3; font-size:12px; }
.gold-tooth-raid-report { margin-top:18px; display:grid; grid-template-columns:minmax(220px,.38fr) minmax(0,1fr); gap:12px; }
.gold-tooth-raid-report[hidden] { display:none; }
.gold-tooth-result { display:flex; flex-direction:column; justify-content:center; padding:20px; border:1px solid rgba(230,185,79,.23); border-radius:15px; background:rgba(230,185,79,.06); }
.gold-tooth-result>span { color:#e9c961; font-size:11px; font-weight:950; letter-spacing:.14em; }
.gold-tooth-result>strong { margin-top:7px; color:#fff; font-size:20px; }
.gold-tooth-result>small { margin-top:9px; color:#b9c0c8; line-height:1.5; }
.gold-tooth-result--victory { box-shadow:inset 3px 0 #e6b94f; }
.gold-tooth-result--defeat { box-shadow:inset 3px 0 #f0646f; }
.gold-tooth-combat-feed { max-height:310px; overflow:auto; margin:0; padding:8px; list-style:none; border:1px solid rgba(255,255,255,.08); border-radius:15px; background:rgba(0,0,0,.2); }
.gold-tooth-combat-feed li { display:grid; grid-template-columns:35px minmax(0,1fr); gap:8px; padding:8px 9px; border-bottom:1px solid rgba(255,255,255,.05); color:#b5bdc7; font-size:12px; animation:goldToothEvent .35s ease both; animation-delay:var(--event-delay); }
.gold-tooth-combat-feed li:last-child { border-bottom:0; }
.gold-tooth-combat-feed b { color:#e6b94f; }
.gold-tooth-combat-feed .critical span,.gold-tooth-combat-feed .special span { color:#f2cf70; }
.gold-tooth-combat-feed .enraged span { color:#ff8a94; }
@keyframes goldToothEvent { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }
@keyframes goldToothDropPulse { 0% { transform:scale(.96); filter:brightness(1); } 45% { transform:scale(1.035); filter:brightness(1.45); } 100% { transform:none; filter:none; } }
@media(max-width:980px) { .gold-tooth-raid-roster { grid-template-columns:1fr 1fr; } .gold-tooth-raid-header { flex-direction:column; } .gold-tooth-raid-rules { justify-content:flex-start; } }
@media(max-width:620px) { .gold-tooth-raid-roster,.gold-tooth-raid-report { grid-template-columns:1fr; } .gold-tooth-raid-status { grid-template-columns:1fr; } .gold-tooth-button { flex:1 1 100%; } }
.profile-modal-manual-combat-link { display:block; margin-top:14px; text-align:center; font-size:13px; color:var(--ec-purple,#b58af3); }
.profile-modal-manual-combat-link:hover { color:var(--ec-gold-bright,#ffd86b); }

.profile-mastery-summary{display:flex;align-items:baseline;gap:7px;margin:-4px 0 12px;color:var(--ec-muted);font-size:.75rem}.profile-mastery-summary strong{color:var(--profile-accent,#d9aa52);font-size:1.35rem}.profile-mastery-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.profile-mastery-row{display:grid;gap:9px;padding:11px;border:1px solid color-mix(in srgb,var(--mastery-accent) 32%,var(--ec-line));border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--mastery-accent) 9%,transparent),rgba(255,255,255,.018))}.profile-mastery-identity{display:flex;align-items:center;gap:8px}.profile-mastery-identity>span{width:7px;height:28px;border-radius:999px;background:var(--mastery-accent);box-shadow:0 0 12px color-mix(in srgb,var(--mastery-accent) 65%,transparent)}.profile-mastery-identity div{display:grid}.profile-mastery-identity small{color:var(--mastery-accent);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.profile-mastery-identity strong{font-size:.78rem}.profile-mastery-paths{display:flex;flex-wrap:wrap;gap:5px}.profile-mastery-paths b{padding:4px 7px;border-radius:999px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08);font-size:.68rem}.profile-mastery-paths em{color:var(--mastery-accent);font-size:.61rem;font-style:normal}@media(max-width:620px){.profile-mastery-list{grid-template-columns:1fr}}

/* =====================================
   ANON: nobody knows his face or his name - the profile should feel like a
   corrupted file that barely renders, not a normal polished NPC dossier.
   Everything here is scoped to this one NPC via data-npc-slug and touches
   nothing else on the page.
   ===================================== */
body[data-npc-slug="anon"] { --profile-accent:#ff2d3a; --profile-accent-rgb:255,45,58; }

body[data-npc-slug="anon"] #profileHero {
    background: #030303;
    border-color: rgba(255,45,58,.3);
}
body[data-npc-slug="anon"] #profileHero::before {
    background:
        radial-gradient(circle at 82% 12%, rgba(255,45,58,.22), transparent 24rem),
        linear-gradient(115deg, rgba(2,2,3,.4), rgba(2,2,3,.92));
}
body[data-npc-slug="anon"] #profileHero .profile-hero-pattern { opacity: .5; }
body[data-npc-slug="anon"] #profileHero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
    animation: anonScanlines 9s linear infinite;
}
@keyframes anonScanlines { from { transform: translateY(0); } to { transform: translateY(200px); } }

body[data-npc-slug="anon"] .profile-avatar-frame {
    background: linear-gradient(145deg, #2a0306, rgba(255,45,58,.2));
    box-shadow: 0 0 0 5px rgba(0,0,0,.6), 0 20px 55px rgba(0,0,0,.6), 0 0 30px rgba(255,45,58,.28);
}
body[data-npc-slug="anon"] .profile-avatar {
    filter: grayscale(1) contrast(1.25) brightness(.62);
    animation: anonFlicker 7s infinite;
}
@keyframes anonFlicker {
    0%, 91%, 100% { opacity: 1; filter: grayscale(1) contrast(1.25) brightness(.62); }
    92% { opacity: .5; filter: grayscale(1) contrast(1.6) brightness(.4); }
    93% { opacity: 1; filter: grayscale(1) contrast(1.25) brightness(.62); }
    94.5% { opacity: .25; }
    95% { opacity: 1; filter: grayscale(1) contrast(1.25) brightness(.62); }
}
body[data-npc-slug="anon"] .profile-online-dot { display: none; }

body[data-npc-slug="anon"] .profile-identity h1 {
    color: #d8d8d8;
    text-shadow: 0 0 10px rgba(255,45,58,.55), 0 0 26px rgba(255,45,58,.25), 0 8px 30px #000;
    animation: anonTextFlicker 6.5s infinite;
}
@keyframes anonTextFlicker {
    0%, 88%, 100% { opacity: 1; }
    89% { opacity: .45; }
    90% { opacity: 1; }
    91% { opacity: .15; }
    91.5% { opacity: 1; }
}
body[data-npc-slug="anon"] .profile-eyebrow-row::after {
    content: "IDENTITY UNKNOWN";
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255,45,58,.5);
    background: rgba(40,2,4,.55);
    color: #ff6b74;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}
body[data-npc-slug="anon"] .profile-title { color: #ff6b74; }
body[data-npc-slug="anon"] .profile-status-message,
body[data-npc-slug="anon"] .profile-bio { color: #b9bcc1; }
body[data-npc-slug="anon"] .profile-featured-badge { border-color: rgba(255,45,58,.4); color: #ff6b74; background: rgba(40,2,4,.5); }

/* Settings page: a compact list where each group opens as a dropdown row. */
.settings-page { display: grid; gap: 8px; margin-bottom: 90px; }
.settings-page .customisation-page-heading { margin-bottom: 6px; }
.settings-page .customisation-page-heading h1 { font-size: clamp(24px, 4vw, 32px); margin: 3px 0 4px; }
.settings-page .settings-acc { margin: 0; padding: 0; border-radius: 12px; overflow: hidden; }
.settings-page .settings-acc > summary { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; list-style: none; }
.settings-page .settings-acc > summary::-webkit-details-marker { display: none; }
.settings-page .settings-acc > summary:hover { background: rgba(255, 255, 255, 0.03); }
.settings-page .customisation-section-heading { flex: 1; min-width: 0; gap: 10px; margin: 0; }
.settings-page .customisation-section-heading > span { width: 30px; height: 30px; flex: 0 0 30px; font-size: 14px; border-radius: 9px; }
.settings-page .customisation-section-heading h2 { margin: 0; font-size: .95rem; }
.settings-page .customisation-section-heading p { margin: 1px 0 0; font-size: .74rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-page .settings-chev { flex: none; width: 8px; height: 8px; border-right: 2px solid #8e98a6; border-bottom: 2px solid #8e98a6; transform: rotate(45deg); transition: transform .18s ease; margin: 0 4px 3px 0; }
.settings-page .settings-acc[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.settings-page .settings-acc[open] .settings-chev { transform: rotate(-135deg); margin-bottom: -3px; }
.settings-page .settings-acc-body { padding: 10px 14px 12px; }
.settings-page .nav-slot-actions { margin-top: 8px; gap: 10px; }
.settings-page .nav-slot-actions em { font-size: .72rem; }
.settings-page .nav-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.settings-page .nav-slot-field { grid-template-columns: 22px 22px minmax(0, 1fr); gap: 8px; padding: 4px 8px; border-radius: 8px; }
.settings-page .nav-slot-field__index { width: 22px; height: 22px; font-size: .68rem; }
.settings-page .nav-slot-field__icon { width: 20px; height: 20px; }
.settings-page .nav-slot-field select { min-height: 0 !important; height: 30px !important; padding: 0 6px !important; font-size: .8rem !important; line-height: 1 !important; }
/* Choice rows (hand and banner): slim one-line options instead of two-line cards. */
.settings-page .attack-settings-options { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-page .attack-settings-option { flex: 0 1 auto; gap: 8px; padding: 6px 12px; border-radius: 9px; min-height: 0 !important; }
.settings-page .attack-settings-option input { width: 15px; height: 15px; margin: 0; }
.settings-page .attack-settings-option span { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: .84rem; }
.settings-page .attack-settings-option small { font-size: .72rem; }
.settings-page .attack-settings-card .settings-acc-body,
.settings-page .settings-acc-body { padding-top: 8px; padding-bottom: 8px; }
.settings-page .attack-settings-card .nav-slot-actions { margin-top: 6px; }
@media (max-width: 760px) {
    .settings-page .nav-slot-grid { grid-template-columns: minmax(0, 1fr); }
    .settings-page .settings-acc > summary { padding: 9px 12px; }
    .settings-page .settings-acc-body { padding: 8px 12px 10px; }
    .settings-page .customisation-page-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Profile customisation: everything smaller (no dropdowns), same structure. */
.customisation-shell:not(.settings-page) { width: min(100% - 28px, 1320px); margin-top: 22px; }
.customisation-shell:not(.settings-page) .customisation-page-heading { margin-bottom: 12px; }
.customisation-shell:not(.settings-page) .customisation-page-heading h1 { font-size: clamp(24px, 3.4vw, 32px); margin: 3px 0 4px; }
.customisation-shell:not(.settings-page) .customisation-workspace { gap: 14px; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.customisation-shell:not(.settings-page) .customisation-form-column form { gap: 10px; }
.customisation-shell:not(.settings-page) .customisation-section,
.customisation-shell:not(.settings-page) .avatar-upload-card { padding: 12px 14px; border-radius: 12px; }
.customisation-shell:not(.settings-page) .customisation-section-heading { margin-bottom: 8px; gap: 10px; }
.customisation-shell:not(.settings-page) .customisation-section-heading h2,
.customisation-shell:not(.settings-page) .avatar-upload-card h2 { margin: 0 0 2px; font-size: .95rem; }
.customisation-shell:not(.settings-page) .customisation-section-heading p,
.customisation-shell:not(.settings-page) .avatar-upload-card p { margin: 0 0 6px; font-size: .74rem; line-height: 1.35; }
.customisation-shell:not(.settings-page) .customisation-save-bar { padding: 8px 14px; gap: 10px; }
.customisation-shell:not(.settings-page) .customisation-field input,
.customisation-shell:not(.settings-page) .customisation-field textarea { padding: 7px 10px; font-size: .85rem; }
.customisation-shell:not(.settings-page) .customisation-field textarea { min-height: 58px; }
.customisation-shell:not(.settings-page) .customisation-field > span { margin-bottom: 4px; font-size: .78rem; }
.customisation-shell:not(.settings-page) .customisation-field em { margin-top: 3px; font-size: .66rem; }
.customisation-shell:not(.settings-page) .customisation-field + .customisation-field { margin-top: 8px; }

.customisation-shell:not(.settings-page) .preview-sticky-wrap { gap: 10px; }
.customisation-shell:not(.settings-page) .avatar-file-control { padding: 8px 10px; gap: 2px; }
.customisation-shell:not(.settings-page) .profile-secondary-button { min-height: 0; padding: 7px 12px; font-size: .78rem; }

.customisation-shell:not(.settings-page) .style-picker-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 4px; }
.customisation-shell:not(.settings-page) .style-picker-groups .customisation-wide-field { grid-column: 1 / -1; }
.customisation-shell:not(.settings-page) .style-picker-field > span { font-size: .78rem; }
.customisation-shell:not(.settings-page) .profile-style-picker { gap: 5px; margin-top: 5px; }
.customisation-shell:not(.settings-page) .style-swatch { grid-template-rows: 24px 1fr; width: 56px; border-radius: 9px; }
.customisation-shell:not(.settings-page) .style-swatch__visual { height: 24px; }
.customisation-shell:not(.settings-page) .style-swatch__visual.style-swatch__icon img { width: 17px; height: 17px; }
.customisation-shell:not(.settings-page) .style-swatch__label { min-height: 1.9em; padding: 2px 3px 3px; font-size: .5rem; }

.customisation-shell:not(.settings-page) .profile-card-order-heading { margin-bottom: 6px; }
.customisation-shell:not(.settings-page) .profile-card-order-list { gap: 3px; }
.customisation-shell:not(.settings-page) .profile-card-order-item { padding: 3px 9px; }
.customisation-shell:not(.settings-page) .profile-card-order-help { margin-bottom: 6px; font-size: .68rem; }
.customisation-shell:not(.settings-page) .profile-card-order-footer { margin-top: 8px; }
@media (max-width: 760px) {
    .customisation-shell:not(.settings-page) .customisation-workspace { grid-template-columns: minmax(0, 1fr); }
    .customisation-shell:not(.settings-page) .style-picker-groups { grid-template-columns: minmax(0, 1fr); }
}
.customisation-shell:not(.settings-page) .profile-card-order-controls button { min-height: 0 !important; width: 22px; height: 22px !important; padding: 0; }
.customisation-shell:not(.settings-page) .profile-card-order-controls select { min-height: 0 !important; height: 22px !important; }
.customisation-shell:not(.settings-page) .profile-card-order-reset { min-height: 0 !important; padding: 6px 12px; font-size: .74rem; }
.customisation-shell:not(.settings-page) .profile-style-picker { gap: 4px; }
.customisation-shell:not(.settings-page) .style-swatch { grid-template-rows: 20px 1fr; width: 54px; border-radius: 8px; min-height: 0 !important; }
.customisation-shell:not(.settings-page) .style-swatch__visual { height: 20px; }
.customisation-shell:not(.settings-page) .style-swatch__visual.style-swatch__icon { font-size: .9rem; }
.customisation-shell:not(.settings-page) .style-swatch__visual.style-swatch__icon img { width: 14px; height: 14px; }
.customisation-shell:not(.settings-page) .style-swatch__label { min-height: 0; padding: 2px 2px 3px; font-size: .46rem; line-height: 1.15; }
.customisation-shell:not(.settings-page) .style-picker-groups { gap: 8px 14px; }
.customisation-shell:not(.settings-page) .style-picker-field { position: relative; }
.customisation-shell:not(.settings-page) .customisation-hidden-select { left: 0; top: 0; }

/* Summary strip as two side by side lists: label on the left, value on the right of each row. */
.profile-summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)) !important; overflow:hidden; }
.profile-summary-item { padding:6px 14px !important; gap:10px; border-right:0 !important; border-bottom:1px solid var(--profile-border) !important; margin-bottom:-1px; }
.profile-summary-item:nth-child(-n+2) { border-bottom:1px solid var(--profile-border) !important; }
.profile-summary-item > div { flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.profile-summary-item > div > small { margin:0; white-space:nowrap; }
.profile-summary-item > div > strong,.profile-summary-item > div > a { text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
@media (max-width:560px) { .profile-summary-strip { grid-template-columns:1fr !important; } }

.combat-stat-temporary-boost{display:inline-flex;margin-left:5px;color:#7be495;font-size:.7em;font-style:normal;font-weight:900}

/* Summary strip structure: one centre divider, equal rows, icons in a fixed column and labels in a fixed width. */
.profile-summary-strip { background:linear-gradient(var(--profile-border),var(--profile-border)) 50% 0/1px 100% no-repeat,linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.006)),rgba(15,19,24,.9); }
.profile-summary-item { min-height:38px; align-items:center; }
.profile-summary-item .summary-icon { width:24px; flex:0 0 24px; display:grid; place-items:center; text-align:center; }
.profile-summary-item > div > small { flex:0 0 118px; color:var(--profile-muted); font-size:10px; letter-spacing:.08em; }
.profile-summary-item > div > strong,.profile-summary-item > div > a { flex:1; font-size:14px; font-weight:700; }
@media (max-width:560px) { .profile-summary-strip { background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.006)),rgba(15,19,24,.9); } .profile-summary-item > div > small { flex-basis:104px; } }
/* Thinner summary rows. */
.profile-summary-strip { margin:6px 0; }
.profile-summary-item { min-height:28px; padding:3px 12px !important; }
.profile-summary-item .summary-icon,.profile-summary-item .summary-icon--image { width:18px; flex:0 0 18px; font-size:13px; }
.profile-summary-item .summary-icon--image img { width:17px; height:17px; }
.profile-summary-item > div > small { font-size:9.5px; }
.profile-summary-item > div > strong,.profile-summary-item > div > a { font-size:13px; line-height:1.2; }

/* Who added this player as a friend or rival, shown only to holders of the Inside Intel company special. */
.profile-received{display:grid;gap:4px;padding:6px 12px;border-top:1px solid var(--profile-border);font-size:13px}
.profile-received>div{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.profile-received small{flex:0 0 150px;color:var(--profile-muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.profile-received a{color:#e9c76b;text-decoration:none}.profile-received a:hover{text-decoration:underline}

/* =====================================================
   PROFILE CARDS (Details, Information, Featured showcase, Bio)
   Everything below is driven by the theme and accent variables, so the
   player's Theme, Accent and Layout choices restyle the whole profile.
   ===================================================== */
.pf-top { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:12px; align-items:start; }
.pf-top--lists { margin-top:12px; }
.pf-card { min-width:0; border:1px solid var(--profile-border); border-radius:var(--profile-radius-md); background:linear-gradient(145deg,var(--profile-surface-raised),var(--profile-surface)); box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04); }
.pf-card__head { display:flex; align-items:center; gap:10px; padding:9px 16px; border-bottom:1px solid rgba(var(--profile-accent-rgb),.2); background:rgba(var(--profile-accent-rgb),.07); border-radius:var(--profile-radius-md) var(--profile-radius-md) 0 0; }
.pf-card__head h2 { margin:0; font:600 13px "Oswald",sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--profile-accent); }
.pf-card__sub { margin-left:auto; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--profile-muted); }
/* Top 10 badge in the hero: a plain label with a light that sweeps across it */
.profile-top10 { --place:#8fd3e6; position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:7px; padding:3px 13px 3px 4px; border:1px solid color-mix(in srgb,var(--place) 60%,transparent); border-radius:999px; color:#f4f6f9; cursor:default; background:color-mix(in srgb,var(--place) 18%,#10151c); box-shadow:0 0 14px color-mix(in srgb,var(--place) 24%,transparent); }
.profile-top10[hidden] { display:none !important; }
.profile-top10[data-place="1"] { --place:#e0b84c; }
.profile-top10[data-place="2"] { --place:#c3ccd6; }
.profile-top10[data-place="3"] { --place:#d08a4e; }
.profile-top10::after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:38%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); animation:profileTop10Shine 3.4s ease-in-out infinite; pointer-events:none; }
.profile-top10__icon { width:26px; height:26px; flex:0 0 26px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--place) 30%,#0c1016); border:1px solid var(--place); font-size:14px; line-height:1; }
.profile-top10__icon .ec-ui-icon { width:15px; height:15px; margin:0; display:block; stroke:var(--place); }
.profile-top10__text { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--place); white-space:nowrap; }
@keyframes profileTop10Shine { 0% { left:-60%; } 55%, 100% { left:130%; } }
@media (prefers-reduced-motion:reduce) { .profile-top10::after { animation:none; display:none; } }

/* Achievement showcase: featured achievement plus a clickable strip of the rest */
.pf-honours { margin-top:0; grid-column:1 / -1; --tier:#b8763a; }
@media (min-width:1100px) {
  body:not([data-layout="dossier"]) .pf-top--lists:has(> .pf-honours:not([hidden])) { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
  body:not([data-layout="dossier"]) .pf-top--lists > .pf-honours { grid-column:auto; }
}
.pf-honours[hidden], .pf-honours__feature[hidden], .pf-honours__minis[hidden], .pf-honours__empty[hidden] { display:none !important; }
.pf-honours__body { display:grid; gap:12px; padding:14px 16px 16px; }
.pf-honours__feature { --tier:#b8763a; display:grid; grid-template-columns:84px minmax(0,1fr); gap:14px; align-items:center; }
.pf-honours__feature[data-tier="Silver"], .pf-honours__mini[data-tier="Silver"] { --tier:#aab4c0; }
.pf-honours__feature[data-tier="Gold"], .pf-honours__mini[data-tier="Gold"] { --tier:#e0b84c; }
.pf-honours__feature[data-tier="Platinum"], .pf-honours__mini[data-tier="Platinum"] { --tier:#6fd0d8; }
.pf-honours__feature[data-tier="Diamond"], .pf-honours__mini[data-tier="Diamond"] { --tier:#7fb6ff; }
.pf-honours__feature[data-tier="Master"], .pf-honours__mini[data-tier="Master"] { --tier:#c07cf0; }
.pf-honours__feature[data-tier="Legendary"], .pf-honours__mini[data-tier="Legendary"] { --tier:#ff7a45; }
.pf-honours__badge { width:84px; height:84px; display:flex; align-items:center; justify-content:center; border:2px solid var(--tier); border-radius:14px; background:color-mix(in srgb,var(--tier) 12%,var(--profile-surface-soft)); font-size:42px; line-height:1; }
.pf-honours__text { min-width:0; display:grid; gap:2px; }
.pf-honours__kicker { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tier); }
.pf-honours__name { font-size:17px; font-weight:700; color:var(--profile-text); overflow-wrap:anywhere; }
.pf-honours__desc { font-size:13px; color:var(--profile-muted); overflow-wrap:anywhere; }
.pf-honours__date { margin-top:4px; font-size:11px; color:var(--profile-muted); }
.pf-honours__minis { display:flex; flex-wrap:wrap; gap:8px; }
.pf-honours__mini { width:38px; height:38px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--tier,#b8763a); border-radius:9px; background:var(--profile-surface-soft); font-size:19px; line-height:1; cursor:pointer; }
.pf-honours__mini:hover { background:color-mix(in srgb,var(--tier,#b8763a) 18%,var(--profile-surface-soft)); }
.pf-honours__mini[aria-pressed="true"] { border-width:2px; background:color-mix(in srgb,var(--tier,#b8763a) 24%,var(--profile-surface-soft)); }
.pf-honours__badge .ec-ui-icon, button.pf-honours__mini > .ec-ui-icon:first-child { display:block; margin:0; vertical-align:middle; }
.pf-honours__badge .ec-ui-icon { width:44px; height:44px; }
.pf-honours__mini .ec-ui-icon { width:20px; height:20px; }
.pf-honours__empty { margin:0; font-size:13px; color:var(--profile-muted); }
.pf-honours__empty a { color:var(--profile-accent); }
@media (max-width:480px) { .pf-honours__feature { grid-template-columns:64px minmax(0,1fr); gap:10px; } .pf-honours__badge { width:64px; height:64px; font-size:32px; } .pf-honours__badge .ec-ui-icon { width:34px; height:34px; } }
.pf-list { margin:0; padding:0; }
.pf-list--info { padding:4px 16px 8px; }
.pf-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--profile-border); }
.pf-row:last-child { border-bottom:0; }
.pf-row[hidden] { display:none !important; }
.pf-row dt { margin:0; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--profile-muted); }
.pf-row dd { margin:0; font-size:14px; font-weight:700; color:var(--profile-text); text-align:right; overflow-wrap:anywhere; }
.pf-row dd strong { font-weight:700; }
.pf-row dd a { color:var(--profile-accent); text-decoration:none; }
.pf-row dd a[href]:hover { text-decoration:underline; }
.pf-row--life { flex-wrap:wrap; }
.pf-row__bar { display:block; flex:1 1 100%; height:5px; margin-top:2px; border-radius:99px; background:var(--profile-surface-soft); overflow:hidden; }
.pf-row__bar i { display:block; width:0; height:100%; border-radius:99px; background:linear-gradient(90deg,#c0392b,var(--profile-danger)); transition:width .4s ease; }
.pf-tone-good { color:var(--profile-success); } .pf-tone-bad { color:var(--profile-danger); } .pf-tone-info { color:var(--profile-info); } .pf-tone-gold { color:var(--profile-accent); }
body[data-entity-type="npc"] .pf-player-only { display:none !important; }
body:not([data-entity-type="npc"]) .profile-main-grid { display:none; }
.profile-card-order-heading[hidden], .profile-card-order-help[hidden], .profile-card-order-list[hidden], .profile-card-order-announcement[hidden] { display:none !important; }

/* Featured showcase: the card chosen under Customise > Featured showcase */
.pf-showcase { margin-top:12px; }
.pf-showcase__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; padding:14px 16px 16px; }
.pf-stat { min-width:0; padding:12px 14px; border:1px solid rgba(var(--profile-accent-rgb),.22); border-radius:12px; background:linear-gradient(160deg,rgba(var(--profile-accent-rgb),.1),var(--profile-surface-soft)); }
.pf-stat small { display:block; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--profile-muted); }
.pf-stat strong { display:block; margin-top:4px; font:600 22px "Oswald",sans-serif; color:var(--profile-text); overflow-wrap:anywhere; }
.pf-stat em { display:block; margin-top:2px; font-size:12px; font-style:normal; color:var(--profile-muted); }
.pf-stat--accent strong { color:var(--profile-accent); }
.pf-stat--wide { grid-column:span 2; }
.pf-showcase__note { margin:0; padding:16px; font-size:13px; color:var(--profile-muted); }
.pf-chiprow { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pf-chiprow span { padding:3px 9px; border:1px solid rgba(var(--profile-accent-rgb),.3); border-radius:999px; background:rgba(var(--profile-accent-rgb),.08); font-size:12px; font-weight:600; color:var(--profile-text); }

/* Profile bio */
.pf-signature { margin-top:12px; }
.pf-signature__tools { margin-left:auto; display:flex; align-items:center; gap:6px; }
.pf-signature__edit { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border:1px solid var(--profile-border-strong); border-radius:7px; background:var(--profile-surface-soft); color:var(--profile-text); font-size:11px; font-weight:700; letter-spacing:.06em; text-decoration:none; cursor:pointer; }
.pf-signature__edit[hidden] { display:none; }
.pf-signature__edit:hover { border-color:var(--profile-accent); color:var(--profile-accent); }
.pf-signature__toggle { display:grid; place-items:center; width:24px; height:24px; padding:0; border:1px solid var(--profile-border-strong); border-radius:7px; background:var(--profile-surface-soft); color:var(--profile-text); font-size:15px; line-height:1; cursor:pointer; }
.pf-signature__toggle:hover { border-color:var(--profile-accent); color:var(--profile-accent); }
.pf-signature__body { padding:16px 18px; }
.pf-signature__body:has(.pf-signature__text:empty) { display:none; }
.pf-signature__body[hidden] { display:none; }
.pf-signature__text { font-size:14px; line-height:1.55; color:var(--profile-text); overflow-wrap:anywhere; white-space:pre-wrap; }
.pf-signature__text a { color:var(--profile-accent); text-decoration:underline dotted; text-underline-offset:3px; }
.pf-signature__text a:hover { text-decoration-style:solid; }
.pf-signature:has(.pf-signature__text:empty) .pf-signature__toggle { display:none; }

/* Bio editor pop-up */
.bio-edit-card { width:min(640px,100%); text-align:left; --cx-line:var(--profile-border-strong); --cx-muted:var(--profile-muted); }
.bio-edit-card h2 { margin:4px 0 12px; }
.bio-edit-form .gang-rte { background:var(--profile-surface-soft); }
.bio-edit-form .gang-rte__edit { min-height:220px; max-height:50vh; overflow:auto; padding:10px 12px; color:var(--profile-text); font-size:14px; line-height:1.55; outline:0; }
.bio-edit-form .gang-rte__edit:empty::before { content:attr(data-placeholder); color:var(--profile-dim); }
.bio-edit-error { margin:10px 0 0; padding:8px 10px; border:1px solid rgba(255,102,115,.4); border-radius:8px; background:rgba(255,102,115,.1); color:var(--profile-danger); font-size:13px; }
.bio-edit-error[hidden] { display:none; }

/* =====================================================
   LAYOUTS: each Layout choice changes the structure of the profile
   ===================================================== */
body[data-layout="compact"] .pf-card__head { padding:6px 12px; }
body[data-layout="compact"] .pf-row { padding:3px 0; }
body[data-layout="compact"] .pf-list--info { padding:2px 12px 6px; }
body[data-layout="compact"] .pf-top, body[data-layout="compact"] .pf-top--lists, body[data-layout="compact"] .pf-signature, body[data-layout="compact"] .pf-showcase { gap:8px; margin-top:8px; }
body[data-layout="compact"] .pf-showcase__grid { padding:10px 12px 12px; gap:8px; }
body[data-layout="compact"] .pf-stat { padding:8px 10px; }
body[data-layout="compact"] .pf-stat strong { font-size:18px; }
body[data-layout="compact"] .profile-hero-content { min-height:250px; padding:38px 40px 30px; }
body[data-layout="compact"] .profile-avatar-frame { width:150px; height:150px; }
body[data-layout="showcase"] .pf-stat strong { font-size:30px; }
body[data-layout="showcase"] .pf-showcase__grid { padding:18px 20px 20px; gap:14px; }
body[data-layout="showcase"] .pf-stat { padding:16px 18px; }
body[data-layout="executive"] .pf-card, body[data-layout="penthouse"] .pf-card, body[data-layout="portfolio"] .pf-card { border-color:rgba(var(--profile-accent-rgb),.3); box-shadow:0 14px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(var(--profile-accent-rgb),.08), inset 0 1px rgba(255,255,255,.05); }
body[data-layout="portfolio"] .pf-top--lists { grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); }
body[data-layout="penthouse"] .pf-card { background:linear-gradient(145deg,rgba(var(--profile-accent-rgb),.07),var(--profile-surface)); }
body[data-layout="dossier"] .pf-top--lists { grid-template-columns:1fr; }
body[data-layout="dossier"] .pf-card { border-left:3px solid var(--profile-accent); border-radius:6px; }
body[data-layout="dossier"] .pf-card__head { border-radius:3px 3px 0 0; }
body[data-layout="dossier"] .pf-row { border-bottom-style:dashed; }
body[data-layout="dossier"] .pf-row dt { font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.06em; }
body[data-layout="dossier"] .pf-stat { border-radius:6px; }

/* =====================================================
   EMBEDDED PREVIEW (customise page): the real profile, without the site chrome
   ===================================================== */
html.is-preview #navbar, html.is-preview .ec-chat-dock, html.is-preview .echo-chat-dock, html.is-preview [class*="chat-dock"], html.is-preview [class*="ec-floating"], html.is-preview .ec-quick-dock { display:none !important; }
html.is-preview body { overflow-x:hidden; }
html.is-preview .profile-page-shell { margin-top:10px; }
html.is-preview * { scrollbar-width:thin; }

@media (max-width:900px) { .pf-top { grid-template-columns:1fr; } }

/* =====================================================
   CUSTOMISE PAGE: live preview of the real profile
   ===================================================== */
.customisation-shell:not(.settings-page) .customisation-workspace { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:18px; }
.preview-sticky-wrap { position:sticky; top:84px; display:grid; gap:10px; }
.preview-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.preview-devices { display:inline-flex; overflow:hidden; border:1px solid var(--profile-border-strong); border-radius:9px; }
.preview-devices button { padding:5px 14px; border:0; background:var(--profile-surface-soft); color:var(--profile-muted); font-size:12px; font-weight:700; cursor:pointer; }
.preview-devices button + button { border-left:1px solid var(--profile-border-strong); }
.preview-devices button.is-active { background:rgba(var(--profile-accent-rgb),.2); color:var(--profile-accent); }
.preview-stage { position:relative; height:min(76vh,820px); overflow:hidden; border:1px solid var(--profile-border-strong); border-radius:16px; background:var(--profile-bg); box-shadow:var(--profile-shadow); }
.preview-stage iframe { position:absolute; top:0; left:0; border:0; transform-origin:0 0; background:var(--profile-bg); }
.preview-loading { position:absolute; inset:0; display:grid; place-items:center; background:var(--profile-bg); color:var(--profile-muted); font-size:13px; }
.preview-note { margin:0; font-size:12px; line-height:1.45; color:var(--profile-muted); }
@media (max-width:1000px) {
    .customisation-shell:not(.settings-page) .customisation-workspace { grid-template-columns:1fr; }
    .preview-sticky-wrap { position:static; }
    .preview-stage { height:460px; }
}

/* Keep the preview and the Save bar in view while the options scroll. */
.preview-sticky-wrap { top:108px; }
.preview-stage { height:clamp(360px, calc(100vh - 250px), 820px); }
.customisation-shell:not(.settings-page) .customisation-save-bar { position:sticky; top:108px; z-index:6; background:linear-gradient(145deg,var(--profile-surface-raised),var(--profile-surface)); backdrop-filter:blur(10px); box-shadow:0 10px 26px rgba(0,0,0,.4); }
@media (max-width:1000px) {
    .preview-sticky-wrap { top:auto; }
    .preview-stage { height:460px; }
}
.customisation-shell:not(.settings-page) .customisation-preview-column { align-self:stretch; }

/* Slimmer Details and Information cards */
.pf-top--lists .pf-card__head { padding:5px 14px; }
.pf-top--lists .pf-list--info { padding:2px 14px 6px; }
.pf-top--lists .pf-row { padding:3px 0; }
.pf-top--lists .pf-row dt { font-size:10px; }
.pf-top--lists .pf-row dd { font-size:13px; }
.pf-top--lists .pf-row--life { padding-bottom:5px; }

/* Player actions: one small row of buttons */
#playerActions { padding:6px 8px !important; }
#playerActions .profile-actions-heading { display:none !important; }
#playerActions .profile-action-grid { display:flex !important; flex-wrap:wrap; gap:6px !important; }
#playerActions .profile-action { flex:0 1 auto; min-height:32px !important; padding:4px 10px 4px 6px !important; gap:6px !important; }
#playerActions .profile-action > span { width:20px !important; height:20px !important; font-size:.74rem !important; }
#playerActions .profile-action small { display:none !important; }
#playerActions .profile-action strong { font-size:.72rem !important; white-space:nowrap; }
#playerActions .profile-action-icon-image { width:16px !important; height:16px !important; }
#combatActions { padding:0 !important; margin:0 !important; border:0 !important; background:none !important; box-shadow:none !important; }
#combatActions .profile-actions-heading { display:none !important; }
#playerActions .profile-action.attack-action { background:linear-gradient(165deg,#d2323f,#8f1620); border-color:#ff6673; }
#playerActions .profile-action.attack-action:hover { background:linear-gradient(165deg,#e63d4b,#a41b27); }
#playerActions .profile-action.attack-action > span { background:rgba(0,0,0,.25); }
.profile-hero > .profile-status-stack { position:relative; z-index:5; margin:0; padding:0 38px 24px; }
@media (max-width:760px){ .profile-hero > .profile-status-stack { padding:0 16px 18px; } }
.profile-hero .profile-live-status { display:flex !important; align-items:center; justify-content:space-between; gap:12px; min-height:0 !important; padding:5px 12px !important; border-radius:8px !important; }
.profile-hero .profile-live-status .status-icon,
.profile-hero .profile-live-status .status-kicker,
.profile-hero .profile-live-status .status-timing small { display:none !important; }
.profile-hero .profile-live-status .status-copy { display:flex; align-items:baseline; gap:8px; min-width:0; }
.profile-hero .profile-live-status .status-copy h2 { margin:0 !important; font-size:.82rem !important; }
.profile-hero .profile-live-status .status-copy p { margin:0 !important; font-size:.72rem !important; }
.profile-hero .profile-live-status .status-timing { display:flex; align-items:baseline; gap:8px; text-align:right; }
.profile-hero .profile-live-status .status-timing span { font-size:.7rem !important; }
.profile-hero .profile-live-status .status-timing strong { font-size:.82rem !important; }
.profile-hero > .profile-status-stack { gap:5px; }
.profile-hero .profile-live-status[hidden], .profile-hero > .profile-status-stack[hidden] { display:none !important; }

/* Phone: a much smaller main profile card */
@media (max-width:640px){
    .profile-hero, body[data-layout] .profile-hero { min-height:0 !important; }
    .profile-hero-content, body[data-layout] .profile-hero-content { min-height:0 !important; gap:10px !important; padding:18px 14px 14px !important; }
    .profile-avatar-frame, body[data-layout] .profile-avatar-frame { width:84px !important; height:84px !important; padding:4px !important; }
    .profile-identity h1 { font-size:1.35rem !important; margin:2px 0 !important; }
    .profile-title { font-size:.78rem !important; margin:0 !important; }
    .profile-identity-meta { gap:5px 10px !important; font-size:.74rem !important; margin-top:6px !important; }
    .profile-eyebrow-row { gap:5px !important; margin-bottom:4px !important; }
    .profile-hero-actions { gap:6px !important; }
    .profile-hero-actions > * { min-height:34px !important; padding:5px 10px !important; font-size:.76rem !important; }
}
@media (max-width:640px){
    .profile-avatar { border-width:2px !important; }
    .profile-online-dot { width:15px !important; height:15px !important; right:3px !important; bottom:6px !important; border-width:3px !important; box-shadow:none; }
    .profile-online-dot.online { box-shadow:0 0 8px rgba(79,215,134,.7) !important; }
}
html.is-preview .pf-signature__edit { display:none !important; }
@media (max-width:640px){
    #playerActions { padding:5px 6px !important; }
    #playerActions .profile-action-grid { gap:4px !important; }
    #playerActions .profile-action { min-height:26px !important; padding:2px 7px 2px 4px !important; gap:4px !important; border-radius:7px !important; }
    #playerActions .profile-action > span { width:16px !important; height:16px !important; font-size:.62rem !important; border-radius:5px !important; }
    #playerActions .profile-action strong { font-size:.64rem !important; }
    #playerActions .profile-action-icon-image { width:12px !important; height:12px !important; }
}

/* Level and age flip counters in the main card */
.profile-level-meta { display: none !important; }
.pf-counters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 22px; margin: 10px 0 4px; }
.pf-counters[hidden], .pf-counter[hidden], .pf-flip[hidden], .pf-level-badge[hidden] { display: none !important; }
.pf-counter { display: grid; justify-items: start; gap: 5px; }
.pf-counter__label { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.pf-counter__text { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.78); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.pf-flip { display: inline-flex; gap: 4px; }
.pf-digit {
    position: relative; display: block; width: 28px; height: 42px; overflow: hidden; border-radius: 7px;
    background: linear-gradient(180deg, #4a505a 0%, #2b3037 49%, #14171b 51%, #1e2228 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 5px rgba(0,0,0,.65), 0 0 0 1px rgba(var(--profile-accent-rgb,224,184,76),.28), 0 6px 12px rgba(0,0,0,.5);
    text-align: center; color: #eef1f6;
}
.pf-digit b { display: block; font: 700 27px/42px var(--font-display, "Oswald", sans-serif); text-shadow: 0 2px 3px rgba(0,0,0,.7); animation: pfRoll .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.pf-digit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 49%; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); pointer-events: none; }
.pf-digit::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, rgba(0,0,0,.85) 0 3px, rgba(0,0,0,.55) 3px calc(100% - 3px), rgba(0,0,0,.85) calc(100% - 3px)); box-shadow: 0 1px 0 rgba(255,255,255,.08); pointer-events: none; }
.pf-digit.is-ghost { color: rgba(238,241,246,.28); }
.pf-level-badge { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(232,188,76,.5)) drop-shadow(0 4px 8px rgba(0,0,0,.6)); animation: pfBadgeIn .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pfRoll { from { transform: translateY(-70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pfBadgeIn { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pf-digit b, .pf-level-badge { animation: none; } }
@media (max-width: 640px) {
    .pf-counters { justify-content: center; gap: 8px 16px; margin: 6px 0 2px; }
    .pf-counter { justify-items: center; }
    .pf-digit { width: 20px; height: 30px; border-radius: 5px; }
    .pf-digit b { font-size: 19px; line-height: 30px; }
    .pf-flip { gap: 3px; }
    .pf-level-badge { width: 46px; height: 46px; }
    .pf-counter__label { font-size: 9px; }
    .pf-counter__text { font-size: 10px; }
}
.pf-counter { justify-items: center; text-align: center; }
.pf-counter .pf-level-badge { display: block; margin: 0 auto; }
.pf-row[hidden] { display: none !important; }

/* ---- Main card, redesigned: avatar | identity | glass side panel (counters + buttons). Everything keys off the
   theme variables, so themes, accents, frames and banners (and a custom header picture) still drive the look. ---- */
.profile-hero-side { display: grid; gap: 12px; align-content: center; width: min(320px, 100%); min-width: 0; }
.pf-counters {
    margin: 0; padding: 14px 18px 12px; gap: 12px 26px; justify-content: space-around; align-items: flex-end;
    border-radius: 18px; border: 1px solid rgba(var(--profile-accent-rgb, 224,184,76), .3);
    background: linear-gradient(160deg, rgba(8,12,18,.66), rgba(8,12,18,.4));
    box-shadow: 0 16px 36px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07), 0 0 28px rgba(var(--profile-accent-rgb, 224,184,76), .08);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.profile-hero-side .profile-hero-actions { min-width: 0; }
.profile-hero-side .profile-hero-actions > * { border-radius: 12px; }

@media (min-width: 641px) {
    .profile-hero-content { align-items: center; gap: 40px; padding: 52px 56px 48px; }
    .profile-avatar-frame { box-shadow: 0 0 0 5px rgba(0,0,0,.35), 0 22px 55px rgba(0,0,0,.55), 0 0 44px rgba(var(--profile-accent-rgb, 224,184,76), .35); }
    .profile-identity h1 { font-size: clamp(38px, 4.6vw, 58px); }
    .profile-identity h1::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--profile-accent), rgba(var(--profile-accent-rgb, 224,184,76), 0)); }
    .profile-identity .profile-title { margin-top: 10px; }
    .profile-identity-meta { gap: 8px 10px; margin-top: 16px; }
    .profile-identity-meta > span { padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
}
@media (min-width: 641px) and (max-width: 1100px) {
    .profile-hero-content { padding: 40px 32px 34px; gap: 28px; }
    .profile-hero-side { grid-column: 1 / -1; width: 100%; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
    .profile-hero-side .profile-hero-actions { grid-column: auto; flex-direction: column; justify-content: center; }
}
@media (max-width: 640px) {
    .profile-hero-side { width: 100%; gap: 8px; }
    .pf-counters { padding: 8px 10px; border-radius: 12px; justify-content: space-evenly; }
}
.pf-counters { align-items: flex-start; }
@media (min-width: 641px) {
    .profile-identity h1 { width: fit-content; max-width: 100%; }
    .profile-identity h1::after { width: 100%; background: linear-gradient(90deg, var(--profile-accent) 0%, var(--profile-accent) 70%, rgba(var(--profile-accent-rgb, 224,184,76), 0) 100%); }
}

/* Header picture scaling: the picture is drawn in a box a fifth taller than the card, and the vertical slider slides that box,
   so the vertical position always changes the banner (a wide picture used to have no spare height to move). The small
   "Live preview" on the customise page is drawn the same way, at the card's shape, so it matches the real banner. */
.profile-hero-image { top: calc(var(--hero-y, 50) * -0.2%); bottom: auto; height: 120%; }
.profile-header-position-preview { position: relative; height: auto; aspect-ratio: 3.4 / 1; background: #0b0e12; }
.profile-header-position-preview__img { position: absolute; left: 0; right: 0; top: calc(var(--hero-y, 50) * -0.2%); height: 120%; background: 50% 50% / cover no-repeat; }

/* ---- Counter styles for the Level and Age tiles (chosen in Profile Customisation). The default is the flip clock above. ---- */
[data-counter] .pf-digit b { animation-name: pfRoll; }
[data-counter="led"] .pf-digit {
    background: #06080b; border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 0 0 1px rgba(var(--profile-accent-rgb,224,184,76), .4), 0 0 16px rgba(var(--profile-accent-rgb,224,184,76), .28);
}
[data-counter="led"] .pf-digit::before, [data-counter="led"] .pf-digit::after { display: none; }
[data-counter="led"] .pf-digit b { font-family: var(--font-mono, ui-monospace, "Courier New", monospace); font-weight: 700; color: var(--profile-accent); text-shadow: 0 0 6px var(--profile-accent), 0 0 16px rgba(var(--profile-accent-rgb,224,184,76), .75); }
[data-counter="led"] .pf-digit.is-ghost b { color: rgba(var(--profile-accent-rgb,224,184,76), .16); text-shadow: none; }

[data-counter="neon"] .pf-digit {
    background: rgba(0,0,0,.28); border-radius: 9px; border: 2px solid var(--profile-accent);
    box-shadow: 0 0 10px rgba(var(--profile-accent-rgb,224,184,76), .85), inset 0 0 12px rgba(var(--profile-accent-rgb,224,184,76), .38);
}
[data-counter="neon"] .pf-digit::before, [data-counter="neon"] .pf-digit::after { display: none; }
[data-counter="neon"] .pf-digit b { color: #fff; text-shadow: 0 0 5px #fff, 0 0 14px var(--profile-accent); }
[data-counter="neon"] .pf-digit.is-ghost { opacity: .4; }

[data-counter="minimal"] .pf-flip { gap: 2px; }
[data-counter="minimal"] .pf-digit { width: auto; min-width: .64em; overflow: visible; background: none; box-shadow: none; border-radius: 0; border-bottom: 2px solid rgba(var(--profile-accent-rgb,224,184,76), .55); padding: 0 3px; }
[data-counter="minimal"] .pf-digit::before, [data-counter="minimal"] .pf-digit::after { display: none; }
[data-counter="minimal"] .pf-digit b { color: #fff; font-weight: 500; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
[data-counter="minimal"] .pf-digit.is-ghost b { color: rgba(255,255,255,.22); }

[data-counter="gold"] .pf-digit {
    background: linear-gradient(180deg, #fbe7a3 0%, #dcb24a 49%, #9a741f 51%, #c9a03a 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(80,50,0,.45), 0 0 0 1px rgba(80,50,0,.55), 0 6px 12px rgba(0,0,0,.45);
}
[data-counter="gold"] .pf-digit::before { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); }
[data-counter="gold"] .pf-digit::after { background: rgba(70,44,0,.65); box-shadow: 0 1px 0 rgba(255,255,255,.3); }
[data-counter="gold"] .pf-digit b { color: #2b1d04; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
[data-counter="gold"] .pf-digit.is-ghost b { color: rgba(43,29,4,.32); }

[data-counter="ledger"] .pf-digit {
    background: linear-gradient(180deg, #f6f0de 0%, #e9e1c8 49%, #d4c9a8 51%, #ebe3cc 100%);
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(90,70,30,.25), 0 0 0 1px rgba(60,45,15,.35), 0 6px 12px rgba(0,0,0,.4);
}
[data-counter="ledger"] .pf-digit::before { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }
[data-counter="ledger"] .pf-digit::after { background: rgba(60,45,15,.4); box-shadow: 0 1px 0 rgba(255,255,255,.6); }
[data-counter="ledger"] .pf-digit b { color: #1c1812; font-family: Georgia, "Times New Roman", serif; text-shadow: none; }
[data-counter="ledger"] .pf-digit.is-ghost b { color: rgba(28,24,18,.28); }

/* The small sample in the customise page's picker */
.style-swatch__visual.style-swatch__counter { display: grid; place-items: center; }
.style-swatch__counter .pf-flip { gap: 2px; }
.style-swatch__counter .pf-digit { width: 15px; height: 22px; border-radius: 4px; }
.style-swatch__counter .pf-digit b { font-size: 14px; line-height: 22px; animation: none; }
.style-swatch__counter[data-counter="minimal"] .pf-digit { width: auto; height: auto; min-width: 9px; }
.style-swatch__counter[data-counter="minimal"] .pf-digit b { line-height: 1.2; }

/* ---- More counter styles ---- */
@keyframes pfFlicker { 0%, 100% { opacity: 1; } 46% { opacity: .86; } 50% { opacity: .55; } 54% { opacity: .95; } }

/* Odometer: chrome-rimmed barrels, digits shaded like a cylinder. */
[data-counter="odometer"] .pf-digit {
    border-radius: 5px; background: linear-gradient(180deg, #08080a, #1b1b1f 50%, #08080a);
    box-shadow: 0 0 0 2px #9aa0a8, 0 0 0 3px #2a2d31, 0 7px 12px rgba(0,0,0,.55), inset 0 0 6px rgba(0,0,0,.9);
}
[data-counter="odometer"] .pf-digit::before { height: 100%; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 22%); }
[data-counter="odometer"] .pf-digit::after { top: 0; height: 100%; margin: 0; background: linear-gradient(180deg, rgba(0,0,0,.85) 0, transparent 30%, transparent 70%, rgba(0,0,0,.85) 100%); box-shadow: none; }
[data-counter="odometer"] .pf-digit b { color: transparent; background: linear-gradient(180deg, #8a8d92 0%, #fff 35%, #fff 65%, #8a8d92 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
[data-counter="odometer"] .pf-digit.is-ghost b { background: linear-gradient(180deg, #3a3c40, #6a6d72 50%, #3a3c40); -webkit-background-clip: text; background-clip: text; }

/* Dot Matrix: amber dots on black. */
[data-counter="dotmatrix"] .pf-digit {
    border-radius: 4px; background: #0a0703;
    box-shadow: inset 0 0 0 1px rgba(255,170,0,.28), 0 0 0 1px #000, 0 0 16px rgba(255,150,0,.28);
}
[data-counter="dotmatrix"] .pf-digit::before, [data-counter="dotmatrix"] .pf-digit::after { display: none; }
[data-counter="dotmatrix"] .pf-digit b {
    font-family: var(--font-mono, ui-monospace, "Courier New", monospace); font-weight: 900; color: #ffc233; text-shadow: none;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 50%, transparent 56%); mask-image: radial-gradient(circle at 50% 50%, #000 0 50%, transparent 56%);
    -webkit-mask-size: 3.4px 3.4px; mask-size: 3.4px 3.4px; filter: drop-shadow(0 0 3px rgba(255,160,0,.85));
}
[data-counter="dotmatrix"] .pf-digit.is-ghost b { color: rgba(255,178,31,.2); filter: none; }

/* Carbon Fibre: woven carbon with an accent edge. */
[data-counter="carbon"] .pf-digit {
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(255,255,255,.09) 25%, transparent 25% 50%, rgba(255,255,255,.09) 50% 75%, transparent 75%) 0 0 / 6px 6px, linear-gradient(180deg, #1b1e22, #0d0f11);
    box-shadow: inset 0 0 0 1px rgba(var(--profile-accent-rgb,224,184,76), .6), 0 0 14px rgba(var(--profile-accent-rgb,224,184,76), .32), 0 7px 12px rgba(0,0,0,.55);
}
[data-counter="carbon"] .pf-digit::before { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); }
[data-counter="carbon"] .pf-digit::after { height: 1px; margin: 0; background: rgba(var(--profile-accent-rgb,224,184,76), .55); box-shadow: none; }
[data-counter="carbon"] .pf-digit b { color: #fff; text-shadow: 0 0 10px rgba(var(--profile-accent-rgb,224,184,76), .75), 0 2px 3px rgba(0,0,0,.8); }
[data-counter="carbon"] .pf-digit.is-ghost b { color: rgba(255,255,255,.22); text-shadow: none; }

/* Hologram: projected cyan digits with corner brackets and scan lines. */
[data-counter="hologram"] .pf-digit {
    overflow: visible; border-radius: 2px; background-color: rgba(60,220,255,.07); animation: pfFlicker 3.6s infinite;
    box-shadow: inset 0 0 14px rgba(60,220,255,.2);
    background-image:
        linear-gradient(#6fe9ff, #6fe9ff), linear-gradient(#6fe9ff, #6fe9ff),
        linear-gradient(#6fe9ff, #6fe9ff), linear-gradient(#6fe9ff, #6fe9ff),
        linear-gradient(#6fe9ff, #6fe9ff), linear-gradient(#6fe9ff, #6fe9ff),
        linear-gradient(#6fe9ff, #6fe9ff), linear-gradient(#6fe9ff, #6fe9ff);
    background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
    background-size: 7px 2px, 2px 7px, 7px 2px, 2px 7px, 7px 2px, 2px 7px, 7px 2px, 2px 7px;
    background-repeat: no-repeat;
}
[data-counter="hologram"] .pf-digit::before { display: none; }
[data-counter="hologram"] .pf-digit::after { top: 0; height: 100%; margin: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); box-shadow: none; }
[data-counter="hologram"] .pf-digit b { color: #aaf4ff; text-shadow: 0 0 6px #6fe9ff, 0 0 16px rgba(60,220,255,.8); }
[data-counter="hologram"] .pf-digit.is-ghost b { color: rgba(170,244,255,.25); text-shadow: none; }

/* Casino Chips: round chips with striped edges. */
[data-counter="chip"] .pf-flip { gap: 6px; }
[data-counter="chip"] .pf-digit { --chipc: #c62d3b; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: repeating-conic-gradient(#f4efe3 0 13deg, var(--chipc) 13deg 30deg); box-shadow: 0 0 0 1.5px rgba(0,0,0,.55), 0 6px 10px rgba(0,0,0,.5); }
[data-counter="chip"] .pf-digit:nth-child(4n+2) { --chipc: #2459b8; }
[data-counter="chip"] .pf-digit:nth-child(4n+3) { --chipc: #1c8a52; }
[data-counter="chip"] .pf-digit:nth-child(4n) { --chipc: #2a2a30; }
[data-counter="chip"] .pf-digit::before { display: block; inset: 14%; height: auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--chipc) 70%, #fff), var(--chipc) 70%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 0 0 1px rgba(0,0,0,.35); z-index: 0; }
[data-counter="chip"] .pf-digit::after { display: none; }
[data-counter="chip"] .pf-digit b { position: relative; z-index: 1; font-size: 17px; line-height: 38px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
[data-counter="chip"] .pf-digit.is-ghost { opacity: .32; }

/* Pixel Arcade: chunky 8-bit blocks. */
[data-counter="pixel"] .pf-flip { gap: 5px; }
[data-counter="pixel"] .pf-digit {
    border-radius: 0; background: var(--profile-accent);
    box-shadow: inset -3px -3px 0 rgba(0,0,0,.4), inset 3px 3px 0 rgba(255,255,255,.4), 0 0 0 3px #000, 4px 4px 0 3px rgba(0,0,0,.55);
}
[data-counter="pixel"] .pf-digit::before, [data-counter="pixel"] .pf-digit::after { display: none; }
[data-counter="pixel"] .pf-digit b { font-family: "Courier New", ui-monospace, monospace; font-weight: 900; color: #0a0a0c; text-shadow: 2px 2px 0 rgba(255,255,255,.4); animation-timing-function: steps(5, end); }
[data-counter="pixel"] .pf-digit.is-ghost { opacity: .35; }

/* Sizes for the new styles on a phone and in the picker samples */
@media (max-width: 640px) {
    [data-counter="chip"] .pf-digit { width: 27px; height: 27px; }
    [data-counter="chip"] .pf-digit b { font-size: 12px; line-height: 27px; }
}
.style-swatch__counter[data-counter="chip"] .pf-digit { width: 20px; height: 20px; }
.style-swatch__counter[data-counter="chip"] .pf-digit b { font-size: 10px; line-height: 20px; }
.style-swatch__counter[data-counter="dotmatrix"] .pf-digit b { -webkit-mask-size: 2.4px 2.4px; mask-size: 2.4px 2.4px; }
.style-swatch__counter[data-counter="hologram"] .pf-digit { animation: none; }
.profile-district-meta { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 640px) {
    .pf-counters { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 4px 0; }
}

/* Phone: the buttons sit under the main card, small and side by side. */
@media (max-width: 640px) {
    .profile-dossier > .profile-hero-actions { display: flex !important; flex-direction: row !important; gap: 8px !important; margin: 8px 0 0; min-width: 0; }
    .profile-dossier > .profile-hero-actions > * { flex: 1 1 0 !important; min-height: 0 !important; padding: 6px 8px !important; font-size: .7rem !important; border-radius: 9px !important; white-space: nowrap; justify-content: center; }
    .profile-dossier > .profile-hero-actions > [hidden] { display: none !important; }
    .profile-dossier > .profile-hero-actions .profile-button-icon { width: 14px !important; height: 14px !important; }
}
/* Desktop: the Total XP, rank and district chips are smaller so all three fit on one line. */
@media (min-width: 641px) {
    .profile-identity-meta { gap: 6px 8px; flex-wrap: wrap; }
    .profile-identity-meta > span { padding: 3px 10px; font-size: 12px; gap: 6px; }
    .profile-identity-meta > span img, .profile-identity-meta .profile-inline-icon { width: 16px; height: 16px; }
    .profile-identity-meta .profile-rank-icon { width: 18px; height: 18px; }
}

/* ---------- Kingpin counters: eight premium tile styles for the level and age counters ---------- */
@keyframes pfkSheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes pfkSpin { to { transform: rotate(360deg); } }
@keyframes pfkTwinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes pfkEmber { from { opacity: .5; } to { opacity: 1; } }
@keyframes pfkAurora { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Black Card: a black metal card with a gold edge, a gold chip mark, and a light that glides over each digit. */
[data-counter="blackcard"] .pf-digit {
    border-radius: 6px; background: linear-gradient(145deg, #2a2a2e, #050506 55%, #1a1a1d);
    box-shadow: inset 0 0 0 1px rgba(246,220,138,.6), inset 0 1px 0 rgba(255,255,255,.22), 0 0 14px rgba(230,185,79,.28), 0 6px 12px rgba(0,0,0,.55);
}
[data-counter="blackcard"] .pf-digit::before { top: 0; height: 100%; background: linear-gradient(110deg, transparent 35%, rgba(255,240,190,.55) 50%, transparent 65%) 160% 0 / 250% 100% no-repeat; animation: pfkSheen 4.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
[data-counter="blackcard"] .pf-digit::after { top: auto; bottom: 3px; left: 3px; right: auto; width: 7px; height: 5px; margin: 0; border-radius: 1.5px; background: linear-gradient(135deg, #fff1b0, #c8922a); box-shadow: none; }
[data-counter="blackcard"] .pf-digit b, [data-counter="midnight"] .pf-digit b { color: transparent; background: linear-gradient(180deg, #fff6c8, #e0b13a 55%, #8a5f10); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.85)); }
[data-counter="blackcard"] .pf-digit.is-ghost b, [data-counter="midnight"] .pf-digit.is-ghost b { opacity: .3; }

/* Diamond: faceted crystal tiles with a dark glass centre and a twinkling sparkle. */
[data-counter="diamond"] .pf-digit {
    border-radius: 6px; background: conic-gradient(from 20deg, #fff 0 12%, #b8c2d4 12% 25%, #ffd3ea 25% 37%, #7d889c 37% 50%, #fff 50% 62%, #b8c2d4 62% 75%, #cfeaff 75% 87%, #7d889c 87%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 0 14px rgba(190,220,255,.5), 0 6px 12px rgba(0,0,0,.5);
}
[data-counter="diamond"] .pf-digit::before { top: 3px; left: 3px; right: 3px; height: auto; bottom: 3px; border-radius: 4px; background: linear-gradient(160deg, #141826, #05070c); box-shadow: inset 0 0 6px rgba(150,200,255,.55); }
[data-counter="diamond"] .pf-digit::after { top: 1px; right: 1px; left: auto; width: 9px; height: 9px; margin: 0; background: #fff; box-shadow: none; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: pfkTwinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .45s); z-index: 2; }
[data-counter="diamond"] .pf-digit b { position: relative; z-index: 1; color: #eaf6ff; text-shadow: 0 0 6px #8fd0ff, 0 0 12px rgba(143,208,255,.7); }
[data-counter="diamond"] .pf-digit.is-ghost b { opacity: .3; }

/* Molten: obsidian tiles with glowing fault-lines and a pulse of heat along the base. */
[data-counter="molten"] .pf-digit {
    border-radius: 5px; background: linear-gradient(160deg, #1c0e08, #050302 55%, #140a05);
    box-shadow: inset 0 0 0 1px rgba(255,120,40,.55), 0 0 14px rgba(255,110,30,.5), 0 6px 12px rgba(0,0,0,.55);
}
[data-counter="molten"] .pf-digit::before { top: 0; height: 100%; background: repeating-conic-gradient(from 8deg at 30% 105%, transparent 0 11deg, rgba(255,130,40,.8) 11deg 12deg), radial-gradient(circle at 50% 115%, rgba(255,110,30,.75), transparent 60%); animation: pfkEmber 2.2s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * .25s); }
[data-counter="molten"] .pf-digit::after { top: auto; bottom: 0; height: 3px; margin: 0; background: linear-gradient(90deg, transparent, #ff8a2a, transparent); box-shadow: none; }
[data-counter="molten"] .pf-digit b { position: relative; z-index: 1; color: #ffe2b0; text-shadow: 0 0 6px #ff7a1a, 0 0 14px rgba(255,100,20,.9); }
[data-counter="molten"] .pf-digit.is-ghost b { opacity: .3; }

/* Vault Dial: round steel combination dials with a ticking bezel. */
[data-counter="vault"] .pf-flip { gap: 6px; }
[data-counter="vault"] .pf-digit {
    width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(from 0deg, #eef2f6, #7d8791, #eef2f6, #7d8791, #eef2f6);
    box-shadow: 0 0 0 2px #0c0e10, 0 6px 12px rgba(0,0,0,.55);
}
[data-counter="vault"] .pf-digit::before { top: 4px; left: 4px; right: 4px; bottom: 4px; height: auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a424a, #0d1013); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
[data-counter="vault"] .pf-digit::after { top: 0; left: 0; right: 0; bottom: 0; height: auto; margin: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(0,0,0,.6) 0 2deg, transparent 2deg 15deg); -webkit-mask: radial-gradient(farthest-side, transparent 76%, #000 78%); mask: radial-gradient(farthest-side, transparent 76%, #000 78%); box-shadow: none; animation: pfkSpin 40s linear infinite; }
[data-counter="vault"] .pf-digit b { position: relative; z-index: 1; font-size: 18px; line-height: 40px; color: #f4f7fa; text-shadow: 0 0 6px rgba(160,210,255,.6), 0 1px 2px #000; }
[data-counter="vault"] .pf-digit.is-ghost { opacity: .35; }

/* Aurora Glass: frosted glass tiles with drifting northern-lights colour. */
[data-counter="aurora"] .pf-digit {
    border-radius: 7px; background: linear-gradient(120deg, #0b2a3a, #1a7a62, #4a2a9a, #0b2a3a); background-size: 300% 300%; animation: pfkAurora 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.9s);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), 0 0 14px rgba(80,255,190,.38), 0 6px 12px rgba(0,0,0,.5);
}
[data-counter="aurora"] .pf-digit::before { top: 0; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 48%); }
[data-counter="aurora"] .pf-digit::after { display: none; }
[data-counter="aurora"] .pf-digit b { color: #fff; text-shadow: 0 0 8px rgba(120,255,220,.95), 0 1px 2px rgba(0,0,0,.6); }
[data-counter="aurora"] .pf-digit.is-ghost b { opacity: .3; }

/* Plasma Core: an energy tile whose rim crackles with spinning colour. */
[data-counter="plasma"] .pf-digit { border-radius: 8px; background: #07040f; box-shadow: 0 0 14px rgba(150,90,255,.6), 0 6px 12px rgba(0,0,0,.5); }
[data-counter="plasma"] .pf-digit::before { top: -50%; left: -50%; right: -50%; height: 200%; background: conic-gradient(#2ff3ff, #7a5cff, #ff2fe6, #2ff3ff); animation: pfkSpin 3s linear infinite; animation-delay: calc(var(--i, 0) * -.4s); }
[data-counter="plasma"] .pf-digit::after { top: 2px; left: 2px; right: 2px; bottom: 2px; height: auto; margin: 0; border-radius: 6px; background: radial-gradient(circle at 50% 40%, #1d1038, #05030c); box-shadow: none; }
[data-counter="plasma"] .pf-digit b { position: relative; z-index: 1; color: #fff; text-shadow: 0 0 6px #b79bff, 0 0 14px #7a5cff; }
[data-counter="plasma"] .pf-digit.is-ghost b { opacity: .3; }

/* Royale: red velvet tiles trimmed in gold, with playing-card pips in the corners. */
[data-counter="royale"] .pf-digit { --pip: "♠"; border-radius: 6px; background: radial-gradient(circle at 50% 30%, #a01428, #4a0610 72%); box-shadow: inset 0 0 0 2px #d9a92f, inset 0 0 0 3px rgba(0,0,0,.5), 0 6px 12px rgba(0,0,0,.55); }
[data-counter="royale"] .pf-digit:nth-child(4n+2) { --pip: "♥"; }
[data-counter="royale"] .pf-digit:nth-child(4n+3) { --pip: "♦"; }
[data-counter="royale"] .pf-digit:nth-child(4n) { --pip: "♣"; }
[data-counter="royale"] .pf-digit::before { content: var(--pip); top: 3px; left: 4px; right: auto; height: auto; background: none; font-size: 8px; line-height: 1; color: #e8c35a; }
[data-counter="royale"] .pf-digit::after { content: var(--pip); top: auto; bottom: 3px; right: 4px; left: auto; width: auto; height: auto; margin: 0; background: none; box-shadow: none; font-size: 8px; line-height: 1; color: #e8c35a; transform: rotate(180deg); }
[data-counter="royale"] .pf-digit b { position: relative; z-index: 1; font-family: Georgia, "Times New Roman", serif; color: #f6dc8a; text-shadow: 0 1px 2px #000; }
[data-counter="royale"] .pf-digit.is-ghost b { opacity: .3; }

/* Midnight Stars: a night-sky tile scattered with twinkling stars and gold digits. */
[data-counter="midnight"] .pf-digit {
    border-radius: 6px;
    background:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 72% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 72%, #ffe9a8, transparent),
        radial-gradient(1px 1px at 86% 64%, #fff, transparent), radial-gradient(1px 1px at 12% 82%, #fff, transparent), linear-gradient(180deg, #0a1030, #02030a);
    box-shadow: inset 0 0 0 1px rgba(246,220,138,.5), 0 0 12px rgba(120,140,255,.32), 0 6px 12px rgba(0,0,0,.5);
}
[data-counter="midnight"] .pf-digit::before { top: 0; height: 100%; background: radial-gradient(1.5px 1.5px at 30% 22%, #fff, transparent), radial-gradient(1.5px 1.5px at 78% 46%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 86%, #ffe9a8, transparent), radial-gradient(1px 1px at 8% 50%, #fff, transparent); animation: pfkTwinkle 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .5s); }
[data-counter="midnight"] .pf-digit::after { display: none; }

/* Phone sizes */
@media (max-width: 640px) {
    [data-counter="vault"] .pf-digit { width: 28px; height: 28px; }
    [data-counter="vault"] .pf-digit::before { top: 3px; left: 3px; right: 3px; bottom: 3px; }
    [data-counter="vault"] .pf-digit b { font-size: 13px; line-height: 28px; }
    [data-counter="royale"] .pf-digit::before, [data-counter="royale"] .pf-digit::after { font-size: 6px; }
    [data-counter="diamond"] .pf-digit::after { width: 7px; height: 7px; }
    [data-counter="blackcard"] .pf-digit::after { width: 5px; height: 4px; }
}
/* Picker samples stand still and shrink the small details */
.style-swatch__counter[data-counter="vault"] .pf-digit { width: 22px; height: 22px; }
.style-swatch__counter[data-counter="vault"] .pf-digit::before { top: 2px; left: 2px; right: 2px; bottom: 2px; }
.style-swatch__counter[data-counter="vault"] .pf-digit b { font-size: 11px; line-height: 22px; }
.style-swatch__counter[data-counter="royale"] .pf-digit::before, .style-swatch__counter[data-counter="royale"] .pf-digit::after { font-size: 5px; }
.style-swatch__counter[data-counter="diamond"] .pf-digit::after { width: 6px; height: 6px; }
.style-swatch__counter[data-counter="blackcard"] .pf-digit::after { width: 4px; height: 3px; }
.style-swatch__counter .pf-digit, .style-swatch__counter .pf-digit::before, .style-swatch__counter .pf-digit::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    [data-counter] .pf-digit, [data-counter] .pf-digit::before, [data-counter] .pf-digit::after { animation: none !important; }
}

/* More accent colours */
body[data-accent="olive"] { --profile-accent:#a3b43a; --profile-accent-rgb:163,180,58; --profile-accent-soft:rgba(163,180,58,.17); }
body[data-accent="teal"] { --profile-accent:#14b8a6; --profile-accent-rgb:20,184,166; --profile-accent-soft:rgba(20,184,166,.17); }
body[data-accent="magenta"] { --profile-accent:#ff2fe6; --profile-accent-rgb:255,47,230; --profile-accent-soft:rgba(255,47,230,.17); }
body[data-accent="lavender"] { --profile-accent:#cbb8ff; --profile-accent-rgb:203,184,255; --profile-accent-soft:rgba(203,184,255,.17); }

/* Tablet width (641-820px): the card is centred, so the player name is centred and larger too. */
@media (min-width: 641px) and (max-width: 820px) {
    .profile-identity h1 { margin-inline: auto; font-size: clamp(46px, 7.2vw, 58px); }
}