/* ==========================================================
   NAC — Premium Mafia Dashboard
   Mobile-first · Film-noir · BEM

   Standard Breakpoint map (keep in sync with index.html + app.js):
     • < 640px    (sm) — phone, single-column dashboard
     • 640–767px  (md) — large phone / compact tablet
     • 768–1023px (lg) — iPad / tablet portrait, 2-column dashboard
     • ≥ 1024px   (lg) — iPad landscape / desktop sidebar + unified header + 3-column grid
     • ≥ 1280px   (xl) — wide desktop polish (spacing + hero title only)
   ========================================================== */

/* Edit :root to re-brand the entire site (surfaces, gold accent, stat colors, fonts).
   Components reference these tokens — avoid hard-coding hex values elsewhere. */
:root {
    /* ── Backgrounds — warm charcoal noir ── */
    --bg-viewport: #0B0A09;
    --bg-panel: #141311;
    --bg-sub: #15120e;
    --bg-track: #1a1712;
    --bg-elevated: #1f1b16;

    /* ── Frames — warm brown ── */
    --border-color: #3a2a1a;
    --border-color-soft: #2a1f14;

    /* ── PRIMARY ACCENT — Mafia Gold ── */
    --color-gold: #d4af37;
    --color-gold-dim: #9a8550;
    --color-gold-soft: rgba(var(--color-gold-rgb), 0.07);
    --color-gold-rgb: 212, 175, 55;

    /* ── SECONDARY ACCENT — Warm Brass ── */
    --color-amber: #c4883c;
    --color-amber-rgb: 196, 136, 60;

    /* ── DANGER — Rust Red (blood, violence, risk) ── */
    --color-rust: #c0392b;
    --color-rust-dim: #7a1f15;
    --color-rust-bright: #e74c3c;
    --color-rust-soft: rgba(192, 57, 43, 0.08);
    --color-rust-rgb: 192, 57, 43;

    /* ── FUNCTIONAL COLORS ── */
    /* Core greens */
    --green-1: #2ecc71;
    --green-1a: #2ea043;
    --green-2: #27ae60;
    --green-3: #81c784;
    --color-cash: var(--green-1a);
    --color-cash-rgb: 46, 160, 67;
    --color-dirty: var(--color-rust);
    --color-success: var(--green-2);
    --color-danger: #922b21;
    --color-caution: #b7770d;
    --color-info: #1a5276;
    --color-positive: var(--green-1);
    --color-positive-rgb: 46, 204, 113;
    --color-positive-dark: var(--green-2);
    --color-positive-dark-rgb: 39, 174, 96;
    --color-bright-green: var(--green-1);
    --color-withdraw: #e67e22;
    --color-withdraw-rgb: 230, 126, 34;
    --color-withdraw-dark: #d35400;
    --color-withdraw-dark-rgb: 211, 84, 0;
    --color-rust-bright-rgb: 231, 76, 60;

    /* ── Extended palette ── */
    --color-gold-bright: #e2b714;
    --color-gold-pure: #ffd700;
    --color-danger-bright: #e94560;
    --color-blue: #3498db;
    --color-orange: #f39c12;
    --color-red-soft: #ef4444;
    --color-green-material: var(--green-1);
    --color-green-soft: var(--green-3);
    --color-green-dark: var(--green-2);
    --white: #ffffff;
    --bg-deep: #111;
    --text-gray-888: #888;
    --text-gray-666: #666;
    --text-gray-999: #999;
    --text-gray-aaa: #aaa;
    --text-gray-555: #555;
    --text-gray-ccc: #ccc;
    --text-gray-ddd: #ddd;

    /* ── Text — warm parchment hierarchy ── */
    --text-primary: #FFFFFF;
    --text-secondary: #C4BFB4;
    --text-tertiary: #B0A99E;
    --text-dim: #9A9589;
    --text-main: var(--text-primary);
    --text-muted: var(--text-tertiary);
    --accent: var(--color-gold);

    /* ── Typography ── */
    --font-primary: 'Manrope', sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-mono: 'DM Mono', monospace;
    --font-heading: var(--font-serif);
    --font-display: var(--font-serif);
    --font-ui: var(--font-primary);

    /* ── Radius ── */
    --radius-ui: 0.5rem;
    --radius-sharp: 0.375rem;

    /* ── Spacing ── */
    --space-cell: 0.75rem;
    --space-cell-tight: 0.625rem;
    --space-section: 0.875rem;
    --icon-label-gap: 0.5rem;

    /* ── Header — warm leather & smoke ── */
    --header-panel: linear-gradient(145deg, rgba(32, 26, 20, 0.96), rgba(12, 10, 8, 0.98));
    --header-border: rgba(var(--color-gold-rgb), 0.18);
    --header-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);

    /* ── Glass — warm mafia sheen ── */
    --glass-blur: 8px;
    --glass-surface: rgba(20, 16, 12, 0.6);
    --glass-surface-strong: linear-gradient(145deg, rgba(32, 26, 20, 0.78) 0%, rgba(10, 8, 6, 0.88) 100%);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-border-gold: rgba(var(--color-gold-rgb), 0.18);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    --glass-sheen: linear-gradient(to bottom, rgba(var(--color-gold-rgb), 0.04), transparent 60%);

    /* ── Heist tiers ── */
    --color-tier-street: var(--text-tertiary);
    --color-tier-organized: var(--color-success);
    --color-tier-elite: var(--color-info);
    --color-tier-legendary: #7a6530;
    --color-tier-ghost: var(--color-gold);

    /* ── Cartel ranks ── */
    --color-rank-patron: var(--color-gold);
    --color-rank-underboss: var(--color-rust);
    --color-rank-consigliere: #7a6530;
    --color-rank-capo: var(--color-info);
    --color-rank-soldier: var(--text-tertiary);
    --color-rank-associate: var(--text-dim);

    /* ── Cartel tiers ── */
    --color-cartel-tier1: var(--text-dim);
    --color-cartel-tier2: var(--color-success);
    --color-cartel-tier3: var(--color-info);
    --color-cartel-tier4: #7a6530;
    --color-cartel-tier5: var(--color-gold);

    /* ── Stock market ── */
    --color-stock-up: var(--color-success);
    --color-stock-down: var(--color-danger);
    --color-stock-neutral: var(--text-dim);

    /* ── Player states ── */
    --color-hospitalized: var(--color-danger);
    --color-jailed: #3a3030;
    --color-online: var(--color-success);
    --color-offline: #3a3030;

    /* ── Stat colors ── */
    --color-stat-strength: var(--color-rust);
    --color-stat-guard: var(--color-info);
    --color-stat-agility: var(--color-success);
    --color-stat-precision: #7a6530;
    --color-stat-intelligence: var(--color-gold);
    --color-stat-stealth: #4a4540;
    --color-stat-street: var(--text-tertiary);
    --color-stat-charisma: var(--color-rust);
    --color-stat-resilience: #7a1f15;

    /* ── VIP & Exclusive ── */
    --color-vip: #7a6530;
    --color-vip-bright: var(--color-amber);
    --color-vip-soft: rgba(196, 136, 60, 0.10);
    --color-exclusive: var(--color-gold);

    /* ── Backward-compatible aliases ── */
    --color-blood: var(--color-rust-dim);
    --color-blood-rgb: var(--color-rust-rgb);
    --color-crimson: var(--color-rust-dim);
    --color-crimson-bright: var(--color-rust-bright);
    --color-crimson-rgb: var(--color-rust-rgb);
    --color-green: var(--color-success);
    --color-green-rgb: 30, 132, 73;
    --color-energy: var(--color-blue);
    --color-energy-rgb: 52, 152, 219;
    --color-nerves: #9b59b6;
    --color-nerves-rgb: 155, 89, 182;
    --color-violet: #6c3483;
    --color-violet-bright: #9b59b6;
    --color-credit: var(--color-gold);
    --font-sans: var(--font-primary);
    --text-silver: var(--text-secondary);
    --glass-blur-tight: 8px;
    --glass-glow-opacity: 0.35;
    --glass-track: rgba(0, 0, 0, 0.5);
    --glass-track-inset: inset 0 1px 3px rgba(0, 0, 0, 0.55);
    --radius-mobile: var(--radius-ui);

    /* ── Touch press ── */
    --touch-press-scale: 0.97;
    --touch-press-brightness: 0.9;
    --touch-press-speed: 0.1s;

    /* ── Phase 3: remaining hardcoded hex colors ── */
    --bg-dark-blue-gray: #0d0f11;
    --color-dark-olive: #2a2208;
    --color-dark-olive-deep: #1a1505;
    --bg-dark-slate: #2a2d35;
    --text-warm-gray: #b5aea2;
    --color-black: #000;
    --color-dark-gold: #221b07;
    --color-gold-warm: #f5c842;
    --color-dark-amber: #3a2f0c;
    --bg-very-dark: #080706;
    --bg-dark-cool: #090a0d;
    --bg-dark-panel: #1a1d23;
    --text-gray: #777;
    --text-light-gray: #bbb;
    --color-gold-vivid: #e6c34a;

    /* ── RARITY — canonical CSS mirror of config/design-tokens.js rarity palette.
       Use these on item borders, badges, glow halos. Keep in sync with design-tokens.js. */
    --rarity-common: #9CA3AF;
    --rarity-rare: #34D399;
    --rarity-elite: #60A5FA;
    --rarity-epic: #A78BFA;
    --rarity-legendary: #FBBF24;
    --rarity-mythic: #FF2D55;
    --rarity-special: var(--color-gold);
    --rarity-mythic: #FF2D55;

    /* ── MONEY TIERS — used by net-worth chips, vault breakdowns, leaderboards. */
    --money-poor: #95a5a6;
    /* < $10K */
    --money-middle: #f1c40f;
    /* $10K – $1M */
    --money-rich: #f59e0b;
    /* $1M – $100M */
    --money-whale: var(--color-gold);
    /* $100M+ */

    /* ── MOTION — duration + easing primitives for transitions/animations. */
    --motion-fast: 0.15s;
    --motion-base: 0.25s;
    --motion-slow: 0.5s;
    --motion-press: var(--touch-press-speed);
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out: ease-in-out;

    /* ── THROWABLE COLORS (per-grenade tint) — mirrors DESIGN_TOKENS.throwable ── */
    --throwable-smoke: #3498db;
    --throwable-flash: #f1c40f;
    --throwable-molotov: #e74c3c;
    --throwable-teargas: #2ecc71;
    --throwable-stun: #9b59b6;
    --throwable-emp: #00bcd4;
    --throwable-shrapnel: #e67e22;
    --throwable-stinger: #f39c12;
    --throwable-rust: #795548;

    /* ── THEME BORDER COLORS (profile-theme / border-theme slot) — mirrors DESIGN_TOKENS.themeBorder ── */
    --theme-gold-standard: var(--color-gold);
    --theme-crimson-stain: #e74c3c;
    --theme-phantom-veil: #8B5CF6;
    --theme-shadow-empire: #a855f7;
    --theme-neon-blue: #00d4ff;
    --theme-toxic-waste: #22c55e;
    --theme-molten-core: #ef4444;
    --theme-mythic-sovereign: #f59e0b;
    --theme-ice-crown: #7dd3fc;
    --theme-platinum: #c0c0c0;
}

/* ── Icon spacing — consistent gap for inline icons ── */
.card-header i,
.page-heading__title i,
.hud-stat__label i,
.os-card__header i,
.council-card__header i,
.nav__link i,
.tab-bar__item i,
.council-active-rule i,
.council-history-item__rule i {
    margin-right: 0.375rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

[x-cloak],
[hidden],
.crime-card--hidden {
    display: none !important;
}

.tab-bar {
    margin-bottom: 0.35rem;
}

.tab-bar--secondary {
    margin-top: 0 !important;
    margin-bottom: 0.375rem !important;
}

.path-active__reset-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    line-height: 1 !important;
}

.reset-btn__cost {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    gap: 0.25rem !important;
}

.reset-btn__cost img.sovereign-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

.receipt-slate--desktop-overlay,
.crime-card__inline-result {
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Hide topbar cluster until Alpine.js initializes to prevent header glitch on refresh */
.topbar-cluster {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.topbar-cluster:not([x-cloak]) {
    opacity: 1;
}

html {
    font-size: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

/* ⚠️ GLOBAL BODY BACKGROUND — shared by ALL pages. DO NOT remove or override. */
body {
    min-height: 100vh;
    min-height: 100dvh; /* iOS Safari: dvh tracks dynamic address bar */
    overflow-x: hidden;
    font-family: var(--font-primary);
    background:
        linear-gradient(rgba(10, 8, 6, 0.85), rgba(10, 8, 6, 0.95)),
        url('../assets/images/background-2.webp') center top / cover no-repeat fixed,
        var(--bg-viewport);
    color: var(--text-main);
    font-size: 0.875rem;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

/* Subtle film grain + vignette overlay for mafia atmosphere */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.02;
    background: repeating-conic-gradient(var(--white) 0.0001%, transparent 0.0002%) 50% 50% / 2px 2px;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
}

/* Touch taps must not leave a focus ring; keyboard keeps :focus-visible rings */
:focus:not(:focus-visible) {
    outline: none;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

button {
    font: inherit;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    transition: transform var(--touch-press-speed) ease, filter var(--touch-press-speed) ease;
}

select {
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================
   Global Button System — Reusable .btn classes
   Use: <button class="btn btn--primary btn--sm">
   Every page can reference these for consistent button styling.
   No per-page button classes needed for standard actions.
   ========================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    border-radius: var(--radius-sharp);
    font-family: var(--font-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition:
        opacity 0.15s,
        transform var(--touch-press-speed) ease,
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {

.btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}
}

.btn:active {
    transform: scale(var(--touch-press-scale));
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Secondary (explicit neutral, same as base) ── */
.btn--secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

@media (hover: hover) and (pointer: fine) {

.btn--secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}
}

/* ── Primary — Gold (main CTA, confirm, upgrade, save) ── */
.btn--primary {
    background: rgba(var(--color-gold-rgb), 0.2);
    border-color: rgba(var(--color-gold-rgb), 0.4);
    color: var(--color-gold);
    font-weight: 700;
    letter-spacing: 0.04em;
}

@media (hover: hover) and (pointer: fine) {

.btn--primary:hover:not(:disabled) {
    background: rgba(var(--color-gold-rgb), 0.3);
    border-color: rgba(var(--color-gold-rgb), 0.55);
    color: var(--color-gold);
}
}

/* ── Success — Green (buy, equip, use, deposit) ── */
.btn--success {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.4);
}

@media (hover: hover) and (pointer: fine) {

.btn--success:hover:not(:disabled) {
    background: rgba(46, 204, 113, 0.3);
    border-color: rgba(46, 204, 113, 0.55);
    color: #2ecc71;
}
}

.btn--success:disabled {
    background: rgba(46, 204, 113, 0.25) !important;
    border-color: rgba(46, 204, 113, 0.4) !important;
    color: #2ecc71 !important;
}

.mission__footer .btn--success {
    background: rgba(46, 204, 113, 0.3) !important;
    border-color: rgba(46, 204, 113, 0.5) !important;
    color: #2ecc71 !important;
}

/* ── Danger — Red (sell, attack, delete, unequip) ── */
.btn--danger {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.4);
}

@media (hover: hover) and (pointer: fine) {

.btn--danger:hover:not(:disabled) {
    background: rgba(231, 76, 60, 0.3);
    border-color: rgba(231, 76, 60, 0.55);
    color: #e74c3c;
}
}

/* ── Warning — Orange/Amber (withdraw, caution) ── */
.btn--warning {
    background: rgba(196, 136, 60, 0.1);
    color: var(--color-amber);
    border-color: rgba(196, 136, 60, 0.25);
}

@media (hover: hover) and (pointer: fine) {

.btn--warning:hover:not(:disabled) {
    background: rgba(196, 136, 60, 0.18);
    border-color: rgba(196, 136, 60, 0.4);
    color: var(--color-amber);
}
}

/* ── Info — Blue (friend list, links, info actions) ── */
.btn--info {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
    border-color: rgba(52, 152, 219, 0.25);
}

@media (hover: hover) and (pointer: fine) {

.btn--info:hover:not(:disabled) {
    background: rgba(52, 152, 219, 0.18);
    border-color: rgba(52, 152, 219, 0.4);
    color: #3498db;
}
}

/* ── Ghost — Transparent minimal (tertiary, toolbar) ── */
.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-tertiary);
}

@media (hover: hover) and (pointer: fine) {

.btn--ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}
}

/* ── Sizes ── */
.btn--sm {
    padding: 0.25rem 0.375rem;
    font-size: 0.5625rem;
}

.btn--lg {
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
}

/* ── Block (full width) ── */
.btn--block {
    display: flex;
    width: 100%;
}

/* ── Icon-only square button ── */
.btn--icon {
    padding: 0.5rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
}

.btn--icon.btn--sm {
    padding: 0.3125rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
}

/* ==========================================================
   Global Input / Select / Textarea — Unified Hits-Reference Design
   Every text-like input, select, and textarea across ALL pages
   inherits these styles automatically. No per-page classes needed.
   ========================================================== */

/* ── Number spinner buttons — hidden everywhere ── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ── Scrollbars hidden on all input-like elements ── */
input::-webkit-scrollbar,
select::-webkit-scrollbar,
textarea::-webkit-scrollbar {
    display: none;
}

input,
select,
textarea {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* ── Input & textarea base ── */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"])),
textarea {
    padding: 0.4375rem 0.625rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(196, 136, 60, 0.12);
    border-radius: 0.375rem;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

input:where(:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"])):focus,
textarea:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.1), inset 0 0 8px rgba(var(--color-gold-rgb), 0.04);
}

input:where(:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]))::placeholder,
textarea::placeholder {
    color: var(--text-dim);
    font-size: 0.6875rem;
}

/* ── Checkbox base ── */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border-radius: 0.1875rem;
    border: 1px solid rgba(var(--color-gold-rgb), 0.25);
    background: rgba(20, 18, 14, 0.9);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
    vertical-align: middle;
    margin: 0;
}

@media (hover: hover) and (pointer: fine) {

input[type="checkbox"]:hover {
    border-color: rgba(var(--color-gold-rgb), 0.45);
    background: rgba(30, 24, 18, 0.95);
}
}

input[type="checkbox"]:checked {
    background: rgba(var(--color-gold-rgb), 0.15);
    border-color: var(--color-gold);
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.5L4 8L8.5 2' stroke='%23d4af37' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}

input[type="checkbox"]:focus-visible {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 2px rgba(var(--color-gold-rgb), 0.15);
}

/* ── Textarea specific ── */
textarea {
    resize: vertical;
    min-height: 4.375rem;
}

/* ── Select ── */
select {
    padding: 0.4375rem 1.75rem 0.4375rem 0.625rem;
    background:
        linear-gradient(180deg, rgba(40, 32, 24, 0.85) 0%, rgba(20, 16, 12, 0.92) 100%);
    border: 1px solid rgba(196, 136, 60, 0.15);
    border-radius: 0.375rem;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    cursor: pointer;
    min-height: 1.9375rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    min-width: 6.25rem;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(196,136,60,0.7)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {

select:hover {
    border-color: rgba(196, 136, 60, 0.35);
    background:
        linear-gradient(180deg, rgba(50, 40, 30, 0.9) 0%, rgba(26, 20, 16, 0.95) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.25);
}
}

select:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 14px rgba(var(--color-gold-rgb), 0.15);
    background:
        linear-gradient(180deg, rgba(50, 38, 22, 0.92) 0%, rgba(24, 18, 12, 0.96) 100%);
}

select option {
    background: #1a1613;
    color: var(--text-primary);
}

/* Touch: no native flash · press scale/dim on interactive targets (edit --touch-press-* in :root) */
:is(a.nav__link,
    .bottom-nav__item,
    button,
    details.card,
    details.card > summary,
    .card__action,
    .card__select,
    .hero__tribute,
    .chat-bar,
    .wallet-chip,
    .hud-stat,
    .mission) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}


:is(a.nav__link,
    .bottom-nav__item,
    button,
    details.card > summary,
    .card__action,
    .card__select,
    .hero__tribute,
    .chat-bar,
    .wallet-chip,
    .hud-stat,
    .mission):active {
    transform: scale(var(--touch-press-scale));
    filter: brightness(var(--touch-press-brightness));
}

/* Embedded / absolute-centered input action buttons: preserve translateY(-50%) on press */
:is(.bk-input-max-btn,
    .bk-input-half-btn,
    .cartel-bank-max-btn,
    .qa-input-action,
    .notif-search-clear):active {
    transform: translateY(-50%) scale(var(--touch-press-scale, 0.95)) !important;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    :is(a.nav__link,
        .bottom-nav__item,
        button,
        details.card > summary,
        .card__action,
        .card__select,
        .hero__tribute,
        .chat-bar,
        .wallet-chip,
        .hud-stat,
        .mission):active {
        transform: none;
        filter: none;
        opacity: 0.9;
    }

    .status-dot {
        animation: none;
    }

    .status-banner__icon {
        animation: none !important;
    }

    .status-banner__action {
        transform: none !important;
    }

    .stat-track__fill {
        transition: none !important;
    }

    .topbar-cluster .wallet-chip i,
    .topbar-cluster .wallet-chip .wallet-chip__icon,
    .topbar-cluster .hud-stat__icon i {
        filter: drop-shadow(0 0 4px currentColor);
        animation: none;
    }
}

/* ==========================================================
   Layout shell — mobile single column, sidebar hidden
   ========================================================== */
.app {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    /* Smooths the desktop switch when .app becomes a 2-column grid at 1024px */
    transition: grid-template-columns 0.3s ease;
}

footer {
    /* Remove footer from the grid layout so its fixed-position children behave correctly */
    display: contents;
}

/* Edit .sidebar rules (and --bg-panel / --color-gold in :root) to change Sidebar theme colors */
.sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    /* 300px matches desktop grid column; 88vw prevents drawer overflow on narrow phones */
    width: min(18.75rem, 88vw);
    height: 100vh;
    height: 100dvh;
    /* dvh: drawer height tracks mobile browser chrome */
    background: var(--bg-panel);
    border-right: 1px solid var(--border-color);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.55);
    contain: layout style paint;
}

.sidebar--open {
    transform: translateX(0);
}

.sidebar__header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-panel);
    padding-bottom: 0.375rem;
}

.sidebar__actions {
    display: flex;
    gap: 0.625rem;
    padding: 0 1.125rem;
    margin-top: 0.5rem;
}

.sidebar__icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.65);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

@media (hover: hover) and (pointer: fine) {

.sidebar__icon-btn:hover {
    color: #ffd866;
    background: rgba(var(--color-gold-rgb), 0.15);
    border-color: rgba(var(--color-gold-rgb), 0.4);
    box-shadow: 0 0 20px rgba(var(--color-gold-rgb), 0.12);
}
}

.sidebar__icon-btn--notif {
    border-color: rgba(var(--color-gold-rgb), 0.25);
    background: rgba(var(--color-gold-rgb), 0.1);
    color: var(--color-gold);
}

@media (hover: hover) and (pointer: fine) {

.sidebar__icon-btn--notif:hover {
    color: #ffd866;
    background: rgba(var(--color-gold-rgb), 0.2);
    border-color: rgba(var(--color-gold-rgb), 0.55);
    box-shadow: 0 0 24px rgba(var(--color-gold-rgb), 0.2);
}
}

.sidebar__badge {
    position: absolute;
    top: -0.125rem;
    right: -0.25rem;
    min-width: 0.9375rem;
    height: 0.9375rem;
    padding: 0 0.25rem;
    border-radius: 0.46875rem;
    background: transparent;
    font-size: 0.4375rem;
    font-weight: 800;
    line-height: 0.9375rem;
    text-align: center;
    color: #fff;
    pointer-events: none;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.sidebar__badge--active {
    background: var(--color-crimson-bright);
    box-shadow: 0 0 8px var(--color-crimson-bright);
    transform: scale(1.15);
}

/* ── Notifications slide-in panel ── */
.notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.notif-backdrop--visible {
    opacity: 1;
    pointer-events: auto;
}


.notif-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 91;
    width: 21.25rem;
    max-width: 92vw;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-panel);
    border-left: 1px solid rgba(var(--color-gold-rgb), 0.15);
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.6), inset 1px 0 0 rgba(var(--color-gold-rgb), 0.03);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    contain: layout style paint;
}

.notif-panel--open {
    transform: translateX(0);
}

.notif-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.12);
    flex-shrink: 0;
    gap: 0.5rem;
}

.notif-panel__title {
    display: none;
    font-family: var(--font-serif);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--color-gold);
    flex-shrink: 0;
}

.notif-panel__mark {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    color: var(--color-gold);
    background: rgba(var(--color-gold-rgb), 0.18);
    border: 1px solid rgba(var(--color-gold-rgb), 0.4);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-family: var(--font-serif);
    transition: opacity 0.2s, transform 0.2s;
    font-weight: 700;
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.08);
    white-space: nowrap;
}

.notif-panel__actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    margin-left: auto;
}

.notif-panel__close {
    font-size: 1rem;
    color: rgba(239, 83, 80, 0.8);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.125rem 0.375rem;
    line-height: 1;
    transition: color 0.15s;
}

@media (hover: hover) and (pointer: fine) {

.notif-panel__close:hover {
    color: #ef4444;
}
}

@media (hover: hover) and (pointer: fine) {

.notif-panel__mark:hover {
    color: var(--white);
    background: rgba(196, 136, 60, 0.25);
    border-color: var(--color-amber);
    box-shadow: 0 0 14px rgba(196, 136, 60, 0.2);
}
}

.notif-panel__clear {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    color: #ef5350;
    background: rgba(239, 83, 80, 0.1);
    border: 1px solid rgba(239, 83, 80, 0.3);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-family: var(--font-serif);
    transition: opacity 0.2s, transform 0.2s;
    font-weight: 700;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {

.notif-panel__clear:hover {
    color: var(--white);
    background: rgba(239, 83, 80, 0.25);
    border-color: #ef5350;
    box-shadow: 0 0 14px rgba(239, 83, 80, 0.2);
}
}

.notif-panel__body {
    overflow-y: auto;
    flex: 1;
}

.notif-panel__empty {
    padding: 3rem 1rem;
    text-align: center;
    font-size: 0.6875rem;
    color: rgba(var(--color-gold-rgb), 0.25);
    letter-spacing: 0.04em;
    font-family: var(--font-serif);
}

/* Hide notification panel on mobile — use bottom nav badge instead */
@media (max-width: 479.98px) {
    .notif-panel,
    .notif-backdrop {
        display: none !important;
    }
}


/* ── Notification Item ── */
.sidebar__notif-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.05);
}

.sidebar__notif-item:last-child {
    border-bottom: none;
}

.sidebar__notif-item--unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 0.1875rem;
    border-radius: 0 0.125rem 0.125rem 0;
    background: var(--color-gold);
    z-index: 2;
}

.sidebar__notif-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: var(--bg-panel);
    transition: background 0.15s ease, transform 0.25s ease;
}

.sidebar__notif-item--unread .sidebar__notif-content {
    background-color: var(--bg-panel);
    background-image: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.04), rgba(var(--color-gold-rgb), 0.04));
}

@media (hover: hover) and (pointer: fine) {

.sidebar__notif-item:hover .sidebar__notif-content {
    background-color: var(--bg-panel);
    background-image: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.04), rgba(var(--color-gold-rgb), 0.04));
}
}

@media (hover: hover) and (pointer: fine) {

.sidebar__notif-item--unread:hover .sidebar__notif-content {
    background-color: var(--bg-panel);
    background-image: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.06), rgba(var(--color-gold-rgb), 0.06));
}
}

/* ── Notification Swipe Actions ── */
.sidebar__notif-action {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5rem;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 0;
}

.sidebar__notif-item--swiping .sidebar__notif-action {
    display: flex;
}

.sidebar__notif-action--delete {
    left: 0;
    background: #c62828;
    color: #fff;
}

.sidebar__notif-action--read {
    right: 0;
    background: #b8860b;
    color: #fff;
}

.sidebar__notif-item--swiping .sidebar__notif-content {
    transition: none;
}

/* ── Icon ── */
.sidebar__notif-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8125rem;
    color: rgba(var(--color-gold-rgb), 0.5);
    background: rgba(var(--color-gold-rgb), 0.06);
    border: 1px solid rgba(var(--color-gold-rgb), 0.08);
    margin-top: 1px;
    overflow: hidden;
}

.sidebar__notif-item--unread .sidebar__notif-icon {
    color: var(--color-gold);
    background: rgba(var(--color-gold-rgb), 0.1);
}

/* ── Notification type colors: icon ── */
.sidebar__notif-item--milestone .sidebar__notif-icon {
    color: var(--color-gold);
    background: rgba(var(--color-gold-rgb), 0.1);
    border-color: rgba(var(--color-gold-rgb), 0.15);
}

.sidebar__notif-item--milestone.sidebar__notif-item--unread .sidebar__notif-icon {
    color: #ffd866;
    background: rgba(var(--color-gold-rgb), 0.15);
}

.sidebar__notif-item--jail .sidebar__notif-icon {
    color: var(--color-danger-bright);
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.12);
}

.sidebar__notif-item--jail.sidebar__notif-item--unread .sidebar__notif-icon {
    color: #ff6b81;
    background: rgba(233, 69, 96, 0.12);
}

.sidebar__notif-item--heist .sidebar__notif-icon {
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.08);
    border-color: rgba(255, 107, 53, 0.12);
}

.sidebar__notif-item--heist.sidebar__notif-item--unread .sidebar__notif-icon {
    color: #ff8c5a;
    background: rgba(255, 107, 53, 0.12);
}

.sidebar__notif-item--exchange .sidebar__notif-icon {
    color: #4fc3f7;
    background: rgba(79, 195, 247, 0.08);
    border-color: rgba(79, 195, 247, 0.12);
}

.sidebar__notif-item--exchange.sidebar__notif-item--unread .sidebar__notif-icon {
    color: #81d4fa;
    background: rgba(79, 195, 247, 0.12);
}

.sidebar__notif-item--investment .sidebar__notif-icon {
    color: #66bb6a;
    background: rgba(102, 187, 106, 0.08);
    border-color: rgba(102, 187, 106, 0.12);
}

.sidebar__notif-item--investment.sidebar__notif-item--unread .sidebar__notif-icon {
    color: var(--color-green-soft);
    background: rgba(102, 187, 106, 0.12);
}

.sidebar__notif-item--launder .sidebar__notif-icon {
    color: #ab47bc;
    background: rgba(171, 71, 188, 0.08);
    border-color: rgba(171, 71, 188, 0.12);
}

.sidebar__notif-item--launder.sidebar__notif-item--unread .sidebar__notif-icon {
    color: #ce93d8;
    background: rgba(171, 71, 188, 0.12);
}

.sidebar__notif-item--academy .sidebar__notif-icon {
    color: #26c6da;
    background: rgba(38, 198, 218, 0.08);
    border-color: rgba(38, 198, 218, 0.12);
}

.sidebar__notif-item--academy.sidebar__notif-item--unread .sidebar__notif-icon {
    color: #4dd0e1;
    background: rgba(38, 198, 218, 0.12);
}

.sidebar__notif-item--fight .sidebar__notif-icon,
.sidebar__notif-item--crime .sidebar__notif-icon {
    color: #ef5350;
    background: rgba(239, 83, 80, 0.08);
    border-color: rgba(239, 83, 80, 0.12);
}

.sidebar__notif-item--fight.sidebar__notif-item--unread .sidebar__notif-icon,
.sidebar__notif-item--crime.sidebar__notif-item--unread .sidebar__notif-icon {
    color: #ff8a80;
    background: rgba(239, 83, 80, 0.12);
}

.sidebar__notif-item--market .sidebar__notif-icon {
    color: #ffc107;
    background: rgba(255, 193, 7, 0.08);
    border-color: rgba(255, 193, 7, 0.12);
}

.sidebar__notif-item--market.sidebar__notif-item--unread .sidebar__notif-icon {
    color: #ffd54f;
    background: rgba(255, 193, 7, 0.12);
}

.sidebar__notif-item--title .sidebar__notif-icon {
    color: #20c997;
    background: rgba(32, 201, 151, 0.08);
    border-color: rgba(32, 201, 151, 0.12);
}

.sidebar__notif-item--title.sidebar__notif-item--unread .sidebar__notif-icon {
    color: #63e6be;
    background: rgba(32, 201, 151, 0.12);
}

/* ── Notification type colors: title text ── */
.sidebar__notif-item--jail .sidebar__notif-title {
    color: var(--color-danger-bright);
    text-shadow: 0 0 6px rgba(233, 69, 96, 0.15);
}

.sidebar__notif-item--heist .sidebar__notif-title {
    color: #ff6b35;
    text-shadow: 0 0 6px rgba(255, 107, 53, 0.15);
}

.sidebar__notif-item--exchange .sidebar__notif-title {
    color: #4fc3f7;
    text-shadow: 0 0 6px rgba(79, 195, 247, 0.15);
}

.sidebar__notif-item--investment .sidebar__notif-title {
    color: #66bb6a;
    text-shadow: 0 0 6px rgba(102, 187, 106, 0.15);
}

.sidebar__notif-item--launder .sidebar__notif-title {
    color: #ab47bc;
    text-shadow: 0 0 6px rgba(171, 71, 188, 0.15);
}

.sidebar__notif-item--academy .sidebar__notif-title {
    color: #26c6da;
    text-shadow: 0 0 6px rgba(38, 198, 218, 0.15);
}

.sidebar__notif-item--fight .sidebar__notif-title,
.sidebar__notif-item--crime .sidebar__notif-title {
    color: #ef5350;
    text-shadow: 0 0 6px rgba(239, 83, 80, 0.15);
}

.sidebar__notif-item--market .sidebar__notif-title {
    color: #ffc107;
    text-shadow: 0 0 6px rgba(255, 193, 7, 0.15);
}

.sidebar__notif-item--title .sidebar__notif-title {
    color: #20c997;
    text-shadow: 0 0 6px rgba(32, 201, 151, 0.15);
}

/* ── Notification type colors: unread bar ── */
.sidebar__notif-item--jail.sidebar__notif-item--unread::before {
    background: var(--color-danger-bright);
}

.sidebar__notif-item--heist.sidebar__notif-item--unread::before {
    background: #ff6b35;
}

.sidebar__notif-item--exchange.sidebar__notif-item--unread::before {
    background: #4fc3f7;
}

.sidebar__notif-item--investment.sidebar__notif-item--unread::before {
    background: #66bb6a;
}

.sidebar__notif-item--launder.sidebar__notif-item--unread::before {
    background: #ab47bc;
}

.sidebar__notif-item--academy.sidebar__notif-item--unread::before {
    background: #26c6da;
}

.sidebar__notif-item--fight.sidebar__notif-item--unread::before,
.sidebar__notif-item--crime.sidebar__notif-item--unread::before {
    background: #ef5350;
}

.sidebar__notif-item--market.sidebar__notif-item--unread::before {
    background: #ffc107;
}

.sidebar__notif-item--title.sidebar__notif-item--unread::before {
    background: #20c997;
}

.sidebar__notif-item--transfer .sidebar__notif-icon {
    color: #20c997;
    background: rgba(32, 201, 151, 0.08);
    border-color: rgba(32, 201, 151, 0.12);
}

.sidebar__notif-item--transfer.sidebar__notif-item--unread .sidebar__notif-icon {
    color: #63e6be;
    background: rgba(32, 201, 151, 0.12);
}

.sidebar__notif-item--transfer .sidebar__notif-title {
    color: #20c997;
    text-shadow: 0 0 6px rgba(32, 201, 151, 0.15);
}

.sidebar__notif-item--transfer.sidebar__notif-item--unread::before {
    background: #20c997;
}

.sidebar__notif-item--cartel_heist_outcome .sidebar__notif-icon {
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.08);
    border-color: rgba(255, 107, 53, 0.12);
}

.sidebar__notif-item--cartel_heist_outcome.sidebar__notif-item--unread .sidebar__notif-icon {
    color: #ff8c5a;
    background: rgba(255, 107, 53, 0.12);
}

.sidebar__notif-item--cartel_heist_outcome .sidebar__notif-title {
    color: #ff6b35;
    text-shadow: 0 0 6px rgba(255, 107, 53, 0.15);
}

.sidebar__notif-item--cartel_heist_outcome.sidebar__notif-item--unread::before {
    background: #ff6b35;
}

/* ── Fight win: green override ── */
.sidebar__notif-item--fight-win .sidebar__notif-title {
    color: #66bb6a;
    text-shadow: 0 0 6px rgba(102, 187, 106, 0.15);
}

.sidebar__notif-item--fight-win .sidebar__notif-icon {
    color: #66bb6a;
    background: rgba(102, 187, 106, 0.08);
    border-color: rgba(102, 187, 106, 0.12);
}

.sidebar__notif-item--fight-win.sidebar__notif-item--unread .sidebar__notif-icon {
    color: #81c784;
    background: rgba(102, 187, 106, 0.12);
}

.sidebar__notif-item--fight-win.sidebar__notif-item--unread::before {
    background: #66bb6a;
}

/* ── Body ── */
.sidebar__notif-body {
    flex: 1;
    min-width: 0;
}

.sidebar__notif-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-amber);
    margin-bottom: 0.125rem;
    line-height: 1.3;
    text-shadow: 0 0 6px rgba(196, 136, 60, 0.15);
}

.sidebar__notif-msg {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar__notif-item--expanded .sidebar__notif-msg {
    -webkit-line-clamp: unset;
    display: block;
    color: var(--text-primary);
}

.notif-msg--money {
    color: #6bb377;
    font-weight: 600;
}

/* Dirty cash — vivid crimson red */
.notif-msg--money-dirty {
    color: #e74c3c;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(231, 76, 60, 0.3);
}

.notif-msg--attack {
    color: #d47a70;
    font-weight: 600;
}

/* XP values — bright electric cyan/blue */
.notif-msg--xp {
    color: #38bdf8;
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
}

.notif-msg--sovereigns {
    color: var(--color-gold, #c9a227);
    font-weight: 600;
}

.notif-msg--pct {
    color: var(--color-gold, #c9a227);
    font-weight: 600;
}

.notif-msg--rank {
    color: var(--color-gold, #c9a227);
    font-weight: 600;
}

.notif-msg--item {
    color: #ede6d6;
    font-weight: 600;
}

/* ── Time ── */
.sidebar__notif-time {
    font-size: 0.6875rem;
    color: var(--color-amber);
    flex-shrink: 0;
    margin-top: 0.125rem;
    font-family: var(--font-mono);
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(196, 136, 60, 0.25);
}

@media (hover: hover) and (pointer: fine) {

.sidebar__notif-time:hover {
    color: var(--color-gold);
}
}

/* PC-only notification UX — fade the timestamp out when the user
 * hovers the row, so the title + body don't compete with "5m ago" for
 * attention. Touch devices have no hover, so scoping the rule with
 * @media (hover: hover) keeps the timestamp visible on phones/tablets.
 * One selector pair covers BOTH surfaces: notifications.html (page)
 * and the sidebar notif-panel reuse the same .sidebar__notif-item /
 * .sidebar__notif-time class names, so the rule fans out without
 * needing a page-specific variant. */
.sidebar__notif-time { transition: opacity .15s ease; }
@media (hover: hover) and (pointer: fine) {
    .sidebar__notif-item:hover .sidebar__notif-time { opacity: 0; }
}

.sidebar__notif-absolute {
    font-size: 0.625rem;
    color: rgba(var(--color-gold-rgb), 0.7);
    font-weight: 600;
    display: block;
    letter-spacing: 0.04em;
}

.sidebar__close {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-tertiary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.sidebar__close:active {
    color: var(--color-gold);
    border-color: rgba(var(--color-gold-rgb), 0.3);
    background: rgba(var(--color-gold-rgb), 0.08);
    box-shadow: 0 0 12px rgba(var(--color-gold-rgb), 0.1);
}

/* ── Traveling full-screen override ── */
body.traveling .app {
    grid-template-columns: 1fr;
}

body.traveling .sidebar,
body.traveling .sidebar-backdrop {
    display: none;
}

body.traveling .topbar-cluster .hud-stat,
body.traveling .topbar__wallet,
body.traveling .wallet-chip {
    pointer-events: none;
}

body.traveling .wallet-chip--cash,
body.traveling .wallet-chip--dirty {
    cursor: default;
}

/* Dim overlay while drawer is open; z-index 40 sits below sidebar (50) but above page content */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.88);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.sidebar-backdrop--visible {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile drawer — brand + nav (desktop reuses with layout tweaks) */
.sidebar .brand {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.5rem 1.125rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.sidebar .brand__mark {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 0.1em;
    line-height: 1;
    font-family: var(--font-serif);
}

.sidebar .brand__name {
    font-size: 0.5rem;
    color: var(--text-muted);
    letter-spacing: 0.28em;
    font-weight: 600;
    width: 100%;
}

.sidebar .brand__time {
    display: flex;
    align-items: center;
    margin-left: auto;
    font-size: 0.8125rem;
    font-family: var(--font-mono);
    color: var(--color-gold);
    letter-spacing: 0.05em;
    font-weight: 700;
    border: 1px solid var(--color-gold-dim);
    border-radius: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: rgba(var(--color-gold-rgb), 0.08);
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.3), inset 0 0 8px rgba(var(--color-gold-rgb), 0.08);
}

.sidebar__time {
    text-align: center;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--color-gold);
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.08);
    background: rgba(var(--color-gold-rgb), 0.04);
}

.sidebar .brand {
    position: relative;
}

.brand__actions {
    position: absolute;
    top: 0.75rem;
    right: 0.5rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.brand__notif-btn,
.brand__discord-btn,
.brand__settings-btn {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 0.95rem;
    text-decoration: none;
}

.brand__settings-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
}

.brand__discord-btn {
    border-color: rgba(88, 101, 242, 0.35);
    background: rgba(88, 101, 242, 0.1);
    color: #5865F2;
}

@media (hover: hover) and (pointer: fine) {

.brand__discord-btn:hover {
    color: #fff;
    background: #5865F2;
    border-color: #5865F2;
    box-shadow: 0 0 16px rgba(88, 101, 242, 0.4);
}

.brand__settings-btn:hover {
    color: #ffd866;
    background: rgba(var(--color-gold-rgb), 0.15);
    border-color: rgba(var(--color-gold-rgb), 0.4);
    box-shadow: 0 0 16px rgba(var(--color-gold-rgb), 0.15);
}
}

.sidebar .nav {
    padding: 0.625rem 0 1.5rem;
    flex: 1;
}

.sidebar .nav__section {
    padding: 1rem 1.125rem 0.375rem;
    margin-top: 0.625rem;
    border-top: 1px solid var(--border-color-soft);
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--font-sans);
    color: var(--text-tertiary);
}

.sidebar .nav__list {
    display: flex;
    flex-direction: column;
}

.sidebar .nav__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6875rem 1.125rem;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    border-left: 2px solid transparent;
    transition:
        color 0.12s ease,
        border-color 0.12s ease,
        background 0.12s ease,
        transform var(--touch-press-speed) ease,
        filter var(--touch-press-speed) ease;
}

.sidebar .nav__link i {
    width: 1rem;
    text-align: center;
    font-size: 0.8125rem;
}

.sidebar .nav__icon-img {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {

.sidebar .nav__link:hover {
    border-left-color: var(--color-gold);
    background: var(--color-gold-soft);
}
}

.sidebar .nav__link--active {
    color: var(--color-gold);
    border-left-color: var(--color-gold);
    background: var(--color-gold-soft);
    box-shadow: 0 0 12px rgba(var(--color-gold-rgb), 0.2);
}

.sidebar .nav__link--highlight {
    color: var(--color-gold);
    background: rgba(var(--color-gold-rgb), 0.12);
    border-left-color: var(--color-gold);
    font-weight: 700;
    box-shadow: 0 0 12px rgba(var(--color-gold-rgb), 0.2);
}

.sidebar .nav__link--highlight i {
    color: var(--color-gold);
}

.sidebar .nav__link--logout {
    color: var(--color-crimson-bright);
}

.sidebar .nav__link--logout i {
    color: var(--color-crimson-bright);
}

@media (hover: hover) and (pointer: fine) {

.sidebar .nav__link--logout:hover {
    color: #d44545;
    border-left-color: var(--color-crimson);
    background: rgba(160, 32, 32, 0.08);
}
}

.sidebar .nav__link[data-page="jail"] i,
.bottom-nav__item[data-page="jail"] i,
.bottom-nav__item[data-page="jail"] svg {
    color: var(--color-danger-bright);
}

.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

#page-content {
    display: block;
    width: 100%;
    max-width: none;
    /* Smooth page transition: fade out during nav, fade in once CSS+HTML ready */
    transition: opacity 0.15s ease;
}
/* Applied by JS navigate() before content swap; removed after applyContentSwap() */
#page-content.is-transitioning {
    opacity: 0;
    pointer-events: none;
}

/* ── Unified page container padding ── */
.page-container {
    padding: 0.5rem 0.5rem 0.5rem;
    box-sizing: border-box;
}

/* ==========================================================
   Top Bar — mobile: meta row + scrollable HUD · desktop: unified command strip

   HTML splits .topbar and .topbar__hud as siblings inside .topbar-cluster so mobile
   can pin identity/wallet while vitals scroll. Desktop reunites them at ≥900px.
   ========================================================== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    /* Below sidebar (50) and bottom nav (35 on mobile — see mobile block) */
    background: rgb(14, 13, 11);
    border-bottom: 1px solid var(--color-gold-dim);
    box-shadow: var(--glass-shadow), 0 1px 0 rgba(var(--color-gold-rgb), 0.35);
}

.topbar__shell {
    max-width: 100%;
}

.mobile-header-card {
    display: none;
}

/* Vitals wrapper is layout-neutral on desktop so the 4-column HUD grid treats
   four vitals as direct grid children (see display: contents at 900px) */
.topbar__tier--vitals {
    display: contents;
}

/* Primary nav on phone; desktop uses the sidebar instead */
.bottom-nav {
    display: none;
}

.status-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--color-green);
    box-shadow: 0 0 10px var(--color-green);
    flex-shrink: 0;
    animation: status-breathe 2.4s ease-in-out infinite;
}

@keyframes status-breathe {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

.hud-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: var(--space-cell-tight) var(--space-cell);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color-soft);
    border-radius: var(--radius-ui);
    transition: transform var(--touch-press-speed) ease, filter var(--touch-press-speed) ease;
}

.hud-stat--xp {
    border: none;
    position: relative;
    cursor: default;
}

.hud-stat--xp .stat-track {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
}

/* XP bar percentage text + hover tooltip */
.stat-track--xp {
    position: relative;
    height: 0.375rem;
    cursor: default;
    overflow: visible;
}

/* XP percentage — always visible */
.hud-stat__xp-pct {
    display: inline;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin-left: auto;
    text-shadow: 0 0 6px rgba(var(--color-gold-rgb), 0.5), 0 0 16px rgba(var(--color-gold-rgb), 0.3);
}

/* Ensures perfect vertical alignment for icons and labels */
.hud-stat__head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
}

.hud-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    font-size: 0.5rem;
    color: var(--color-gold);
    flex-shrink: 0;
    line-height: 1;
}

.hud-stat__icon i {
    display: block;
    line-height: 1;
}

.hud-stat .stat-track {
    margin-top: 0.375rem;
}

/* Edit these four modifiers (or matching :root vars) to change HUD stat accent colors */
.hud-stat__icon--health {
    color: var(--color-crimson-bright);
}

.hud-stat__icon--energy {
    color: var(--color-energy);
}

.hud-stat__icon--stamina {
    color: var(--color-cash);
}

.hud-stat__icon--nerves {
    color: var(--color-nerves);
}

.hud-stat__label {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    font-weight: 600;
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hud-stat__timer {
    margin-left: auto;
    color: var(--color-gold);
    font-family: var(--font-mono);
    font-size: 0.4375rem;
    font-weight: 500;
    flex-shrink: 0;
}

.hud-stat__timer--full {
    animation: max-glow 2s ease-in-out infinite;
}

.hud-stat[data-stat='energy'] .hud-stat__timer--full {
    color: var(--color-energy);
    text-shadow: 0 0 6px rgba(var(--color-energy-rgb), 0.6);
}

.hud-stat[data-stat='stamina'] .hud-stat__timer--full {
    color: var(--color-cash);
    text-shadow: 0 0 6px rgba(var(--color-cash-rgb), 0.6);
}

.hud-stat[data-stat='nerves'] .hud-stat__timer--full {
    color: var(--color-nerves);
    text-shadow: 0 0 6px rgba(var(--color-nerves-rgb), 0.6);
}

.hud-stat[data-stat='health'] .hud-stat__timer--full {
    color: var(--color-crimson-bright);
    text-shadow: 0 0 6px rgba(var(--color-crimson-rgb), 0.6);
}

@keyframes max-glow {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }
}

.hud-stat__value {
    font-size: 0.625rem;
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    padding-left: 0;
    white-space: nowrap;
}

/* Stat numbers mirror bar colors — links value to gauge at a glance */
.hud-stat__amount,
.mini-hud-stat__value {
    transition: opacity 0.15s ease;
}

.hud-stat--xp .hud-stat__value,
.hud-stat--xp .hud-stat__amount {
    color: var(--color-gold);
}

.hud-stat[data-stat='health'] .hud-stat__value,
.hud-stat[data-stat='health'] .hud-stat__amount {
    color: var(--color-crimson-bright);
}

.hud-stat[data-stat='energy'] .hud-stat__value,
.hud-stat[data-stat='energy'] .hud-stat__amount {
    color: var(--color-energy);
}

.hud-stat[data-stat='nerves'] .hud-stat__value,
.hud-stat[data-stat='nerves'] .hud-stat__amount {
    color: var(--color-nerves);
}

.hud-stat[data-stat='stamina'] .hud-stat__value,
.hud-stat[data-stat='stamina'] .hud-stat__amount {
    color: var(--color-cash);
}

/* ==========================================================
   Glowing Glass — unified resource bars (header, missions, faction)
   Dimensions fixed at 4px height so grid/cell alignment stays intact.
   ========================================================== */
.stat-track {
    position: relative;
    height: 0.25rem;
    width: 100%;
    margin-top: 0.1875rem;
    border-radius: 0.1875rem;
    background: var(--glass-track);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-track-inset);
    overflow: hidden;
}

.stat-track__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: transform 0.35s ease;
    transform-origin: left;
    transform: scaleX(0);
}

/* Metallic sheen on every fill — same treatment in header and dashboard cards */
.stat-track__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-sheen);
    pointer-events: none;
}

.stat-track__fill--gold {
    background: var(--color-gold);
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb), var(--glass-glow-opacity));
}

#xp-bar {
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.4);
}

.stat-track__fill--crimson {
    background: var(--color-crimson-bright);
    box-shadow: 0 0 8px rgba(var(--color-crimson-rgb), var(--glass-glow-opacity));
}

.stat-track__fill--blue {
    background: var(--color-energy);
    box-shadow: 0 0 8px rgba(var(--color-energy-rgb), var(--glass-glow-opacity));
}

.stat-track__fill--violet {
    background: var(--color-nerves);
    box-shadow: 0 0 8px rgba(var(--color-nerves-rgb), var(--glass-glow-opacity));
}

/* Header HUD: let fill glow bleed outside the track */
.topbar-cluster .stat-track {
    overflow: visible;
}

/* ==========================================================
   Player Card (header)
   ========================================================== */
.player-card {
    display: flex;
    align-items: center;
    gap: var(--icon-label-gap);
    min-width: 0;
    flex: 1;
    line-height: 1.2;
}

.player-card__avatar {
    position: relative;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(145deg, var(--bg-elevated), var(--bg-track));
    border: 1px solid var(--color-gold-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-size: 0.875rem;
    border-radius: var(--radius-sharp);
    flex-shrink: 0;
    box-shadow: inset 0 0 12px rgba(var(--color-gold-rgb), 0.08);
}

.player-card__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(var(--color-gold-rgb), 0.4);
}

.player-card__avatar .status-dot {
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    width: 0.375rem;
    height: 0.375rem;
}

.player-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    line-height: 1.2;
    min-width: 0;
}

.player-card__name {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    font-family: var(--font-serif);
    line-height: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
}

.player-card__name-row {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    vertical-align: middle;
}

.player-card__vip-badge,
.player-card__custom-badge {
    display: inline-block !important;
    vertical-align: middle !important;
    height: 1.15rem !important;
    width: 1.15rem !important;
    object-fit: contain !important;
    margin-left: 0.2rem !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
    transition: transform 0.2s ease;
}

.player-card__custom-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 0.65rem;
    color: var(--color-gold);
    vertical-align: middle;
    margin-left: 0.2rem;
}

@media (min-width: 1024px) {
    .player-card__vip-badge:hover,
    .player-card__custom-badge:hover {
        transform: scale(1.2);
    }
}

.chat-msg__custom-badge {
    width: 15px;
    height: 15px;
    object-fit: contain;
    flex: 0 0 auto;
    vertical-align: middle;
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

.chat-msg__custom-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    font-size: 9px;
    color: var(--color-gold);
    vertical-align: middle;
}

@keyframes vip-glow {

    0%,
    100% {
        text-shadow: 0 0 4px rgba(var(--color-gold-rgb), 0.5), 0 0 8px rgba(var(--color-gold-rgb), 0.25);
        box-shadow: 0 0 4px rgba(var(--color-gold-rgb), 0.25), 0 0 10px rgba(var(--color-gold-rgb), 0.12);
    }

    50% {
        text-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.7), 0 0 16px rgba(var(--color-gold-rgb), 0.35);
        box-shadow: 0 0 6px rgba(var(--color-gold-rgb), 0.4), 0 0 14px rgba(var(--color-gold-rgb), 0.2);
    }
}

.topbar .player-card__rank {
    display: none !important;
}

.player-card__rank {
    font-size: 0.625rem;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.35;
}

.player-card__avatar-link {
    display: inline-flex;
    cursor: pointer;
    transition: opacity 0.15s ease;
    text-decoration: none;
    line-height: 0;
    border-radius: 50%;
}

@media (hover: hover) and (pointer: fine) {

.player-card__avatar-link:hover {
    opacity: 0.8;
}
}

.player-card__avatar-link:focus-visible {
    outline: 2px solid var(--color-amber);
    outline-offset: 2px;
    border-radius: var(--radius-ui);
}

/* ==========================================================
   Wallet chips (header)
   ========================================================== */
.wallet-chip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--icon-label-gap);
    min-width: 0;
    padding: var(--space-cell-tight) var(--space-cell);
    background: var(--bg-sub);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ui);
    line-height: 1.1;
    transition: transform var(--touch-press-speed) ease, filter var(--touch-press-speed) ease;
}

.wallet-chip i,
.wallet-chip .wallet-chip__icon {
    font-size: 1rem;
    line-height: 1;
    display: block;
    flex-shrink: 0;
}

.wallet-chip--cash {
    cursor: pointer;
}

.wallet-chip--dirty {
    cursor: pointer;
}

.wallet-chip--cash i {
    color: var(--color-bright-green);
}

.wallet-chip--cash .wallet-chip__value {
    color: var(--color-bright-green);
}

.wallet-chip--credits i,
.wallet-chip--credits .wallet-chip__icon {
    color: var(--color-gold);
    filter: drop-shadow(0 0 3px rgba(var(--color-gold-rgb), 0.6)) drop-shadow(0 0 8px rgba(var(--color-gold-rgb), 0.3));
    border-radius: 50%;
}

.wallet-chip--credits .wallet-chip__value {
    color: var(--color-gold);
}

.wallet-chip--dirty i {
    color: #e64a19;
}

.wallet-chip--dirty .wallet-chip__value {
    color: #e64a19;
}

.wallet-chip__icon {
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}

.wallet-chip--cash .wallet-chip__icon,
.wallet-chip--dirty .wallet-chip__icon {
    width: 1.5rem;
    height: 1.5rem;
    filter: brightness(0.75);
}

.wallet-chip__value {
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--text-primary);
    display: inline-block;
    text-align: left;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.wallet-chip__label {
    font-size: 0.4375rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 600;
}

/* ==========================================================
   Topbar chrome — Glowing Glass skin (layout stays per breakpoint)

   Edit :root --glass-* tokens or this block to re-theme the command console
   on BOTH mobile tiers and desktop without touching grid/flex below.
   ========================================================== */
/* Glass panels — opaque gradient (blur only on header shell — see Performance block) */
.topbar-cluster .wallet-chip,
.topbar-cluster .hud-stat {
    background: var(--glass-surface-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
}

.topbar-cluster .wallet-chip {
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    max-width: 85px;
    gap: 4px;
}

.topbar-cluster .hud-stat {
    border-radius: var(--radius-ui);
}

.topbar-cluster .wallet-chip--cash {
    border-color: var(--glass-border-gold);
}

.topbar-cluster .wallet-chip--credits {
    border-color: rgba(var(--color-gold-rgb), 0.5);
}

.topbar-cluster .wallet-chip--dirty {
    border-color: rgba(230, 74, 25, 0.35);
}

.topbar-cluster .topbar__tier--identity,
.topbar-cluster>.topbar .player-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

.topbar__player-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    width: 100%;
}

.topbar-cluster .player-card__avatar {
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    box-shadow:
        inset 0 0 12px rgba(var(--color-gold-rgb), 0.14),
        0 0 8px rgba(var(--color-gold-rgb), 0.12);
}

.topbar-cluster .player-card__name {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

/* ═══════════════════════════════════════════════════════════════════
   VIP USER STYLING — CENTRAL
   Single source of truth for VIP usernames + avatars across the game.
   Names: add .vip-lite (silver) or .vip-premium (gold) to any name el.
   Avatars: add .avatar--vip-lite or .avatar--vip-premium to any avatar.
   Change colors/glow HERE and it applies everywhere.
   ═══════════════════════════════════════════════════════════════════ */
.vip-lite {
    color: #a0aab8 !important;
    text-shadow: 0 0 4px rgba(160, 170, 184, 0.7), 0 0 10px rgba(160, 170, 184, 0.4), 0 0 18px rgba(160, 170, 184, 0.2) !important;
}

.vip-premium {
    color: #ffd76a !important;
}

.avatar--vip-lite {
    border: 1px solid #a0aab8 !important;
}

.avatar--vip-premium {
    border: 1px solid #ffd76a !important;
}

.topbar-cluster .hud-stat--xp {
    border: none !important;
    box-shadow: none !important;
}

.topbar-cluster .hud-stat--xp .stat-track {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
}

#xp-bar {
    background: var(--color-gold);
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb), var(--glass-glow-opacity));
}

/* Icon glow — static on mobile; subtle pulse on desktop (see Performance block) */
.topbar-cluster .wallet-chip i,
.topbar-cluster .wallet-chip .wallet-chip__icon,
.topbar-cluster .hud-stat__icon i {
    filter: drop-shadow(0 0 4px currentColor);
}

.topbar-cluster .wallet-chip--cash i {
    color: var(--color-bright-green);
}

.topbar-cluster .wallet-chip--cash .wallet-chip__value {
    color: var(--color-bright-green);
}

.topbar-cluster .wallet-chip--credits i,
.topbar-cluster .wallet-chip--credits .wallet-chip__icon {
    color: var(--color-gold);
    filter: drop-shadow(0 0 3px rgba(var(--color-gold-rgb), 0.6)) drop-shadow(0 0 8px rgba(var(--color-gold-rgb), 0.3));
}

.topbar-cluster .wallet-chip--credits .wallet-chip__value {
    color: var(--color-gold);
}

.topbar-cluster .wallet-chip--dirty i {
    color: #e64a19;
}

.topbar-cluster .wallet-chip--dirty .wallet-chip__value {
    color: #e64a19;
}

.topbar-cluster .hud-stat--xp .hud-stat__icon {
    color: var(--color-gold);
    border: 1px solid rgba(var(--color-gold-rgb), 0.35);
    border-radius: var(--radius-ui);
    background: rgba(var(--color-gold-rgb), 0.12);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
}

.topbar-cluster .hud-group--vitals .hud-stat__icon {
    border-radius: var(--radius-ui);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='health'] .hud-stat__icon {
    color: var(--color-crimson-bright);
    border-color: rgba(200, 50, 50, 0.6);
    background: rgba(122, 21, 21, 0.35);
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='energy'] .hud-stat__icon {
    color: var(--color-energy);
    border-color: rgba(52, 152, 219, 0.45);
    background: rgba(52, 152, 219, 0.12);
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='nerves'] .hud-stat__icon {
    color: var(--color-nerves);
    border-color: rgba(155, 89, 182, 0.45);
    background: rgba(155, 89, 182, 0.12);
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='stamina'] .hud-stat__icon {
    color: var(--color-cash);
    border-color: rgba(var(--color-cash-rgb), 0.45);
    background: rgba(var(--color-cash-rgb), 0.12);
}

/* Colored top edge — instant vital identification (matches :root stat tokens) */
.topbar-cluster .hud-group--vitals .hud-stat[data-stat='health'] {
    border-top: 2px solid var(--color-crimson-bright);
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='energy'] {
    border-top: 2px solid var(--color-energy);
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='nerves'] {
    border-top: 2px solid var(--color-nerves);
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='stamina'] {
    border-top: 2px solid var(--color-cash);
}

.topbar-cluster .hud-group--vitals .hud-stat__timer {
    font-size: 0.625rem;
    padding: 1px 0.25rem;
    border-radius: 0.1875rem;
    background: rgba(var(--color-gold-rgb), 0.12);
    border: 1px solid rgba(var(--color-gold-rgb), 0.22);
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='energy'] .hud-stat__timer--full {
    background: rgba(52, 152, 219, 0.2);
    border-color: rgba(52, 152, 219, 0.35);
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='stamina'] .hud-stat__timer--full {
    background: rgba(46, 160, 67, 0.2);
    border-color: rgba(46, 160, 67, 0.35);
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='nerves'] .hud-stat__timer--full {
    background: rgba(155, 89, 182, 0.2);
    border-color: rgba(155, 89, 182, 0.35);
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='health'] .hud-stat__timer--full {
    background: rgba(192, 57, 43, 0.2);
    border-color: rgba(192, 57, 43, 0.35);
}

/* Stagger icon pulse so vitals don't pulse in perfect sync */
.topbar-cluster .hud-group--vitals .hud-stat[data-stat='energy'] .hud-stat__icon i {
    animation-delay: 0.15s;
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='nerves'] .hud-stat__icon i {
    animation-delay: 0.3s;
}

.topbar-cluster .hud-group--vitals .hud-stat[data-stat='stamina'] .hud-stat__icon i {
    animation-delay: 0.45s;
}

.topbar-cluster .hud-stat--xp .hud-stat__icon i {
    animation-duration: 2.8s;
}

/* ==========================================================
   Layout harmony — icon rows (all breakpoints)
   Ensures perfect vertical alignment for icons and labels
   ========================================================== */
.topbar-cluster .player-card,
.topbar-cluster .wallet-chip {
    display: flex;
    align-items: center;
    gap: var(--icon-label-gap);
}

/* ==========================================================
   Compact HUD — body.compact-mode (Settings → Compact HUD)
   Shrinks the topbar strip for more screen space
   ========================================================== */
.compact-mode .topbar {
    padding: 0.25rem 0.75rem;
}

.compact-mode .topbar-cluster .hud-stat {
    padding: 0.1875rem 0.5rem;
    gap: 0.125rem;
}

.compact-mode .topbar-cluster .hud-stat__head {
    gap: 0.25rem;
}

.compact-mode .topbar-cluster .hud-stat__value {
    font-size: 0.6875rem;
    line-height: 1.1;
}

.compact-mode .topbar-cluster .hud-stat__timer {
    display: none;
}

.compact-mode .topbar-cluster .hud-stat .stat-track {
    height: 0.25rem;
}

.compact-mode .topbar-cluster .wallet-chip {
    padding: 0.125rem 0.375rem;
    max-width: 78px;
    gap: 3px;
}

.compact-mode .topbar-cluster .wallet-chip__icon {
    width: 0.875rem;
    height: 0.875rem;
}

.compact-mode .topbar-cluster .wallet-chip__value {
    font-size: 0.6875rem;
}

.compact-mode .topbar-cluster .player-card__avatar {
    width: 1.875rem;
    height: 1.875rem;
    font-size: 0.875rem;
}

.compact-mode .topbar-cluster .player-card__name {
    font-size: 0.75rem;
}

.compact-mode .topbar-cluster .stat-track--xp {
    height: 0.25rem;
}

.compact-mode .topbar-cluster .hud-stat--xp {
    gap: 0.125rem;
}

.compact-mode .topbar-cluster .hud-stat__xp-pct {
    font-size: 0.5625rem;
}

.compact-mode .topbar__mini-hud {
    padding: 0.125rem 0.75rem;
}

.compact-mode .mini-hud-stat {
    gap: 0.125rem;
}

.compact-mode .mini-hud-stat__head {
    font-size: 0.625rem;
    gap: 0.25rem;
}

.compact-mode .mini-hud-stat__track {
    height: 0.1875rem;
}

.compact-mode .mobile-header-card {
    padding: 0.25rem 0.75rem;
}

.compact-mode .mobile-header-card__bot {
    margin-top: 0.1875rem;
}

.compact-mode .mobile-header-card .wallet-chip__icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* ==========================================================
   Mobile header — layout + sizing (< 1024px only)
   Visual chrome lives in "Topbar chrome" above; this block only moves pieces.
   ========================================================== */
@media (max-width: 1023.98px) {

    /* iOS Safari auto-zooms the page when focusing inputs with font-size < 16px.
       Force 16px minimum on mobile to prevent unwanted zoom. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: max(1rem, 16px);
    }

    #page-content {
        /* Clear the second header (vitals mini-HUD / ticker) with a clear gap */
        margin-top: 1rem;
    }

    .crime-card--hidden {
        display: none !important;
    }

    /* Hide sidebar off-screen by default on mobile (shown via .sidebar--open) */
    .sidebar {
        display: none;
    }

    .sidebar--open {
        display: flex;
    }

    .brand__actions,
    .brand__notif-btn,
    .brand__discord-btn {
        display: none;
    }

    /* Tier 1 sticky shell */
    .topbar {
        background: rgb(14, 13, 11);
        border-bottom: 1px solid var(--color-gold-dim);
        box-shadow:
            0 1px 0 rgba(var(--color-gold-rgb), 0.4),
            var(--glass-shadow);
    }

    .topbar__hud {
        background: rgb(14, 13, 11);
        border-bottom: 1px solid var(--glass-border);
    }



    /* Unwraps the cluster so .topbar and .topbar__hud can stick/scroll independently */
    .topbar-cluster {
        display: contents;
    }

    .topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 30;
    }

    .topbar__shell {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    /* Vitals scroll away so the identity / XP / wallet strip stays visible longer */
    .topbar__hud {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    /* Tier 1 — sticky via .topbar; menu lives in bottom nav, not here */
    .topbar__meta {
        display: flex;
        align-items: center;
        padding: 0.1875rem 0 0.25rem;
        width: 100%;
    }

    .topbar__meta {
        display: none !important;
    }

    /* ── Mobile Header Card Redesign ── */
    .mobile-header-card {
        display: flex !important;
        flex-direction: column;
        gap: 0.2rem;
        background: linear-gradient(180deg, #181512 0%, #110e0c 100%);
        border: none !important;
        border-radius: 0.5rem;
        padding: 0.25rem 0.5rem;
        margin: 0.1rem 0.25rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .mobile-header-card__user-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.375rem;
        min-width: 0;
    }

    .mobile-header-card__user-row .player-card__name {
        font-family: var(--font-heading, serif);
        font-weight: 700;
        font-size: 0.9375rem;
        color: var(--text-primary, #fff);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-header-card__user-row .player-card__rank {
        font-size: 0.5rem !important;
        font-weight: 700;
        letter-spacing: 0.04em;
        opacity: 0.85;
    }

    .mobile-header-card__vip {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        padding: 0.1rem 0.45rem;
        border: 1px solid rgba(var(--color-gold-rgb), 0.5);
        border-radius: 0.75rem;
        background: rgba(var(--color-gold-rgb), 0.1);
        color: var(--color-gold, var(--color-gold));
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .mobile-header-card__mid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.4rem;
        width: 100%;
        margin-top: 0.2rem;
        padding-top: 0.15rem;
    }

    .mobile-header-card__info-wrap {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex: 1 1 auto;
        max-width: calc(100% - 4.8rem);
        min-width: 0;
    }

    .mobile-header-card__action-wrap {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.35rem;
        min-width: 0;
    }

    .mobile-header-card__discord-btn,
    .mobile-header-card__settings-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.85rem;
        height: 1.85rem;
        border-radius: 0.375rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(var(--color-gold-rgb), 0.35);
        color: var(--color-gold, #ffd76a);
        font-size: 0.8125rem;
        text-decoration: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
        transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .mobile-header-card__discord-btn {
        border-color: rgba(88, 101, 242, 0.4);
        color: #7983f5;
        background: rgba(88, 101, 242, 0.08);
    }

    .mobile-header-card__discord-btn:active {
        transform: scale(0.92);
        background: rgba(88, 101, 242, 0.22);
        border-color: #5865F2;
        color: #fff;
    }

    .mobile-header-card__settings-btn:active {
        transform: scale(0.92);
        background: rgba(var(--color-gold-rgb), 0.15);
        border-color: var(--color-gold);
    }

    .mobile-header-card__avatar-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 0.15rem;
    }

    .mobile-header-card__lvl-tag {
        position: absolute;
        bottom: -0.35rem;
        left: 50%;
        transform: translateX(-50%);
        background: #110e0c;
        border: 1px solid rgba(var(--color-gold-rgb), 0.7);
        color: var(--color-gold, var(--color-gold));
        font-size: 0.5rem;
        font-weight: 800;
        padding: 0.05rem 0.3rem;
        border-radius: 0.25rem;
        white-space: nowrap;
        z-index: 2;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }

    /* VIP Lite: silver border around the LV tag */
    .mobile-header-card__avatar-wrap:has(.avatar--vip-lite) .mobile-header-card__lvl-tag {
        border-color: #a0aab8 !important;
    }
    /* VIP Premium: gold border around the LV tag */
    .mobile-header-card__avatar-wrap:has(.avatar--vip-premium) .mobile-header-card__lvl-tag {
        border-color: #ffd76a !important;
    }

    .mobile-header-card__avatar {
        width: 1.95rem !important;
        height: 1.95rem !important;
        border-radius: 50% !important;
        border: 1.5px solid rgba(var(--color-gold-rgb), 0.4) !important;
    }

    .mobile-header-card__avatar .status-dot {
        display: none !important;
    }

    .mobile-header-card__progress {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        flex: 1;
        min-width: 0;
    }

    .mobile-header-card__progress-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .mobile-header-card__progress-title {
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--text-dim, #888);
        text-transform: uppercase;
    }

    .mobile-header-card__xp-pct {
        font-size: 0.625rem;
        font-weight: 700;
        color: var(--color-gold, var(--color-gold));
        font-family: var(--font-mono);
    }

    .mobile-header-card__track {
        position: relative;
        height: 0.2rem !important;
        border-radius: 1rem !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.05);
        overflow: hidden !important;
        width: 100%;
    }

    .mobile-header-card__track .stat-track__fill {
        max-width: 100% !important;
        border-radius: 1rem !important;
        transform: none !important;
        transition: width 0.35s ease !important;
    }

    .mobile-header-card__bot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.25rem;
        margin-top: 0.15rem;
        padding-top: 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        width: 80%;
        align-self: flex-end;
        box-sizing: border-box;
    }

    .mobile-header-card__bot .wallet-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        flex: 1;
        padding: 0.2rem 0.35rem !important;
        border-radius: 0.375rem !important;
        background: var(--glass-surface-strong, rgba(18, 14, 12, 0.85)) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        box-sizing: border-box;
        cursor: pointer;
        text-decoration: none;
        transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .mobile-header-card__bot .wallet-item:hover {
        opacity: 0.85;
        transform: translateY(-1px);
    }

    .mobile-header-card__bot .wallet-item--cash {
        border-color: rgba(76, 175, 80, 0.4) !important;
        box-shadow: inset 0 0 10px rgba(76, 175, 80, 0.08), 0 0 8px rgba(76, 175, 80, 0.15) !important;
    }

    .mobile-header-card__bot .wallet-item--dirty {
        border-color: rgba(230, 74, 25, 0.4) !important;
        box-shadow: inset 0 0 10px rgba(230, 74, 25, 0.08), 0 0 8px rgba(230, 74, 25, 0.15) !important;
    }

    .mobile-header-card__bot .wallet-item--credits {
        border-color: rgba(var(--color-gold-rgb), 0.4) !important;
        box-shadow: inset 0 0 10px rgba(var(--color-gold-rgb), 0.08), 0 0 8px rgba(var(--color-gold-rgb), 0.15) !important;
    }
    .wallet-item--cash-link,
    .wallet-item--dirty-link,
    .wallet-item--credits-link {
        cursor: pointer;
        text-decoration: none;
        transition: transform 0.15s ease, opacity 0.15s ease;
    }
    .wallet-item--cash-link:hover,
    .wallet-item--dirty-link:hover,
    .wallet-item--credits-link:hover {
        opacity: 0.85;
        transform: translateY(-1px);
    }

    .mobile-header-card__bot .wallet-chip {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    .mobile-header-card__bot .wallet-chip__value {
        min-width: 0 !important;
        font-size: 0.75rem !important;
    }

    .mobile-header-card__bot .wallet-chip__icon {
        width: 1rem !important;
        height: 1rem !important;
    }

    .mobile-header-card__bot .wallet-item--cash .wallet-chip__icon {
        filter: drop-shadow(0 0 5px rgba(46, 204, 113, 0.6));
    }

    .mobile-header-card__bot .wallet-item--dirty .wallet-chip__icon {
        filter: drop-shadow(0 0 5px rgba(230, 74, 25, 0.6));
    }

    .mobile-header-card__bot .wallet-item--credits .wallet-chip__icon {
        filter: drop-shadow(0 0 5px rgba(var(--color-gold-rgb), 0.6));
    }

    .mobile-header-card__divider {
        display: none !important;
    }

    .wallet-chip__symbol {
        font-weight: 800;
        font-size: 0.8125rem;
    }

    .wallet-item--cash .wallet-chip__symbol,
    .wallet-item--cash .wallet-chip__value {
        color: #2ecc71 !important;
    }

    .wallet-item--dirty .wallet-chip__symbol,
    .wallet-item--dirty .wallet-chip__value {
        color: #e74c3c !important;
    }

    .wallet-item--credits i,
    .wallet-item--credits .wallet-chip__value {
        color: #f1c40f !important;
    }

    .topbar__primary-row .hud-stat--xp {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        padding: 0.125rem 0;
    }

    .topbar__primary-row .hud-stat--xp .hud-stat__head {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .topbar__primary-row .hud-stat--xp .stat-track--xp {
        flex: 1;
    }

    /* Avoid duplicate nav: these routes are mirrored in .bottom-nav */
    .sidebar .nav__link--bottom-bar {
        display: none;
    }

    .main {
        /* 52px = .bottom-nav min-height; safe-area handles iPhone home indicator */
        padding: calc(var(--topbar-height, 5.4rem) + 1.25rem) 0.5rem calc(2.75rem + env(safe-area-inset-bottom, 0));
    }

    .topbar__tier--identity {
        min-width: 0;
        padding: 0.25rem 0.5rem;
    }

    .topbar__identity-row {
        min-width: 0;
    }

    /* Inner card stays flat; .topbar__tier--identity carries the gold frame on mobile */
    .topbar__identity-row .player-card {
        gap: 0.375rem;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .player-card__avatar {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }

    .player-card__avatar .status-dot {
        width: 0.3125rem;
        height: 0.3125rem;
        top: -0.0625rem;
        right: -0.0625rem;
        border: 1.5px solid #0a0a0a;
    }

    .player-card__info {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.375rem;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .player-card__name {
        font-size: 0.875rem;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .player-card__rank {
        font-size: 0.5625rem;
        letter-spacing: 0.08em;
        color: var(--text-tertiary);
        margin-top: 0;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }

    .topbar-cluster .wallet-chip {
        padding: 0.125rem 0.25rem;
        border: 1px solid var(--glass-border);
        border-radius: 0.25rem;
        box-shadow: var(--glass-shadow), var(--glass-highlight);
        background: var(--glass-surface-strong);
        min-width: 0;
        max-width: 85px;
        flex: 1;
    }

    .wallet-group {
        display: contents;
    }

    .wallet-item {
        display: flex;
        align-items: stretch;
        flex: 1;
        min-width: 0;
    }

    .topbar-cluster .wallet-chip--cash {
        border-color: var(--glass-border-gold);
    }

    .topbar-cluster .wallet-chip--credits {
        border-color: rgba(var(--color-gold-rgb), 0.5);
    }

    .wallet-chip i,
    .wallet-chip .wallet-chip__icon {
        font-size: 0.6875rem;
    }

    .wallet-chip__icon {
        width: 0.6875rem;
        height: 0.6875rem;
        vertical-align: middle;
    }

    .wallet-chip__value {
        font-size: 0.5625rem;
    }

    /* Hide cash/crystals label text on mobile */
    .wallet-chip__label {
        display: none;
    }

    /* Server time - inline in sidebar brand */
    .wallet-time {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        color: var(--color-gold);
        border-radius: 0.25rem;
        padding: 0.125rem 0.5rem;
        background: rgba(var(--color-gold-rgb), 0.08);
        box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.3), inset 0 0 8px rgba(var(--color-gold-rgb), 0.08);
    }

    .topbar__mini-hud {
        display: flex;
        flex-direction: row;
        gap: 0.25rem;
        margin-top: 0.5rem;
        margin-bottom: 0.375rem;
        padding: 0.1875rem 0.375rem;
        background: rgb(14, 13, 11);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .mini-hud-stat {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        gap: 0.0625rem;
        padding: 0.125rem 0.25rem 0.0625rem;
        border-radius: 0.25rem;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
        min-width: 0;
        position: relative;
        overflow: visible;
        height: 1.25rem;
        min-height: 1.25rem;
        max-height: 1.25rem;
        box-sizing: border-box;
        transition: opacity 0.2s, transform 0.2s;
    }

    .mini-hud-stat[data-stat="health"] {
        border-color: rgba(192, 57, 43, 0.3);
        background: rgba(192, 57, 43, 0.12);
    }

    .mini-hud-stat[data-stat="energy"] {
        border-color: rgba(52, 152, 219, 0.3);
        background: rgba(52, 152, 219, 0.12);
    }

    .mini-hud-stat[data-stat="nerves"] {
        border-color: rgba(155, 89, 182, 0.3);
        background: rgba(155, 89, 182, 0.12);
    }

    .mini-hud-stat[data-stat="stamina"] {
        border-color: rgba(46, 160, 67, 0.3);
        background: rgba(46, 160, 67, 0.12);
    }

    .mini-hud-stat__head {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        position: relative;
        z-index: 1;
        width: 100%;
        padding: 0;
        height: 0.6875rem;
        min-height: 0.6875rem;
        max-height: 0.6875rem;
        box-sizing: border-box;
    }

    .mini-hud-stat__label {
        display: none;
    }

    .mini-hud-stat__value {
        font-size: 0.5rem;
        font-weight: 700;
        font-family: var(--font-mono);
        color: rgba(255, 255, 255, 0.85);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        flex: 1;
        display: inline-flex;
        align-items: center;
        gap: 0.125rem;
        width: 100%;
        height: 100%;
        line-height: 0.6875rem;
        letter-spacing: 0.02em;
    }

    .mini-hud-stat__value:not([data-is-max="MAX"])::after {
        display: none;
    }

    .mini-hud-stat__value[data-is-max="MAX"]::after {
        content: attr(data-is-max);
        font-size: 0.4375rem;
        letter-spacing: 0.05em;
        color: var(--color-gold);
        font-weight: 700;
        text-shadow: 0 0 4px rgba(var(--color-gold-rgb), 0.4);
        margin-left: auto;
        line-height: 1;
        padding: 0 2px;
        border: 1px solid rgba(var(--color-gold-rgb), 0.3);
        border-radius: 2px;
        box-sizing: border-box;
    }

    .topbar__mini-hud .mini-hud-stat__value {
        color: #fff;
    }

    .mini-hud-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.0625rem;
        align-items: stretch;
        min-width: 0;
    }

    .mini-hud-stat__timer {
        margin-left: auto;
        font-size: 0.4375rem;
        font-family: var(--font-mono);
        font-weight: 600;
        color: rgba(255, 255, 255, 0.3);
        line-height: 0.6875rem;
        height: 0.6875rem;
        letter-spacing: 0.04em;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
    }

    .mini-hud-stat__timer--full {
        font-weight: 700;
    }

    .mini-hud-stat[data-stat='energy'] .mini-hud-stat__timer--full {
        color: var(--color-blue);
        text-shadow: 0 0 4px rgba(52, 152, 219, 0.5);
    }

    .mini-hud-stat[data-stat='stamina'] .mini-hud-stat__timer--full {
        color: var(--color-cash);
        text-shadow: 0 0 4px rgba(46, 160, 67, 0.5);
    }

    .mini-hud-stat[data-stat='nerves'] .mini-hud-stat__timer--full {
        color: #9b59b6;
        text-shadow: 0 0 4px rgba(155, 89, 182, 0.5);
    }

    .mini-hud-stat[data-stat='health'] .mini-hud-stat__timer--full {
        color: var(--color-rust-bright);
        text-shadow: 0 0 4px rgba(192, 57, 43, 0.5);
    }

    .mini-hud-stat__icon {
        font-size: 0.45rem;
        width: 0.625rem;
        text-align: center;
        line-height: 1;
        flex-shrink: 0;
    }

    .mini-hud-stat[data-stat="health"] .mini-hud-stat__icon {
        color: rgba(192, 57, 43, 0.9);
        text-shadow: 0 0 4px rgba(192, 57, 43, 0.4);
    }

    .mini-hud-stat[data-stat="energy"] .mini-hud-stat__icon {
        color: rgba(52, 152, 219, 0.9);
        text-shadow: 0 0 4px rgba(52, 152, 219, 0.4);
    }

    .mini-hud-stat[data-stat="nerves"] .mini-hud-stat__icon {
        color: rgba(155, 89, 182, 0.9);
        text-shadow: 0 0 4px rgba(155, 89, 182, 0.4);
    }

    .mini-hud-stat[data-stat="stamina"] .mini-hud-stat__icon {
        color: rgba(46, 160, 67, 0.9);
        text-shadow: 0 0 4px rgba(46, 160, 67, 0.4);
    }

    .mini-hud-stat__track {
        position: relative;
        width: 100%;
        height: 0.1875rem;
        border-radius: 62.5rem;
        background: rgba(0, 0, 0, 0.5);
        border: none;
        overflow: hidden;
        margin-top: 0;
        flex-shrink: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .mini-hud-stat__fill {
        height: 100%;
        width: 100%;
        border-radius: 62.4375rem;
        transition: transform 0.35s ease;
        transform-origin: left;
    }

    .mini-hud-stat[data-stat="health"] .mini-hud-stat__fill {
        background: rgba(200, 50, 50, 0.75);
    }

    .mini-hud-stat[data-stat="energy"] .mini-hud-stat__fill {
        background: rgba(var(--color-energy-rgb), 0.7);
    }

    .mini-hud-stat[data-stat="nerves"] .mini-hud-stat__fill {
        background: rgba(var(--color-nerves-rgb), 0.7);
    }

    .mini-hud-stat[data-stat="stamina"] .mini-hud-stat__fill {
        background: rgba(var(--color-cash-rgb), 0.7);
    }

    /* Popup toast on tap — fixed at bottom of viewport */
    .mini-hud-popup {
        display: none;
        position: fixed;
        bottom: 4.375rem;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        background: #1a1d23;
        border: 1px solid #2a2d33;
        border-radius: 0.3125rem;
        padding: 0.3125rem 0.75rem;
        font-size: 0.6875rem;
        font-weight: 700;
        font-family: var(--font-mono);
        color: var(--color-gold);
        z-index: 200;
        pointer-events: none;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
    }

    .mini-hud-popup.visible {
        display: block;
    }

    .topbar__hud {
        display: none;
    }

    .topbar__primary-row .hud-stat--xp {
        padding: 0.1875rem 0.375rem 0.25rem;
        gap: 0.125rem;
    }

    .topbar__primary-row .hud-stat--xp .hud-stat__icon {
        width: 0.875rem;
        height: 0.875rem;
        font-size: 0.375rem;
    }

    .topbar__primary-row .hud-stat--xp .hud-stat__label {
        font-size: 0.6875rem;
    }

    .topbar__primary-row .hud-stat--xp .hud-stat__value {
        font-size: 0.375rem;
    }

    /* Slightly slimmer bars on phone — only height/margin change; width stays 100% of cell */
    .topbar-cluster .stat-track {
        height: 0.5rem;
        margin-top: 0.125rem;
    }

    /* Hide sidebar drawer and backdrop on mobile — bottom-nav handles navigation */
    .sidebar,
    .sidebar-backdrop {
        display: none !important;
    }

    /* Edit .bottom-nav to re-theme the mobile tab bar (gold top rule, blur, tap targets) */
    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 35;
        width: 100%;
        box-sizing: border-box;
        /* Above sticky .topbar (30), below sidebar drawer (50) */
        min-height: 2.75rem;
        /* Matches .main padding-bottom calc above */
        padding: 0.25rem 0.125rem 0;
        background:
            linear-gradient(180deg, rgba(22, 20, 16, 0.98) 0%, rgba(8, 8, 8, 0.99) 100%);
        border-top: 1px solid rgba(var(--color-gold-rgb), 0.28);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45);
    }

    .bottom-nav__item {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.1875rem;
        min-width: 0;
        padding: 0.25rem 0.125rem;
        color: var(--text-tertiary);
        font: inherit;
        text-decoration: none;
        border: none;
        background: transparent;
        border-radius: var(--radius-mobile);
        transition:
            color 0.12s ease,
            background 0.12s ease,
            transform var(--touch-press-speed) ease,
            filter var(--touch-press-speed) ease;
    }

    .bottom-nav__item i {
        font-size: 0.9375rem;
        line-height: 1;
    }

    .bottom-nav__item svg {
        width: 1.1875rem;
        height: 1.1875rem;
        display: block;
        fill: currentColor;
    }

    .bottom-nav__label {
        font-size: 0.4375rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .bottom-nav__badge {
        position: absolute;
        top: 0.0625rem;
        right: calc(50% - 1.125rem);
        min-width: 0.8125rem;
        height: 0.8125rem;
        padding: 0 0.1875rem;
        border-radius: 0.40625rem;
        background: var(--color-crimson-bright);
        font-size: 0.375rem;
        font-weight: 800;
        line-height: 0.8125rem;
        text-align: center;
        color: #fff;
        display: none;
        pointer-events: none;
    }

    .bottom-nav__badge--active {
        display: block;
    }

    .bottom-nav__item:hover {
        color: var(--text-primary);
        background: rgba(var(--color-gold-rgb), 0.08);
    }

    .bottom-nav__item--active {
        color: var(--color-gold);
        background: rgba(var(--color-gold-rgb), 0.2);
        box-shadow: 0 0 12px rgba(var(--color-gold-rgb), 0.15), inset 0 0 8px rgba(var(--color-gold-rgb), 0.05);
    }

    .bottom-nav__item--active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 20%;
        right: 20%;
        height: 2px;
        background: var(--color-gold);
        border-radius: 0 0 2px 2px;
        box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.6);
    }

    .bottom-nav__item--active i {
        filter: drop-shadow(0 0 10px rgba(var(--color-gold-rgb), 0.8)) drop-shadow(0 0 20px rgba(var(--color-gold-rgb), 0.3));
    }

    .bottom-nav__item--active svg {
        filter: drop-shadow(0 0 10px rgba(var(--color-gold-rgb), 0.8)) drop-shadow(0 0 20px rgba(var(--color-gold-rgb), 0.3));
    }

    /* Sliding active indicator bar */
    .bottom-nav__indicator {
        position: absolute;
        bottom: calc(-0.25rem - env(safe-area-inset-bottom, 0));
        left: 0;
        height: 0.125rem;
        background: var(--color-gold);
        border-radius: 0.125rem 0.125rem 0 0;
        box-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.6), 0 0 20px rgba(var(--color-gold-rgb), 0.15);
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        z-index: 2;
        will-change: transform;
    }

    /* Glow-in for the initial page-load animation */
    .bottom-nav__indicator--enter {
        animation: indicator-glow-in 0.5s ease-out forwards;
    }

    @keyframes indicator-glow-in {
        0% {
            box-shadow: 0 0 2px rgba(var(--color-gold-rgb), 0.3);
            opacity: 0.6;
        }

        100% {
            box-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.6), 0 0 20px rgba(var(--color-gold-rgb), 0.15);
            opacity: 1;
        }
    }



    /* One blur layer max — on sticky tier-1 only */
    .topbar__hud {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .topbar__tier--identity {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .bottom-nav {
        background: #0E0D0B;
    }

    .topbar-cluster .hud-stat__timer {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .page-heading {
        padding: 0.75rem 0.75rem 0.25rem;
    }
}

/* ==========================================================
   Compact HUD — body.compact-mode (Settings → Compact HUD)
   Shrinks the topbar strip for more screen space.
   Placed AFTER the mobile media query so it wins the cascade.
   ========================================================== */
.compact-mode .topbar {
    padding: 0.15rem 0.5rem;
}

.compact-mode .topbar-cluster .hud-stat {
    padding: 0.125rem 0.375rem;
    gap: 0.1rem;
}

.compact-mode .topbar-cluster .hud-stat__head {
    gap: 0.2rem;
}

.compact-mode .topbar-cluster .hud-stat__value {
    font-size: 0.625rem;
    line-height: 1;
}

.compact-mode .topbar-cluster .hud-stat__timer {
    display: none;
}

.compact-mode .topbar-cluster .hud-stat .stat-track {
    height: 0.2rem;
}

.compact-mode .topbar-cluster .wallet-chip {
    padding: 0.1rem 0.3rem;
    max-width: 70px;
    gap: 2px;
}

.compact-mode .topbar-cluster .wallet-chip__icon {
    width: 0.8rem;
    height: 0.8rem;
}

.compact-mode .topbar-cluster .wallet-chip__value {
    font-size: 0.625rem;
}

.compact-mode .topbar-cluster .player-card__avatar {
    width: 1.625rem;
    height: 1.625rem;
    font-size: 0.75rem;
}

.compact-mode .topbar-cluster .player-card__name {
    font-size: 0.6875rem;
}

.compact-mode .topbar-cluster .stat-track--xp {
    height: 0.2rem;
}

.compact-mode .topbar-cluster .hud-stat--xp {
    gap: 0.1rem;
}

.compact-mode .topbar-cluster .hud-stat__xp-pct {
    font-size: 0.5rem;
}

.compact-mode .topbar__mini-hud {
    padding: 0.0625rem 0.5rem;
}

.compact-mode .mini-hud-stat {
    gap: 0.0625rem;
}

.compact-mode .mini-hud-stat__head {
    font-size: 0.5625rem;
    gap: 0.2rem;
}

.compact-mode .mini-hud-stat__track {
    height: 0.125rem;
}

/* Mobile Compact Card Reductions */
.compact-mode .mobile-header-card {
    padding: 0.15rem 0.35rem;
    margin: 0.05rem 0.2rem;
    gap: 0.1rem;
}

.compact-mode .mobile-header-card__mid {
    margin-top: 0.05rem;
    padding-top: 0;
    gap: 0.35rem;
}

.compact-mode .mobile-header-card__avatar-wrap {
    margin-top: 0;
}

.compact-mode .mobile-header-card__avatar {
    width: 1.75rem !important;
    height: 1.75rem !important;
    font-size: 0.75rem;
}

.compact-mode .mobile-header-card__lvl-tag {
    font-size: 0.4375rem;
    padding: 0.02rem 0.25rem;
    bottom: -0.25rem;
}

.compact-mode .mobile-header-card__user-row .player-card__name {
    font-size: 0.8125rem;
}

.compact-mode .mobile-header-card__discord-btn,
.compact-mode .mobile-header-card__settings-btn {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.725rem;
}

.compact-mode .mobile-header-card__track {
    height: 0.15rem !important;
}

.compact-mode .mobile-header-card__bot {
    margin-top: 0.1rem;
    padding-top: 0.15rem;
    gap: 0.2rem;
}

.compact-mode .mobile-header-card__bot .wallet-item {
    padding: 0.1rem 0.25rem !important;
}

.compact-mode .mobile-header-card .wallet-chip__icon {
    width: 0.8rem !important;
    height: 0.8rem !important;
}

.compact-mode .mobile-header-card .wallet-chip__value {
    font-size: 0.6875rem !important;
}

@media (max-width: 1023.98px) {
    .compact-mode #page-content {
        margin-top: 0.5rem;
    }
}

/* ==========================================================
   Hero / Daily Briefing
   Edit .hero background image + .hero__tribute colors for the landing strip
   ========================================================== */
.hero {
    position: relative;
    margin: 0.875rem 0.875rem 0.875rem;
    border: 1px solid var(--border-color);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(10, 10, 10, 0.92) 100%),
        url('../assets/images/background-1.webp') center / cover no-repeat,
        var(--bg-panel);
    min-height: 11.25rem;
    border-radius: var(--radius-sharp);
    overflow: hidden;
}

.hero__overlay {
    position: relative;
    min-height: 11.25rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.875rem;
}

.hero__caption {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: center;
    text-align: center;
}

.hero__kicker {
    font-size: 0.5625rem;
    color: var(--color-gold);
    letter-spacing: 0.32em;
    font-weight: 700;
    text-transform: uppercase;
}

.hero__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    animation: hero-title-glow 3s ease-in-out infinite;
}

@keyframes hero-title-glow {

    0%,
    100% {
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 0 32px rgba(var(--color-gold-rgb), 0.06);
    }

    50% {
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 0 40px rgba(var(--color-gold-rgb), 0.15), 0 0 60px rgba(var(--color-gold-rgb), 0.05);
    }
}

.hero__tribute {
    align-self: center;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    max-width: 22rem;
    width: auto;
    background: rgba(15, 15, 15, 0.92);
    border: 1px solid rgba(var(--color-gold-rgb), 0.5);
    color: var(--color-gold);
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.05em;
    box-shadow: 0 0 24px rgba(var(--color-gold-rgb), 0.3), 0 4px 16px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.hero__tribute-preview {
    display: block;
    flex-basis: 100%;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: rgba(var(--color-gold-rgb), 0.65);
    margin-top: 0.125rem;
    line-height: 1.3;
}

@media (hover: hover) and (pointer: fine) {

.hero__tribute:hover {
    background: rgba(25, 25, 25, 0.95);
    border-color: rgba(var(--color-gold-rgb), 0.7);
    box-shadow: 0 0 32px rgba(var(--color-gold-rgb), 0.45), 0 4px 20px rgba(0, 0, 0, 0.6);
    transform: translateY(-1px);
}
}

.hero__tribute[hidden] {
    display: none !important;
}

.hero__tribute.hero__tribute--claimed {
    opacity: 0.35;
    pointer-events: none;
}

.hero__tribute.hero__tribute--claimed i {
    color: var(--color-green);
}

/* ── Tribute Reward Toast ── */
.tribute-toast {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(26, 22, 18, 0.95), rgba(16, 14, 12, 0.96));
    border: 1px solid rgba(var(--color-gold-rgb), 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--color-gold-rgb), 0.08);
    transform: translateY(1.25rem) scale(0.9);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
    pointer-events: none;
}

.tribute-toast--active {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.tribute-toast--exit {
    transform: translateY(-1.25rem) scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.25s ease;
}

.tribute-toast__reward {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.tribute-toast__reward i {
    width: 1.125rem;
    text-align: center;
    font-size: 0.875rem;
}

.tribute-toast__reward--cash {
    color: var(--color-gold);
}

.tribute-toast__reward--cash i {
    color: var(--color-bright-green);
}

.tribute-toast__reward--xp {
    color: #60a5fa;
    font-size: 0.75rem;
}

.tribute-toast__reward--xp i {
    color: var(--color-gold);
}

/* ── Tribute Toast — Streak Line ── */
.tribute-toast__streak {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    padding-bottom: 0.375rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.1);
}

.tribute-toast__streak i {
    color: #ff6b35;
    font-size: 0.6875rem;
    filter: drop-shadow(0 0 4px rgba(255, 107, 53, 0.4));
}

.tribute-toast__bonus {
    margin-left: auto;
    color: #4ade80;
    font-size: 0.625rem;
    font-weight: 700;
}

/* ── Weekly Bonus Badge ── */
.tribute-toast--weekly {
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 24px rgba(74, 222, 128, 0.1);
}

.tribute-toast__weekly-badge {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.125rem;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(74, 222, 128, 0.03));
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 0.25rem;
    font-size: 0.5625rem;
    font-weight: 800;
    color: #4ade80;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    animation: weekly-bonus-pulse 1.5s ease-in-out infinite;
}

.tribute-toast__weekly-badge i {
    font-size: 0.625rem;
    color: #4ade80;
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.5));
    animation: weekly-bonus-bolt 1.5s ease-in-out infinite;
}

@keyframes weekly-bonus-pulse {

    0%,
    100% {
        border-color: rgba(74, 222, 128, 0.2);
    }

    50% {
        border-color: rgba(74, 222, 128, 0.5);
    }
}

@keyframes weekly-bonus-bolt {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

/* ── Hero Streak Widget — Premium Redesign ── */
.hero__streak {
    align-self: center;
    width: 100%;
    max-width: 22.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem 0.5rem;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(var(--color-gold-rgb), 0.25);
    border-radius: 0.5rem;
    transition: opacity 0.2s ease;
}

.hero__streak--claimed {
    opacity: 1;
}

/* ── Hero Quick Stats Strip ── */
.hero__stats {
    display: flex;
    gap: 0.75rem;
    align-self: center;
    width: 100%;
    max-width: 22.5rem;
    margin-top: 0.5rem;
}

.hero__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0.375rem;
}

.hero__stat-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.hero__stat-label {
    font-size: 0.4375rem;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero__stat i {
    font-size: 0.625rem;
    color: var(--color-gold);
    opacity: 0.5;
}

/* ── Streak Header: Label + Day Count + Bonus ── */
.hero__streak-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Streak Header: Day Count + Bonus ── */
.hero__streak-day {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.hero__streak-flame-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

.hero__streak-flame-wrap i {
    font-size: 1.35rem;
    color: #ff6b35;
    filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));
    animation: streak-fire 2s ease-in-out infinite;
}

.hero__streak-flame-num {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.5rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 2px #000;
    line-height: 1;
    pointer-events: none;
    text-align: center;
    font-family: inherit;
}

@keyframes streak-fire {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.4));
    }

    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.7));
    }
}

.hero__streak-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary, #bbb);
    border-radius: 0.25rem;
    padding: 0.25rem 0.45rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

@media (hover: hover) and (pointer: fine) {

.hero__streak-btn:hover {
    background: rgba(var(--color-gold-rgb, 212, 175, 55), 0.15);
    border-color: var(--color-gold, #e2b714);
    color: var(--color-gold, #e2b714);
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb, 212, 175, 55), 0.25);
}
}

/* ── Streak Progress Bar with Milestone Markers ── */
.hero__streak-track {
    position: relative;
    width: 100%;
}

.hero__streak-bar {
    position: relative;
    height: 0.375rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0.1875rem;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero__streak-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff6b35, var(--color-gold));
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    width: 0%;
}

/* Glow sheen on fill */
.hero__streak-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent 60%);
    pointer-events: none;
}

/* ── Milestone markers on the bar ── */
.hero__streak-mile {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    font-size: 0.375rem;
    font-weight: 700;
    color: var(--text-tertiary);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 2;
    pointer-events: none;
}

.hero__streak-mile--7 {
    left: 23.33%;
}

.hero__streak-mile--14 {
    left: 46.66%;
}

.hero__streak-mile--21 {
    left: 70%;
}

.hero__streak-mile--30 {
    left: calc(100% - 0.5rem);
}

/* Milestone lit-up state */
.hero__streak-mile--reached {
    background: rgba(var(--color-gold-rgb), 0.15);
    border-color: var(--color-gold);
    color: var(--color-gold);
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.25);
}

.hero__streak-mile--reached span {
    color: var(--color-gold);
}

/* ── Weekly Bonus Tick Marks on the progress bar ── */
/* ── Actions Row ── */
.hero__streak-actions {
    display: flex;
    justify-content: flex-end;
}


/* ── Milestone Toast ── */
.milestone-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(40, 30, 10, 0.96), rgba(20, 16, 8, 0.97));
    border: 1px solid rgba(var(--color-gold-rgb), 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 30px rgba(var(--color-gold-rgb), 0.12);
    transform: translateY(1.25rem) scale(0.9);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    pointer-events: none;
}

.milestone-toast--active {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.milestone-toast--exit {
    transform: translateY(-1.25rem) scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.25s ease;
}

.milestone-toast__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-gold-rgb), 0.15);
    border: 1px solid rgba(var(--color-gold-rgb), 0.3);
    border-radius: 50%;
    color: var(--color-gold);
    font-size: 1rem;
    animation: milestone-glow 1.5s ease-in-out infinite;
}

@keyframes milestone-glow {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.15);
    }

    50% {
        box-shadow: 0 0 20px rgba(var(--color-gold-rgb), 0.3);
    }
}

.milestone-toast__body {
    flex: 1;
    min-width: 0;
}

.milestone-toast__label {
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 0.16em;
    margin-bottom: 0.125rem;
}

.milestone-toast__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.milestone-toast__rewards {
    display: flex;
    gap: 0.75rem;
    font-size: 0.6875rem;
}

.milestone-toast__cash {
    color: var(--color-gold);
    font-weight: 700;
}

.milestone-toast__credits {
    color: var(--color-credit);
    font-weight: 700;
}

.milestone-toast__credits i {
    font-size: 0.625rem;
    color: var(--color-credit);
}

/* ── Reminder Toast ── */
.reminder-toast {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.96), rgba(16, 12, 8, 0.97));
    border: 1px solid rgba(255, 107, 53, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 107, 53, 0.08);
    transform: translateY(1.25rem) scale(0.9);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.reminder-toast--active {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.reminder-toast--exit {
    transform: translateY(-1.25rem) scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.25s ease;
}

.reminder-toast__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b35;
    font-size: 0.875rem;
    animation: reminder-pulse 2s ease-in-out infinite;
}

@keyframes reminder-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.reminder-toast__body {
    flex: 1;
    min-width: 0;
}

.reminder-toast__title {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.reminder-toast__msg {
    font-size: 0.625rem;
    color: var(--text-tertiary);
    margin-top: 0.125rem;
    line-height: 1.4;
}

/* ── Toast button (uses .btn .btn--warning .btn--sm) ── */

/* ==========================================================
   Dashboard Quick Actions Toolbar
   ========================================================== */
.dashboard-quick-actions {
    display: block;
    width: 100%;
    margin-bottom: 1.125rem;
    box-sizing: border-box;
}

.quick-actions__body {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.quick-actions__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.quick-actions__summary::-webkit-details-marker {
    display: none;
}

.quick-actions__summary-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-serif, serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-gold, #e2b714);
    text-transform: uppercase;
}

.quick-actions__summary-title i {
    font-size: 0.8125rem;
}

.dashboard-quick-actions[open] .quick-actions__summary .card-header__chevron {
    transform: rotate(180deg);
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    gap: 0.625rem;
    background: linear-gradient(135deg, var(--bg-panel, #161513) 0%, #1a1a1a 100%);
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: var(--radius-ui, 10px);
    padding: 0.75rem 0.875rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(var(--color-gold-rgb, 212, 175, 55), 0.05);
    min-width: 0;
    box-sizing: border-box;
}

/* Mobile View: Collapsible Container — cards stacked vertically: [a] [b] [c] */
@media (max-width: 959.98px) {
    .dashboard-quick-actions {
        gap: 0;
        padding: 0.75rem 0.875rem;
        background: rgba(22, 21, 19, 0.65);
        border: none;
        border-radius: var(--radius-ui, 12px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(var(--color-gold-rgb, 212, 175, 55), 0.08);
    }

    .quick-actions__body {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Strip card-level decoration on mobile — container handles the visual wrapper */
    .dashboard-quick-actions > .quick-actions__body > .quick-action-card {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0.625rem 0;
        flex: 1 1 auto;
        width: 100%;
    }

    .dashboard-quick-actions > .quick-actions__body > .quick-action-card + .quick-action-card {
        border-top: 1px solid rgba(197, 160, 89, 0.15);
    }

    .dashboard-quick-actions:not([open]) {
        padding-bottom: 0.625rem;
    }

    .dashboard-quick-actions:not([open]) > .quick-actions__body {
        display: none;
    }

    .quick-action-card__controls {
        gap: 0.5rem;
    }
}

/* Desktop View: Flexbox Row — cards side by side: [a][b][c] */
@media (min-width: 960px) {
    .dashboard-quick-actions {
        padding: 0.875rem;
        background: linear-gradient(135deg, rgba(22, 21, 19, 0.85), #161513);
        border: none;
        border-radius: var(--radius-ui, 12px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(var(--color-gold-rgb, 212, 175, 55), 0.08);
    }

    .dashboard-quick-actions > .quick-actions__summary {
        margin: -0.875rem -0.875rem 0.625rem;
        padding: 0.75rem 0.875rem;
        background: rgba(var(--color-gold-rgb, 212, 175, 55), 0.04);
        border-bottom: 1px solid var(--border-color-soft);
    }

    .quick-actions__body {
        gap: 0.75rem;
    }

    .dashboard-quick-actions > .quick-actions__body > .quick-action-card {
        flex: 1 1 0;
        min-width: 0;
    }
}

.quick-action-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.qa-commit-btn--progress {
    position: relative;
    pointer-events: none;
}

.qa-commit-btn--progress .qa-commit-btn__content {
    visibility: hidden;
}

.qa-commit-btn--progress .dot-spinner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qa-commit-btn .dot-spinner span {
    background-color: #12100d;
}

.dot-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.dot-spinner span {
    width: 6px;
    height: 6px;
    background-color: var(--color-gold, #e2b714);
    border-radius: 50%;
    display: inline-block;
    animation: dot-pulse 1.2s infinite ease-in-out both;
}

.dot-spinner span:nth-child(1) { animation-delay: -0.32s; }
.dot-spinner span:nth-child(2) { animation-delay: -0.16s; }
.dot-spinner span:nth-child(3) { animation-delay: 0s; }

@keyframes dot-pulse {
    0%, 80%, 100% {
        transform: scale(0.4);
        opacity: 0.3;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Compact quick-crime result (receipt-slate style) ── */
.qa-crime-card--result .quick-action-card__head,
.qa-crime-card--result .quick-action-card__controls {
    display: none;
}

.qa-crime-result {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    background: #0f0d0a;
    border: 1px solid rgba(var(--color-gold-rgb, 212, 175, 55), 0.4);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
    padding: 0.5rem 0.625rem;
    animation: qa-result-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

@keyframes qa-result-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.qa-crime-result__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}

.qa-crime-result__title {
    font-size: 0.6875rem;
    font-weight: 800;
    font-family: var(--font-serif, Georgia, serif);
    letter-spacing: 0.06em;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qa-crime-result__tag {
    font-size: 0.625rem;
    font-weight: 800;
    font-family: var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.qa-crime-result__tag--clean,
.qa-crime-result__tag--success { color: #2ecc71; }
.qa-crime-result__tag--dirty { color: #e74c3c; }
.qa-crime-result__tag--sloppy { color: #f1c40f; }
.qa-crime-result__tag--busted,
.qa-crime-result__tag--failed {
    color: #e74c3c;
}

/* Serrated Tear Line */
.qa-crime-result__tear {
    height: 4px;
    width: 100%;
    background: repeating-linear-gradient(90deg, rgba(var(--color-gold-rgb, 212, 175, 55), 0.4) 0px, rgba(var(--color-gold-rgb, 212, 175, 55), 0.4) 4px, transparent 4px, transparent 8px);
    margin: 0.25rem 0 0.375rem 0;
}

.qa-crime-result__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-family: var(--font-mono, ui-monospace, monospace);
}

.qa-crime-result__payout-section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.qa-crime-result__cash {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 1.125rem;
    font-weight: 900;
    color: #2ecc71;
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow: 0 1px 6px rgba(46, 204, 113, 0.25);
}

.qa-crime-result__cash--dirty {
    color: #e74c3c;
    text-shadow: 0 1px 6px rgba(231, 76, 60, 0.35);
}

.qa-crime-result__cash--busted {
    color: #e74c3c;
    text-shadow: none;
}

.qa-crime-result__sub-payout {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #5dade2;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.qa-crime-result__sub-payout--busted {
    color: #e74c3c;
}

.qa-crime-result__cred-val {
    color: var(--color-gold, #e2b714) !important;
}

.qa-crime-result__msg {
    font-size: 0.625rem;
    line-height: 1.35;
    color: var(--text-tertiary, #9aa0a6);
    font-style: italic;
}
.qa-crime-result__seized {
    font-size: 0.625rem;
    line-height: 1.35;
    color: #e74c3c;
    font-weight: 600;
    margin-top: 2px;
}

.qa-crime-result__loot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.125rem;
}

.qa-crime-result__loot-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border: 1px solid rgba(46, 204, 113, 0.35);
    border-radius: 4px;
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
}

.qa-crime-result__loot-chip--contraband {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--color-gold, #e2b714);
}

.qa-crime-result__loot-img {
    width: 0.875rem;
    height: 0.875rem;
    object-fit: contain;
}

.quick-action-card__controls {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    min-width: 0;
}

.qa-select {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 6px;
    padding: 0.375rem 0.375rem;
    color: var(--text-primary, #fff);
    font-family: var(--font-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.qa-select:focus {
    border-color: var(--color-gold, #e2b714);
}

.qa-select option {
    background: #161513;
    color: #fff;
}
.qa-select option:disabled {
    color: #6b7280;
    background: #11100f;
}

/* Quick Train custom stat dropdown */
.qa-stat-dropdown {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}
.qa-stat-dropdown__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 6px;
    padding: 0.375rem 0.5rem;
    color: var(--text-primary, #fff);
    font-family: var(--font-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
    text-align: left;
}
@media (hover: hover) and (pointer: fine) {
.qa-stat-dropdown__trigger:hover,
.qa-stat-dropdown__trigger:focus {
    border-color: var(--color-gold, #e2b714);
}
}
.qa-stat-dropdown__arrow {
    font-size: 8px;
    opacity: 0.5;
    transition: transform 0.2s ease;
}
.qa-stat-dropdown--open .qa-stat-dropdown__arrow {
    transform: rotate(180deg);
}
.qa-stat-dropdown__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: #161513;
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 6px;
    margin-top: 4px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.qa-stat-dropdown--open .qa-stat-dropdown__menu {
    display: block;
}
.qa-stat-dropdown__option {
    padding: 0.4rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.qa-stat-dropdown__option:hover {
    background: rgba(255,255,255,0.08);
}
}
.qa-stat-dropdown__option--active {
    background: rgba(255,255,255,0.05);
}

.qa-input-energy {
    width: 2.75rem;
    flex-shrink: 0;
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 6px;
    padding: 0.375rem 0.25rem;
    color: var(--text-primary, #fff);
    font-family: var(--font-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color 0.2s ease;
}

.qa-input-energy:focus {
    border-color: var(--color-gold, #e2b714);
}

.qa-input-amount {
    flex: 1 1 50px;
    min-width: 40px;
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 6px;
    padding: 0.375rem 0.375rem;
    color: var(--text-primary, #fff);
    font-family: var(--font-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s ease;
}

.qa-input-amount:focus {
    border-color: var(--color-gold, #e2b714);
}

.qa-input-wrapper {
    position: relative;
    flex: 1 1 50px;
    min-width: 40px;
}

.qa-input-amount--has-action {
    width: 100%;
    padding-right: 1.75rem;
    box-sizing: border-box;
}

.qa-input-action {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border: none;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 0.625rem;
}

@media (hover: hover) and (pointer: fine) {

.qa-input-action:hover {
    background: rgba(34, 197, 94, 0.3);
    color: #86efac;
}
}

.qa-input-action:active {
    transform: translateY(-50%) scale(0.92);
}

.quick-action-card--bank--withdraw .qa-input-action {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

@media (hover: hover) and (pointer: fine) {

.quick-action-card--bank--withdraw .qa-input-action:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
}

.qa-bank-sub-btn {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    flex-shrink: 0 !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: #4ade80 !important;
}

@media (hover: hover) and (pointer: fine) {

.qa-bank-sub-btn:hover:not(:disabled) {
    border-color: rgba(34, 197, 94, 0.7) !important;
    background: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
}
}

.quick-action-card--bank .quick-action-btn__icon {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.quick-action-card--bank .qa-input-amount:focus {
    border-color: #22c55e;
}

.quick-action-card--bank--withdraw .quick-action-btn__icon {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.quick-action-card--bank--withdraw .qa-input-amount:focus {
    border-color: #ef4444;
}

.qa-mode-toggle {
    display: inline-flex;
    gap: 0;
    background: rgba(10, 10, 15, 0.7);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 6px;
    padding: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.qa-mode-toggle__option {
    padding: 0.2rem 0.5rem;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.15s ease;
    line-height: 1.2;
}

.qa-mode-toggle__option--active {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

@media (hover: hover) and (pointer: fine) {

.qa-mode-toggle:hover {
    border-color: rgba(34, 197, 94, 0.45);
}
}

.quick-action-card--bank--withdraw .qa-mode-toggle {
    border-color: rgba(239, 68, 68, 0.25);
}

.quick-action-card--bank--withdraw .qa-mode-toggle__option--active {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

@media (hover: hover) and (pointer: fine) {

.quick-action-card--bank--withdraw .qa-mode-toggle:hover {
    border-color: rgba(239, 68, 68, 0.45);
}
}

.quick-action-card--bank--withdraw .qa-bank-all-btn,
.quick-action-card--bank--withdraw .qa-bank-half-btn {
    background: linear-gradient(135deg, #fca5a5 0%, #ef4444 50%, #b91c1c 100%) !important;
    border: 1px solid rgba(252, 165, 165, 0.7) !important;
    color: #450a0a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(239, 68, 68, 0.5) !important;
}

@media (hover: hover) and (pointer: fine) {

.quick-action-card--bank--withdraw .qa-bank-all-btn:hover:not(:disabled),
.quick-action-card--bank--withdraw .qa-bank-half-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #fecaca 0%, #f87171 50%, #dc2626 100%) !important;
}
}

.quick-action-card--bank--withdraw .qa-bank-half-btn:active:not(:disabled),
.quick-action-card--bank--withdraw .qa-bank-all-btn:active:not(:disabled) {
    background: linear-gradient(135deg, #fca5a5 0%, #ef4444 50%, #b91c1c 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(239, 68, 68, 0.5) !important;
}

.qa-commit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    background: linear-gradient(135deg, #f9d966 0%, #e2b714 50%, #b8860b 100%) !important;
    color: #12100d !important;
    border: 1px solid rgba(255, 223, 100, 0.7) !important;
    border-radius: 6px !important;
    padding: 0.375rem 0.625rem !important;
    font-size: 0.6875rem !important;
    font-weight: 800 !important;
    font-family: var(--font-primary) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
    flex-shrink: 0 !important;
}

.qa-bank-all-btn,
.qa-bank-half-btn {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #15803d 100%) !important;
    border: 1px solid rgba(134, 239, 172, 0.7) !important;
    color: #052e16 !important;
    transition: transform 0.12s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(34, 197, 94, 0.5) !important;
}

@media (hover: hover) and (pointer: fine) {

.qa-bank-all-btn:hover:not(:disabled),
.qa-bank-half-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #86efac 0%, #4ade80 50%, #16a34a 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(34, 197, 94, 0.5) !important;
}
}

@media (hover: hover) and (pointer: fine) {

.qa-commit-btn:hover:not(:disabled):not(.qa-bank-all-btn):not(.qa-bank-half-btn) {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(226, 183, 20, 0.45) !important;
    background: linear-gradient(135deg, #ffea88 0%, #f0c31e 50%, #c99410 100%) !important;
}
}

.qa-commit-btn:active:not(:disabled) {
    transform: scale(0.96) translateY(0) !important;
}

.qa-bank-half-btn:active:not(:disabled),
.qa-bank-all-btn:active:not(:disabled) {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(34, 197, 94, 0.5) !important;
}

.qa-commit-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.4) !important;
}

.qa-commit-btn--nerve-locked {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.6) !important;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--bg-panel, #161513) 0%, #1a1a1a 100%);
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: var(--radius-ui, 10px);
    padding: 0.875rem 1rem;
    color: var(--text-primary, #fff);
    font-family: var(--font-primary);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(var(--color-gold-rgb, 212, 175, 55), 0.05);
}

@media (hover: hover) and (pointer: fine) {

.quick-action-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(var(--color-gold-rgb, 212, 175, 55), 0.55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(var(--color-gold-rgb, 212, 175, 55), 0.1), 0 0 12px rgba(var(--color-gold-rgb, 212, 175, 55), 0.15);
    background: linear-gradient(135deg, #1d1c1a 0%, #222222 100%);
}
}

.quick-action-btn:active:not(:disabled) {
    transform: translateY(0);
}

.quick-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.quick-action-btn__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: rgba(var(--color-gold-rgb, 212, 175, 55), 0.08);
    border: 1px solid rgba(197, 160, 89, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold, #e2b714);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.quick-action-btn__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.quick-action-btn__title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-action-btn__meta {
    font-size: 0.6875rem;
    color: var(--text-tertiary, #9aa0a6);
    margin-top: 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dashboard {
    padding: 0 0 1.125rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125rem;
}

.dashboard__pair {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    min-width: 0;
}

/* Mobile card order — flex `order` promotes key cards before accordions.
   Desktop resets order at 900px for the 3×2 grid reading order. */
.card--dossier {
    order: 1;
}

.card--missions {
    order: 2;
}

.card--faction {
    order: 3;
}

.card--skill {
    order: 4;
}

.card--empire {
    order: 5;
}

.card--log {
    order: 6;
}

.card {
    background: linear-gradient(135deg, var(--bg-panel) 0%, #1a1a1a 100%);
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: var(--radius-ui);
    padding: var(--space-cell);
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(var(--color-gold-rgb), 0.05);
}

@media (hover: hover) and (pointer: fine) {

.card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(var(--color-gold-rgb), 0.05), 0 0 12px rgba(var(--color-gold-rgb), 0.12);
}
}

/* Global toast notifications */
.toast {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-ui);
    background: rgba(14, 13, 11, 0.95);
    border: 1px solid rgba(var(--color-gold-rgb), 0.2);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    opacity: 0;
    transform: translateX(1rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
    max-width: 20rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.toast--visible {
    opacity: 1;
    transform: translateX(0);
}

.toast--success {
    border-color: rgba(var(--color-gold-rgb), 0.4);
    background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.12), rgba(14, 13, 11, 0.95));
}

.toast--error {
    border-color: rgba(var(--color-rust-bright-rgb), 0.4);
    background: linear-gradient(135deg, rgba(var(--color-rust-bright-rgb), 0.12), rgba(14, 13, 11, 0.95));
}

.toast--info {
    border-color: rgba(var(--color-gold-rgb), 0.2);
}

.toast--bust {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #b91c1c;
    color: #fff;
    border: 1px solid #7a1212;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: translateX(120%);
    opacity: 0;
    animation: toast-bust-in 0.35s ease forwards, toast-bust-out 0.35s ease forwards 2.65s;
}

.toast--bust svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

@keyframes toast-bust-in {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-bust-out {
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* Accordions on mobile; JS forces them open on desktop (see accordion.js) */
details.card {
    -webkit-tap-highlight-color: transparent;
}

details.card>summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
    transition: transform var(--touch-press-speed) ease, filter var(--touch-press-speed) ease;
}

details.card>summary:focus {
    outline: none;
    background-color: transparent;
    box-shadow: none;
}

details.card>summary:focus-visible {
    outline: 2px solid var(--color-gold-dim);
    outline-offset: 3px;
}

details.card>summary:active {
    background-color: transparent;
}

details.card:focus,
details.card:focus-within {
    outline: none;
}

details.card>summary::-webkit-details-marker {
    display: none;
}

details.card>summary::marker {
    display: none;
}

/* Edit .card-header to change gold section titles across all dashboard cards */
.card-header {
    color: var(--color-gold);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    line-height: 1;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.22);
    margin-bottom: 0.25rem;
}

.card-header i {
    font-size: 0.75rem;
}

.card-header__tag {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--color-gold);
    background: rgba(var(--color-gold-rgb), 0.12);
    padding: 0.125rem 0.375rem;
    border-radius: 0.1875rem;
    letter-spacing: 0.1em;
    flex-shrink: 0;
}

.card-header--row {
    justify-content: flex-start;
}

.card-header__chevron {
    margin-left: auto;
    font-size: 0.6875rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

details[open]>.card-header .card-header__chevron {
    transform: rotate(180deg);
}

.card__select {
    background: var(--bg-track);
    border: 1px solid var(--border-color);
    font-size: 0.5625rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sharp);
    letter-spacing: 0.16em;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform var(--touch-press-speed) ease,
        filter var(--touch-press-speed) ease;
}

/* Generic key/value pair styling — used inside dossier, faction, skill */
.kv-label {
    font-size: 0.625rem;
    color: var(--text-tertiary);
    letter-spacing: 0.14em;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.kv-value {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================
   Premium Mafia typography — dashboard, hero, nav (all breakpoints)
   Gold headers stay authoritative; body copy uses warm tiers, not pure white.
   ========================================================== */
.hero__title {
    color: var(--text-primary);
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.7),
        0 0 32px rgba(var(--color-gold-rgb), 0.06);
}

.card__select {
    color: var(--text-primary);
}

.card-header__chevron {
    color: var(--text-tertiary);
}

/* Dossier values tied to HUD semantics — HP / Crystals / Bank read as resources */
.dossier__cell:nth-child(3) .kv-value {
    color: var(--color-crimson-bright);
}

.dossier__cell:nth-child(4) .kv-value {
    color: var(--color-credit);
}

.dossier__cell:nth-child(8) .kv-value {
    color: var(--color-gold);
}

.empire__legend-item {
    color: var(--text-secondary);
}

.terminal {
    color: var(--text-secondary);
}

.terminal__text {
    color: var(--text-secondary);
}

.terminal__bullet {
    color: var(--text-tertiary);
}

.terminal__time {
    color: var(--color-gold);
    font-weight: 600;
}

.chat-bar {
    color: var(--text-tertiary);
}

@media (hover: hover) and (pointer: fine) {

.chat-bar:hover {
    color: var(--text-secondary);
}
}

.sidebar .nav__section {
    color: var(--text-tertiary);
}

.sidebar .nav__link {
    color: var(--text-secondary);
}

@media (hover: hover) and (pointer: fine) {

.sidebar .nav__link:hover {
    color: var(--text-primary);
}
}

body[data-in-fight] .sidebar .nav__link,
body[data-in-fight] .bottom-nav__item,
body[data-in-fight] .player-card__avatar-link,
body[data-in-fight] .wallet-chip--cash,
body[data-in-fight] .wallet-chip--dirty {
    pointer-events: none;
    opacity: 0.45;
}

.sidebar .brand__name {
    color: var(--text-tertiary);
}

.bottom-nav__item {
    color: var(--text-tertiary);
}

@media (hover: hover) and (pointer: fine) {

.bottom-nav__item:hover {
    color: var(--text-primary);
}
}

.bottom-nav__label {
    color: inherit;
}

/* ==========================================================
   Card — Player Dossier
   ========================================================== */
.dossier__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    justify-content: space-between;
}

.dossier__cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--icon-label-gap);
    padding: var(--space-cell-tight) 0;
    border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.35);
    min-width: 0;
    transition: background 0.15s ease, padding-left 0.15s ease;
    border-radius: 0.25rem;
}

@media (hover: hover) and (pointer: fine) {

.dossier__cell:hover {
    background: rgba(var(--color-gold-rgb), 0.05);
    padding-left: 0.25rem;
}
}

.dossier__cell .kv-label {
    font-size: 0.625rem;
    color: var(--text-tertiary);
    letter-spacing: 0.14em;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.dossier__cell .kv-value {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dossier__cell:last-child {
    border-bottom: none;
}

/* ==========================================================
   Card — Cartel Status
   ========================================================== */
.cartel__state {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cartel__state.hidden,
.cartel__state[hidden] {
    display: none !important;
}

/* Cartel name */
.cartel__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0.125rem;
}

/* Tier line */
.cartel__tier {
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 1px;
    margin-bottom: 0.5rem;
}

/* Stats list */
.cartel__stats {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.cartel__stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem;
    padding: var(--space-cell-tight) 0;
    border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.35);
}

.cartel__stat:last-child {
    border-bottom: none;
}

.cartel__stat-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cartel__stat-label i {
    width: 1rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.625rem;
    flex-shrink: 0;
}

.cartel__stat-value {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cartel__stat:nth-child(1) .cartel__stat-value {
    color: var(--color-gold);
}

.cartel__stat:nth-child(2) .cartel__stat-value {
    color: var(--color-blue);
}

.cartel__stat:nth-child(3) .cartel__stat-value {
    color: var(--color-positive);
}

.cartel__stat:nth-child(4) .cartel__stat-value {
    color: var(--color-cash);
}

/* Footer: specialization + rank side by side */
.cartel__footer {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding-top: 0.625rem;
}

.cartel__footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.cartel__footer-col--right {
    flex: 0 0 auto;
    text-align: right;
}

.cartel__footer-col--right .cartel__rank-label {
    text-align: right;
}

.cartel__spec-label {
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cartel__specialization {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 700;
    min-width: 0;
}

.cartel__specialization i {
    font-size: 0.9375rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--color-gold);
}

.cartel__specialization span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartel__rank-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cartel__rank-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-gold);
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

/* No-cartel empty state */
.cartel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 0 0.25rem;
    gap: 0.5rem;
}

.cartel__empty-icon {
    font-size: 1.75rem;
    color: var(--text-dim);
    opacity: 0.25;
}

.cartel__empty-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0;
}

.cartel__empty-desc {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
    max-width: 13.75rem;
}

.cartel__find-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
    background: var(--bg-track);
    border: 1px solid var(--color-gold-dim);
    border-radius: var(--radius-sharp);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {

.cartel__find-btn:hover {
    background: var(--color-gold-soft);
    border-color: var(--color-gold);
    transform: translateY(-0.0625rem);
}
}

.cartel__find-btn:active {
    transform: translateY(0);
    background: rgba(var(--color-gold-rgb), 0.12);
}

.cartel__level-req {
    font-size: 0.5625rem;
    color: var(--text-tertiary);
    letter-spacing: 0.1em;
}

/* ==========================================================
   Card — Active Missions
   ========================================================== */
.mission-list {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mission-date {
    text-align: right;
    font-size: 0.5625rem;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    font-weight: 400;
    padding: 0 0 0.375rem 0;
    opacity: 0.7;
}

.mission {
    border-bottom: 1px solid rgba(var(--color-gold-rgb, 212, 175, 55), 0.12);
    padding: 0.75rem 0.625rem;
    margin: 0 -0.25rem 0.375rem -0.25rem;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.015);
    transition: background 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.mission:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(var(--color-gold-rgb, 212, 175, 55), 0.25);
}
}

.mission:first-child {
    margin-top: 0.25rem;
}

.mission:last-child {
    border-bottom: 1px solid rgba(var(--color-gold-rgb, 212, 175, 55), 0.12);
    margin-bottom: 0;
}

.mission__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.mission__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.mission__rewards {
    display: flex;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mission__reward-cash {
    color: #2ecc71;
    font-weight: 700;
    background: rgba(46, 204, 113, 0.08);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(46, 204, 113, 0.25);
}

.mission__reward-xp {
    color: #60a5fa;
    font-weight: 600;
    background: rgba(96, 165, 250, 0.08);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.mission__progress {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.mission__progress .stat-track {
    flex: 1;
    margin-top: 0;
    height: 0.375rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 999px;
}

.mission__meta {
    font-size: 0.625rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    min-width: 3rem;
    text-align: right;
}

.mission__desc {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    line-height: 1.45;
    margin-top: 0.375rem;
    padding-right: 0.25rem;
    letter-spacing: 0.01em;
}

.mission__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    gap: 0.625rem;
}

.mission__status {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mission__status--active {
    color: var(--text-tertiary);
}

.mission__status--complete {
    color: #2ecc71;
    text-shadow: 0 0 6px rgba(46, 204, 113, 0.3);
}

.mission__status--claimed {
    color: var(--text-dim);
}

/* ── Mission buttons (uses .btn .btn--success .btn--sm) ── */
.mission__footer .btn {
    height: 1.625rem !important;
    min-height: 1.625rem !important;
    max-height: 1.625rem !important;
    padding: 0 0.625rem !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex-shrink: 0;
}

/* ── Missions Refresh Button ── */
.mission__refresh-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

@media (hover: hover) and (pointer: fine) {

.mission__refresh-btn:hover:not(:disabled) {
    color: var(--color-gold);
    border-color: var(--color-gold-dim);
    background: rgba(var(--color-gold-rgb), 0.1);
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.08);
}
}

.mission__refresh-btn:active:not(:disabled) i {
    transform: rotate(180deg);
}

.mission__refresh-btn i {
    transition: transform 0.3s ease;
}

.mission__refresh-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ── Tooltip (fixed-position JS-driven) ── */
.mission__refresh-tooltip {
    position: fixed;
    z-index: 10000;
    white-space: nowrap;
    background: #1a1613;
    color: var(--color-gold);
    font-size: 0.625rem;
    font-weight: 600;
    font-family: var(--font-primary);
    letter-spacing: 0.04em;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.3125rem;
    border: 1px solid rgba(var(--color-gold-rgb), 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    transform: translateY(0);
}

.mission__refresh-tooltip--visible {
    opacity: 1;
}

/* Tooltip arrow */
.mission__refresh-tooltip::after {
    content: '';
    position: absolute;
    bottom: -0.3125rem;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1613;
    pointer-events: none;
}

.mission__refresh-tooltip::before {
    content: '';
    position: absolute;
    bottom: -0.375rem;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(var(--color-gold-rgb), 0.25);
    pointer-events: none;
}

.mission--claimed {
    opacity: 0.55;
}

.mission--claimed .mission__title {
    text-decoration: line-through;
    color: var(--text-dim);
}

.stat-track__fill--green {
    background: var(--color-green);
    box-shadow: 0 0 8px rgba(var(--color-green-rgb, 46, 160, 67), var(--glass-glow-opacity));
}

.card__action {
    margin: 0.875rem auto 0;
    padding: 0.6875rem 0.875rem;
    display: block;
    background: var(--bg-track);
    border: 1px solid var(--border-color);
    color: var(--color-gold);
    font-size: 0.625rem;
    letter-spacing: 0.26em;
    font-weight: 700;
    border-radius: var(--radius-sharp);
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform var(--touch-press-speed) ease,
        filter var(--touch-press-speed) ease;
    text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {

.card__action:hover {
    background: var(--color-gold-soft);
    border-color: var(--color-gold-dim);
}
}

/* ==========================================================
   Card — Skill Profile
   ========================================================== */
.skill__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem 0.25rem 0.25rem;
    width: 100%;
    box-sizing: border-box;
}

.cp-summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.35) 100%);
    border: 1px solid rgba(var(--color-gold-rgb, 212, 175, 55), 0.18);
    border-radius: 0.5rem;
    box-sizing: border-box;
}

.cp-rating {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.cp-rating__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background: rgba(var(--color-gold-rgb, 212, 175, 55), 0.08);
    border: 1px solid rgba(var(--color-gold-rgb, 212, 175, 55), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: var(--color-gold, #d4af37);
    flex-shrink: 0;
}

.cp-rating__label {
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--text-tertiary, #888);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
}

.cp-rating__value {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-gold, #d4af37);
    line-height: 1.1;
    display: block;
    font-variant-numeric: tabular-nums;
}

.cp-tier {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1875rem;
}

.cp-tier__label {
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--text-tertiary, #888);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cp-tier__badge {
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    background: rgba(var(--color-gold-rgb, 212, 175, 55), 0.1);
    color: var(--color-gold, #d4af37);
    border: 1px solid rgba(var(--color-gold-rgb, 212, 175, 55), 0.25);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.skill__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.375rem;
}

.skill__list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.375rem;
    background: rgba(var(--color-gold-rgb), 0.06);
    border: 1px solid rgba(var(--color-gold-rgb), 0.25);
    border-radius: var(--radius-sharp);
    min-width: 0;
    text-align: center;
}

.skill__list .kv-label {
    font-size: 0.5rem;
    letter-spacing: 0.14em;
}

.skill__list .kv-value {
    font-size: 0.8125rem;
    text-align: center;
}

/* ==========================================================
   Card — Empire Overview
   ========================================================== */
.empire__chart {
    aspect-ratio: 16 / 9;
    width: 100%;
    position: relative;
    min-height: 12.5rem;
}

.empire__chart canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ==========================================================
   Card — Operations Log
   ========================================================== */
.terminal {
    background: var(--bg-viewport);
    border: 1px solid var(--border-color-soft);
    border-radius: var(--radius-sharp);
    padding: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 15rem;
    overflow-y: auto;
    line-height: 1.55;
}

.terminal__row {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.terminal__time {
    color: var(--color-gold);
    font-weight: 500;
    flex-shrink: 0;
}

.terminal__bullet {
    flex-shrink: 0;
}

.terminal__text {
    flex: 1;
    min-width: 0;
}

.chat-bar {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.75rem;
    background: var(--bg-track);
    border: 1px solid var(--border-color-soft);
    font-size: 0.625rem;
    letter-spacing: 0.26em;
    font-weight: 700;
    border-radius: var(--radius-sharp);
    transition:
        color 0.15s ease,
        background 0.15s ease,
        transform var(--touch-press-speed) ease,
        filter var(--touch-press-speed) ease;
    text-transform: uppercase;
    width: 100%;
}

@media (hover: hover) and (pointer: fine) {

.chat-bar:hover {
    background: var(--bg-elevated);
}
}

/* ==========================================================
   DASHBOARD ENHANCEMENTS — Micro-interactions & Animations
   ========================================================== */

/* ── Staggered card entry animation ── */
.dashboard>.dashboard__pair,
.dashboard>details.card {
    animation: dashCardIn 0.5s ease both;
}

.dashboard__pair:nth-child(1) {
    animation-delay: 0.05s;
}

.dashboard__pair:nth-child(2) {
    animation-delay: 0.15s;
}

details.card--empire {
    animation-delay: 0.25s;
}

details.card--log {
    animation-delay: 0.35s;
}

@keyframes dashCardIn {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Dossier cell hover — left accent glow ── */
.dossier__cell {
    transition: opacity 0.2s, transform 0.2s;
    padding-left: 0.25rem;
    margin-left: -0.25rem;
    border-radius: 0.1875rem;
}

@media (hover: hover) and (pointer: fine) {

.dossier__cell:hover {
    background: rgba(var(--color-gold-rgb), 0.04);
    padding-left: 0.5rem;
}
}

@media (hover: hover) and (pointer: fine) {

.dossier__cell:hover .kv-label {
    color: var(--text-primary);
}
}

/* ── Cartel stat hover — left accent glow ── */
.cartel__stat {
    transition: opacity 0.2s, transform 0.2s;
    padding-left: 0.25rem;
    margin-left: -0.25rem;
    border-radius: 0.1875rem;
}

@media (hover: hover) and (pointer: fine) {

.cartel__stat:hover {
    background: rgba(var(--color-gold-rgb), 0.04);
    padding-left: 0.5rem;
}
}

@media (hover: hover) and (pointer: fine) {

.cartel__stat:hover .cartel__stat-label {
    color: var(--text-primary);
}
}

/* ── Terminal log entry fade-in ── */
.terminal__row {
    animation: termLineIn 0.3s ease both;
}

@keyframes termLineIn {
    from {
        opacity: 0;
        transform: translateX(-0.375rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Mission progress bar pulse when near completion ── */
.mission__progress .stat-track__fill {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Card top accent glow line ── */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--color-gold-rgb), 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {

.card:hover::before {
    opacity: 1;
}
}

/* ── Hero overlay subtle ambient animation ── */
.hero__overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(var(--color-gold-rgb), 0.02) 0%, transparent 60%);
    pointer-events: none;
    animation: heroAmbient 6s ease-in-out infinite;
}

@keyframes heroAmbient {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* ── Empire chart select hover ── */
@media (hover: hover) and (pointer: fine) {
.card__select:hover {
    border-color: var(--color-gold-dim);
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.06);
}
}

/* ── Chat bar hover glow ── */
@media (hover: hover) and (pointer: fine) {
.chat-bar:hover {
    border-color: rgba(var(--color-gold-rgb), 0.15);
    box-shadow: 0 0 12px rgba(var(--color-gold-rgb), 0.04);
}
}

/* ── Combat power hover scale (parent card) ── */
.cp-summary {
    transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {

.card--skill:hover .cp-summary {
    transform: scale(1.02);
}
}

/* ==========================================================
   Scrollbar
   ========================================================== */
::-webkit-scrollbar {
    width: 0.375rem;
    height: 0.375rem;
}

::-webkit-scrollbar-track {
    background: var(--bg-viewport);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

@media (hover: hover) and (pointer: fine) {

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-dim);
}
}

/* ==========================================================
   Premium Overhauled PBBG Skill Card Styles
   ========================================================== */
.skill-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
    width: 100%;
}

/* Individual rectangular stat cards */
.skill-card {
    background: linear-gradient(145deg, rgba(24, 20, 16, 0.95) 0%, rgba(14, 12, 10, 0.98) 100%);
    border: 1px solid rgba(var(--color-gold-rgb, 212, 175, 55), 0.15);
    border-radius: var(--radius-ui);
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.375rem;
    min-height: 5.5rem;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* Diagonal glass sheen highlight */
.skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), transparent);
    pointer-events: none;
}

/* Stat card hover states */
@media (hover: hover) and (pointer: fine) {
.skill-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}
}

@media (hover: hover) and (pointer: fine) {

.skill-card--strength:hover {
    border-color: rgba(243, 156, 18, 0.45);
    box-shadow: 0 0 14px rgba(243, 156, 18, 0.15), 0 6px 18px rgba(0, 0, 0, 0.6);
}
}

@media (hover: hover) and (pointer: fine) {

.skill-card--guard:hover {
    border-color: rgba(46, 204, 113, 0.45);
    box-shadow: 0 0 14px rgba(46, 204, 113, 0.15), 0 6px 18px rgba(0, 0, 0, 0.6);
}
}

@media (hover: hover) and (pointer: fine) {

.skill-card--agility:hover {
    border-color: rgba(52, 152, 219, 0.45);
    box-shadow: 0 0 14px rgba(52, 152, 219, 0.15), 0 6px 18px rgba(0, 0, 0, 0.6);
}
}

@media (hover: hover) and (pointer: fine) {

.skill-card--precision:hover {
    border-color: rgba(231, 76, 60, 0.45);
    box-shadow: 0 0 14px rgba(231, 76, 60, 0.15), 0 6px 18px rgba(0, 0, 0, 0.6);
}
}

/* Card Header: Icon + Label + Level Badge */
.skill-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.skill-card__icon {
    font-size: 0.8125rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.3125rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.skill-card--strength .skill-card__icon {
    color: #f39c12;
    background: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.25);
}

.skill-card--guard .skill-card__icon {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.25);
}

.skill-card--agility .skill-card__icon {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.25);
}

.skill-card--precision .skill-card__icon {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.25);
}

.skill-card__label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-secondary, #c4bfb4);
    text-transform: uppercase;
}

/* Card Body: Numeric value */
.skill-card__body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.125rem 0;
}

.skill-card__value {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {

.skill-card:hover .skill-card__value {
    color: var(--color-gold, #d4af37);
}
}

/* Card Footer: Progress Bar + Badge */
.skill-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.skill-card__footer .skill-progress {
    flex: 1;
    margin: 0;
    height: 0.3125rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.skill-badge {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    line-height: 1.2;
    flex-shrink: 0;
}

.skill-card--strength .skill-progress__fill {
    background: #f39c12;
    box-shadow: 0 0 6px rgba(243, 156, 18, 0.5);
}
.skill-card--guard .skill-progress__fill {
    background: #2ecc71;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.5);
}
.skill-card--agility .skill-progress__fill {
    background: #38bdf8;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}
.skill-card--precision .skill-progress__fill {
    background: #e74c3c;
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.5);
}

/* Heist stat card hover states */
@media (hover: hover) and (pointer: fine) {
.skill-card--command:hover {
    border-color: rgba(var(--color-gold-rgb), 0.4);
    box-shadow: 0 0 16px rgba(var(--color-gold-rgb), 0.12), 0 8px 24px rgba(0, 0, 0, 0.6);
}
}

@media (hover: hover) and (pointer: fine) {

.skill-card--intimidation:hover {
    border-color: rgba(233, 69, 96, 0.4);
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.12), 0 8px 24px rgba(0, 0, 0, 0.6);
}
}

@media (hover: hover) and (pointer: fine) {

.skill-card--stealth:hover {
    border-color: rgba(108, 99, 255, 0.4);
    box-shadow: 0 0 16px rgba(108, 99, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.6);
}
}

@media (hover: hover) and (pointer: fine) {

.skill-card--connections:hover {
    border-color: rgba(46, 204, 113, 0.4);
    box-shadow: 0 0 16px rgba(46, 204, 113, 0.12), 0 8px 24px rgba(0, 0, 0, 0.6);
}
}

@media (hover: hover) and (pointer: fine) {

.skill-card--driving:hover {
    border-color: rgba(52, 152, 219, 0.4);
    box-shadow: 0 0 16px rgba(52, 152, 219, 0.12), 0 8px 24px rgba(0, 0, 0, 0.6);
}
}

@media (hover: hover) and (pointer: fine) {

.skill-card--hacking:hover {
    border-color: rgba(0, 255, 136, 0.4);
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.12), 0 8px 24px rgba(0, 0, 0, 0.6);
}
}

@media (hover: hover) and (pointer: fine) {

.skill-card--lockpicking:hover {
    border-color: rgba(255, 159, 28, 0.4);
    box-shadow: 0 0 16px rgba(255, 159, 28, 0.12), 0 8px 24px rgba(0, 0, 0, 0.6);
}
}

@media (hover: hover) and (pointer: fine) {

.skill-card--perception:hover {
    border-color: rgba(0, 188, 212, 0.4);
    box-shadow: 0 0 16px rgba(0, 188, 212, 0.12), 0 8px 24px rgba(0, 0, 0, 0.6);
}
}

/* Card Header: Icon + Name */
.skill-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.skill-card__icon {
    font-size: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.skill-card--strength .skill-card__icon {
    color: var(--color-orange);
    text-shadow: 0 0 6px rgba(243, 156, 18, 0.5);
}

.skill-card--guard .skill-card__icon {
    color: var(--color-positive);
    text-shadow: 0 0 6px rgba(46, 204, 113, 0.5);
}

.skill-card--agility .skill-card__icon {
    color: var(--color-blue);
    text-shadow: 0 0 6px rgba(52, 152, 219, 0.5);
}

.skill-card--precision .skill-card__icon {
    color: var(--color-rust-bright);
    text-shadow: 0 0 6px rgba(231, 76, 60, 0.5);
}

.skill-card--command .skill-card__icon {
    color: var(--color-gold);
    text-shadow: 0 0 6px rgba(var(--color-gold-rgb), 0.5);
}

.skill-card--intimidation .skill-card__icon {
    color: var(--color-danger-bright);
    text-shadow: 0 0 6px rgba(233, 69, 96, 0.5);
}

.skill-card--stealth .skill-card__icon {
    color: #6c63ff;
    text-shadow: 0 0 6px rgba(108, 99, 255, 0.5);
}

.skill-card--connections .skill-card__icon {
    color: var(--color-positive);
    text-shadow: 0 0 6px rgba(46, 204, 113, 0.5);
}

.skill-card--driving .skill-card__icon {
    color: var(--color-blue);
    text-shadow: 0 0 6px rgba(52, 152, 219, 0.5);
}

.skill-card--hacking .skill-card__icon {
    color: #00ff88;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
}

.skill-card--lockpicking .skill-card__icon {
    color: #ff9f1c;
    text-shadow: 0 0 6px rgba(255, 159, 28, 0.5);
}

.skill-card--perception .skill-card__icon {
    color: #00bcd4;
    text-shadow: 0 0 6px rgba(0, 188, 212, 0.5);
}

.skill-card__label {
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
}

/* Card Body: Huge, beautiful stat value */
.skill-card__body {
    display: flex;
    align-items: baseline;
    padding: 0.125rem 0;
}

.skill-card__value {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--white)fff;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {

.skill-card:hover .skill-card__value {
    color: var(--color-gold);
}
}

/* Card Footer: Centered skill level badge */
.skill-card__footer {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

/* ── Dashboard skeleton loaders ── */
.mission-skeleton,
.dossier-skeleton,
.cartel-skeleton,
.skill-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.5rem 0;
    width: 100%;
}

.skeleton-box {
    border-radius: 0.375rem;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(var(--color-gold-rgb), 0.1) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.skeleton-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.skeleton-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.skeleton-line {
    height: 0.625rem;
    border-radius: 0.1875rem;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(var(--color-gold-rgb), 0.12) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.skeleton-line--short {
    width: 40%;
}

.skeleton-line--medium {
    width: 65%;
}

.skeleton-line--long {
    width: 85%;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Glowing pill badges */
.skill-badge {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    font-family: var(--font-primary);
    border: 1px solid transparent;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}

.skill-badge--strength {
    background: rgba(243, 156, 18, 0.08);
    border-color: rgba(243, 156, 18, 0.2);
    color: var(--color-orange);
    text-shadow: 0 0 4px rgba(243, 156, 18, 0.4);
}

.skill-badge--guard {
    background: rgba(46, 204, 113, 0.08);
    border-color: rgba(46, 204, 113, 0.2);
    color: var(--color-positive);
    text-shadow: 0 0 4px rgba(46, 204, 113, 0.4);
}

.skill-badge--agility {
    background: rgba(52, 152, 219, 0.08);
    border-color: rgba(52, 152, 219, 0.2);
    color: var(--color-blue);
    text-shadow: 0 0 4px rgba(52, 152, 219, 0.4);
}

.skill-badge--precision {
    background: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.2);
    color: var(--color-rust-bright);
    text-shadow: 0 0 4px rgba(231, 76, 60, 0.4);
}

/* ── Skill Progress Bar ── */
.skill-progress {
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0.125rem;
    margin-top: 0.25rem;
    overflow: hidden;
}

.skill-progress__xp {
    font-size: 0.5rem;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    margin-top: 0.125rem;
    letter-spacing: 0.02em;
}

.skill-progress__fill {
    height: 100%;
    border-radius: 0.125rem;
    transition: width 0.4s ease;
    background: var(--color-gold);
}


/* ── Skill Rank Badge Colors ── */
.skill-badge--crook {
    background: rgba(150, 150, 150, 0.1);
    border-color: rgba(150, 150, 150, 0.25);
    color: var(--text-gray-999);
}

.skill-badge--hustler {
    background: rgba(52, 152, 219, 0.1);
    border-color: rgba(52, 152, 219, 0.25);
    color: var(--color-blue);
}

.skill-badge--enforcer {
    background: rgba(155, 89, 182, 0.1);
    border-color: rgba(155, 89, 182, 0.25);
    color: #9b59b6;
}

.skill-badge--boss {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.25);
    color: var(--color-positive);
}

.skill-badge--kingpin {
    background: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.25);
    color: var(--color-orange);
}

.skill-badge--don {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(var(--color-gold-rgb), 0.12));
    border-color: #ff6b35;
    color: #ff8c42;
    text-shadow: 0 0 8px rgba(255, 107, 53, 0.4);
    box-shadow: 0 0 8px rgba(255, 107, 53, 0.15), inset 0 0 8px rgba(255, 107, 53, 0.05);
}


/* ==========================================================
   Custom Select (div-based) — Unified dropdown
   Auto-applied by custom-select.js. Replaces native <select>
   elements site-wide with polished, accessible dropdowns.
   ========================================================== */


/* ==========================================================
   g-select — Global shared custom select component
   Single source of truth for all dropdowns site-wide.
   ========================================================== */
.g-select {
    position: relative;
    user-select: none;
    width: 100%;
}

.g-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    padding: 0.4375rem 0.625rem;
    background: linear-gradient(180deg, rgba(40, 32, 24, 0.85), rgba(20, 16, 12, 0.92));
    border: 1px solid rgba(196, 136, 60, 0.15);
    border-radius: 0.375rem;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    min-height: 1.9375rem;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

@media (hover: hover) and (pointer: fine) {

.g-select__trigger:hover {
    border-color: rgba(196, 136, 60, 0.35);
    background: linear-gradient(180deg, rgba(50, 40, 30, 0.9), rgba(26, 20, 16, 0.95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
}
}

.g-select--open .g-select__trigger,
.g-select__trigger:focus-visible {
    border-color: var(--color-gold);
    box-shadow: 0 0 14px rgba(var(--color-gold-rgb), 0.15), inset 0 0 10px rgba(var(--color-gold-rgb), 0.05), inset 0 1px 0 rgba(var(--color-gold-rgb), 0.06);
    background: linear-gradient(180deg, rgba(50, 38, 22, 0.92), rgba(24, 18, 12, 0.96));
}

.g-select__chevron {
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    color: rgba(196, 136, 60, 0.7);
    transition: transform 0.25s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.g-select--open .g-select__chevron {
    transform: rotate(180deg);
    color: var(--color-gold);
}

.g-select__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.g-select__dropdown {
    display: none;
    position: fixed;
    z-index: 10000;
    background: #1a1613;
    border: 1px solid rgba(196, 136, 60, 0.25);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--color-gold-rgb), 0.06);
    overflow: hidden;
    animation: gSelectDropdownIn 0.15s ease;
}

@keyframes gSelectDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-0.375rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.g-select--open {
    z-index: 1000;
}
.g-select--open .g-select__dropdown {
    display: block;
}

/* Shared module dropdowns (custom-select.js) must float above the page.
   Page CSS (e.g. cartel.css) redefines .g-select__dropdown to absolute/z-50,
   which clips it inside overflow:hidden cards — restore fixed + high z-index. */
.g-select--shared .g-select__dropdown {
    position: fixed;
    z-index: 10000;
}

.g-select--up .g-select__dropdown {
    animation-name: gSelectDropdownUpIn;
}

@keyframes gSelectDropdownUpIn {
    from {
        opacity: 0;
        transform: translateY(0.375rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.g-select__option {
    padding: 0.5rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (hover: hover) and (pointer: fine) {

.g-select__option:hover {
    background: rgba(var(--color-gold-rgb), 0.08);
    color: var(--text-primary);
}
}

.g-select__option--selected {
    color: var(--color-gold);
    background: rgba(var(--color-gold-rgb), 0.05);
}

.g-select__option--selected::before {
    content: '\2713';
    font-size: 0.625rem;
    color: var(--color-gold);
    flex-shrink: 0;
    width: 0.875rem;
    text-align: center;
}

.g-select__option:first-child {
    border-radius: 0.4375rem 0.4375rem 0 0;
}

.g-select__option:last-child {
    border-radius: 0 0 0.4375rem 0.4375rem;
}

.g-select__option+.g-select__option {
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.g-select__search {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    position: sticky;
    top: 0;
    background: #1a1613;
    z-index: 1;
}

.g-select__search-input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(196, 136, 60, 0.12);
    border-radius: 0.25rem;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    outline: none;
    box-sizing: border-box;
}

.g-select__search-input:focus {
    border-color: var(--color-gold);
}


/* ==========================================================
   Unified Form Classes — ensure per-page form elements match
   the global hits-reference design. Overrides per-page CSS.
   ========================================================== */

/* ── Per-page select overrides ── */
.market-select,
.inv-sort,
.cartel-filters__select {
    padding: 0.4375rem 1.75rem 0.4375rem 0.625rem !important;
    background:
        linear-gradient(180deg, rgba(40, 32, 24, 0.85) 0%, rgba(20, 16, 12, 0.92) 100%) !important;
    border: 1px solid rgba(196, 136, 60, 0.15) !important;
    border-radius: 0.375rem !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
    min-height: 1.9375rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important;
    min-width: 6.25rem !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(196,136,60,0.7)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 10px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    box-sizing: border-box !important;
}

@media (hover: hover) and (pointer: fine) {

.market-select:hover,
.inv-sort:hover,
.cartel-filters__select:hover {
    border-color: rgba(196, 136, 60, 0.35) !important;
    background:
        linear-gradient(180deg, rgba(50, 40, 30, 0.9) 0%, rgba(26, 20, 16, 0.95) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.25) !important;
}
}

.market-select:focus,
.inv-sort:focus,
.cartel-filters__select:focus {
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 14px rgba(var(--color-gold-rgb), 0.15) !important;
    background:
        linear-gradient(180deg, rgba(50, 38, 22, 0.92) 0%, rgba(24, 18, 12, 0.96) 100%) !important;
}

.market-select option,
.inv-sort option,
.cartel-filters__select option {
    background: #1a1613 !important;
    color: var(--text-primary) !important;
}

/* ── Bank input (has icon offset) ── */
.bank__input {
    border: 1px solid rgba(196, 136, 60, 0.12) !important;
    border-radius: 0.375rem !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    box-sizing: border-box !important;
}

.bank__input:focus {
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.1), inset 0 0 8px rgba(var(--color-gold-rgb), 0.04) !important;
}

.bank__input::placeholder {
    color: var(--text-dim) !important;
    font-size: 0.8125rem !important;
}

/* ── Bank dropdown ── */
.bank__dropdown-btn {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(196, 136, 60, 0.12) !important;
    border-radius: 0.375rem !important;
    color: var(--text-primary) !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

@media (hover: hover) and (pointer: fine) {

.bank__dropdown-btn:hover {
    border-color: rgba(196, 136, 60, 0.35) !important;
}
}

.bank__dropdown-menu {
    background: #1a1613 !important;
    border: 1px solid rgba(196, 136, 60, 0.25) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

@media (hover: hover) and (pointer: fine) {

.bank__dropdown-item:hover {
    background: rgba(var(--color-gold-rgb), 0.08) !important;
    color: var(--text-primary) !important;
}
}

/* ==========================================================
   Custom Select (cs-*) — Reusable div-based dropdowns
   ========================================================== */
.cs-wrapper {
    position: relative;
    user-select: none;
}

/* Hide native select when wrapper is present */
select[data-custom-select-processed] {
    display: none !important;
}

.cs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    padding: 0.4375rem 0.625rem;
    background:
        linear-gradient(180deg, rgba(40, 32, 24, 0.85) 0%, rgba(20, 16, 12, 0.92) 100%);
    border: 1px solid rgba(196, 136, 60, 0.15);
    border-radius: 0.375rem;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    min-height: 1.9375rem;
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

@media (hover: hover) and (pointer: fine) {

.cs-trigger:hover {
    border-color: rgba(196, 136, 60, 0.35);
    background:
        linear-gradient(180deg, rgba(50, 40, 30, 0.9) 0%, rgba(26, 20, 16, 0.95) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.25);
}
}

.cs--open .cs-trigger,
.cs-trigger:focus-visible {
    border-color: var(--color-gold);
    box-shadow:
        0 0 14px rgba(var(--color-gold-rgb), 0.15),
        inset 0 0 10px rgba(var(--color-gold-rgb), 0.05),
        inset 0 1px 0 rgba(var(--color-gold-rgb), 0.06);
    background:
        linear-gradient(180deg, rgba(50, 38, 22, 0.92) 0%, rgba(24, 18, 12, 0.96) 100%);
}

.cs-chevron {
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    color: rgba(196, 136, 60, 0.7);
    transition: transform 0.25s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs--open .cs-chevron {
    transform: rotate(180deg);
    color: var(--color-gold);
}

.cs-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdown panel */
.cs-dropdown {
    display: none;
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    background: #1a1613;
    border: 1px solid rgba(196, 136, 60, 0.25);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--color-gold-rgb), 0.06);
    overflow: hidden;
    animation: csDropdownIn 0.15s ease;
}

@keyframes csDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-0.375rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cs--open .cs-dropdown {
    display: block;
}

/* Open upward */
.cs--up .cs-dropdown {
    top: auto;
    bottom: calc(100% + 0.25rem);
    animation-name: csDropdownUpIn;
}

@keyframes csDropdownUpIn {
    from {
        opacity: 0;
        transform: translateY(0.375rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Options */
.cs-option {
    padding: 0.5rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (hover: hover) and (pointer: fine) {

.cs-option:hover {
    background: rgba(var(--color-gold-rgb), 0.08);
    color: var(--text-primary);
}
}

.cs-option--selected {
    color: var(--color-gold);
    background: rgba(var(--color-gold-rgb), 0.05);
}

.cs-option--selected::before {
    content: '\2713';
    font-size: 0.625rem;
    color: var(--color-gold);
    flex-shrink: 0;
    width: 0.875rem;
    text-align: center;
}

.cs-option:first-child {
    border-radius: 0.4375rem 0.4375rem 0 0;
}

.cs-option:last-child {
    border-radius: 0 0 0.4375rem 0.4375rem;
}

.cs-option+.cs-option {
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* ═══════════════════════════════════════════════
   GLOBAL: Loading Spinner & Fade-In
   Used by hospital, gym, jail pages (shared across pages)
   ═══════════════════════════════════════════════ */

/* ── Full-container loading overlay ── */
.page-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3.75rem 0;
    background: rgba(15, 11, 8, 0.85);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: inherit;
}

.page-loading-overlay__spinner {
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid rgba(var(--color-gold-rgb), 0.1);
    border-top-color: var(--color-gold);
    border-radius: 50%;
    animation: pg-spin 0.7s linear infinite;
}

.page-loading-overlay__text {
    font-size: 0.625rem;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
    font-weight: 600;
}

@keyframes pg-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pg-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(0.375rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pg-fade-in {
    animation: pg-fadeInUp 0.35s ease-out;
}

/* Responsive adjustment for extra compact mobile screens */
@media (max-width: 479.98px) {
    .skill-card-grid {
        gap: 0.5rem;
    }

    .skill-card {
        padding: 0.625rem 0.75rem;
        min-height: 5.9375rem;
    }

    .skill-card__value {
        font-size: 1.25rem;
    }
}

/* ==========================================================
   Tablet 640–1023px — bump header/dashboard density between phone and desktop
   ========================================================== */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .topbar__meta {
        padding: 0.5rem 0 0.5625rem;
    }

    .topbar__primary-row .topbar__wallet {
        padding-right: 0.5rem;
    }

    .main {
        /* Slightly taller bottom nav tap targets on tablet */
        padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0));
    }

    .player-card__name {
        font-size: 0.875rem;
    }

    .player-card__rank {
        font-size: 0.5rem;
    }

    .wallet-chip__icon {
        width: 0.75rem;
        height: 0.75rem;
        vertical-align: middle;
    }

    .wallet-chip__value {
        font-size: 0.6875rem;
    }

    .wallet-chip__label {
        font-size: 0.4375rem;
    }
}

/* Shared tablet+ upgrades (applies through desktop unless overridden below) */
@media (min-width: 640px) {
    .hero {
        min-height: 13.75rem;
        /* Hero grows once there is horizontal room */
    }

    .hero__overlay {
        min-height: 13.75rem;
    }

    .hero__title {
        font-size: 1.75rem;
    }

    .dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.875rem;
    }

    .dashboard__pair {
        gap: 0.875rem;
    }

}

/* ==========================================================
   Desktop ≥ 1024px — sidebar + 3-column dashboard
   Accordions are forced open by JS; chevrons hidden below.
   ========================================================== */
@media (min-width: 1024px) {

    /* Hide settings link in desktop sidebar (already accessible via header gear icon) */
    .sidebar .nav__link[href*="settings.html"] {
        display: none !important;
    }

    /* Responsive desktop boundaries: Optimized for native 100% zoom to prevent horizontal clipping */
    .app {
        --desktop-gutter: 1.125rem;
        --desktop-sidebar: 15rem;
        --desktop-col-gap: 0.75rem;
        display: grid;
        grid-template-columns: var(--desktop-sidebar) minmax(auto, 1fr);
        min-height: 100vh;
        min-height: 100dvh;
        /* Cap the whole layout at 1920px so ultra-wide monitors don't stretch content; center with symmetric gutters. */
        max-width: 120rem;
        margin-inline: auto;
    }

    /* One grid for the main column — stable 3-up cards, hero spans cols 1–2 (reference layout) */
    .main {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--desktop-col-gap);
        row-gap: var(--desktop-col-gap);
        align-content: start;
        min-width: auto;
        max-width: 100%;
        padding: 0 var(--desktop-gutter) var(--desktop-gutter);
        box-sizing: border-box;
    }

    /* Desktop page container padding */
    .page-container {
        padding: 0 var(--desktop-gutter) var(--desktop-gutter);
    }

    .topbar-cluster {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    #page-content,
    .page-heading,
    #status-banner,
    .streets-container,
    .hospital-container,
    .hits-container,
    .blackmarket-container,
    .market-container,
    .smug-layout,
    .cartel-page,
    .casino-hub,
    .travel-page,
    .tutorial-page,
    .inv-container,
    .ss-store,
    .forum-page,
    .council,
    .online-users-container {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }



    /* Dynamic Heights Reset: Cards wrap to content, Live Feed box utilizes bounded internal overflow scrolling */
    .hero-feed-row {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
        align-items: stretch;
        margin-top: 0;
        margin-bottom: 1.25rem;
    }

    .hero-feed-row .hero {
        margin: 0;
        width: 100%;
        max-width: none;
        min-height: 0;
    }

    .hero-feed-row .hero__overlay {
        min-height: 0;
        height: 100%;
    }

    .dashboard {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    /* Sidebar — static column */
    .sidebar {
        display: flex;
        position: sticky;
        top: 0;
        grid-column: 1;
        width: 100%;
        max-width: var(--desktop-sidebar);
        height: 100vh;
        height: 100dvh; /* tracks mobile chrome changes during DevTools resize */
        transform: none;
        box-shadow: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        overscroll-behavior-y: contain;
    }

    .sidebar-backdrop {
        display: none;
    }

    .sidebar__close {
        display: none;
    }

    .sidebar .brand {
        padding: 1rem var(--desktop-gutter) 0.875rem;
    }

    .sidebar .brand__mark {
        font-size: 1.375rem;
    }

    .sidebar .brand__name {
        font-size: 0.5rem;
        width: 100%;
    }


    .sidebar .brand__location {
        margin-top: 0.375rem;
        font-size: 0.75rem;
        color: var(--text-secondary);
        letter-spacing: 0.03em;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .sidebar .brand__location i {
        color: var(--color-gold);
        font-size: 0.6875rem;
    }

    .sidebar .brand__location--traveling {
        color: var(--color-caution);
    }

    .sidebar .brand__location--traveling i {
        color: var(--color-caution);
    }

    .sidebar .nav {
        padding: 0 0 1.125rem;
    }

    .sidebar .nav__section {
        padding: 0.875rem var(--desktop-gutter) 0.375rem;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        font-weight: 600;
        font-family: var(--font-sans);
    }

    .sidebar .nav__link {
        padding: 0.625rem var(--desktop-gutter);
        font-size: 0.6875rem;
        letter-spacing: 0.14em;
    }

    /* Identity | wallet | XP + 4 vitals in one horizontal command strip */
    .topbar__shell {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        padding: 0;
        gap: 0;
        min-width: 0;
        width: 100%;
    }

    .topbar__meta {
        display: flex;
        flex: 0 1 auto;
        align-items: center;
        padding: 0.3125rem 0.75rem 0.3125rem 0;
        border-bottom: none;
        border-right: 1px solid var(--border-color);
        gap: 0.25rem;
        min-width: 0;
    }

    .topbar__meta-body {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.375rem;
        flex: 1;
        min-width: 0;
    }

    /* Grid: [player-col (avatar+XP) | wallet] */
    .topbar__primary-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto;
        gap: 0.375rem;
        flex: 1 1 auto;
        min-width: 0;
    }

    .topbar__player-col {
        grid-column: 1;
        grid-row: 1;
    }

    .topbar__primary-row .topbar__wallet {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

    .topbar__identity-row {
        grid-column: unset;
        grid-row: unset;
        flex: 0 0 auto;
    }

    .topbar__identity-row .player-card {
        padding: 0.125rem 0.5rem;
    }

    .player-card {
        gap: 0.375rem;
    }

    /* Vault grouping — stacked cash + crystals */
    .topbar-cluster .topbar__wallet {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 0.25rem;
        flex: 0 0 auto;
        min-width: 7.5rem;
        border-top: none;
        margin: 0;
        border-radius: var(--radius-ui);
        padding: 0.25rem 0.875rem;
    }

    .wallet-time {
        display: none;
    }

    .topbar__mini-hud {
        display: none;
    }

    .wallet-group {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        width: 100%;
    }

    .wallet-group:first-child {
        flex-direction: column;
        gap: 0.25rem;
    }

    .wallet-group:first-child .wallet-chip {
        flex: none;
    }

    .wallet-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
        flex: 1;
        width: 100%;
    }

    .wallet-item .wallet-chip {
        width: 100%;
    }

    .wallet-item .wallet-chip__label {
        display: none;
    }

    .hud-group--vitals::before,
    .hud-group--vitals::after {
        display: none;
    }

    .hud-group--vitals .hud-stat__icon {
        width: 1rem;
        height: 1rem;
        font-size: 0.5rem;
    }

    .topbar__meta-body .hud-stat--xp .hud-stat__icon {
        width: 0.875rem;
        height: 0.875rem;
        font-size: 0.4375rem;
    }

    .topbar__hud {
        display: grid;
        flex: 1 1 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.375rem;
        align-items: center;
        padding: 0.25rem 0.5rem;
        min-width: 0;
    }

    .topbar__hud .hud-stat[data-stat="energy"] {
        order: 1;
    }

    .topbar__hud .hud-stat[data-stat="stamina"] {
        order: 2;
    }

    .topbar__hud .hud-stat[data-stat="nerves"] {
        order: 3;
    }

    .topbar__hud .hud-stat[data-stat="health"] {
        order: 4;
    }

    .topbar__meta-body .hud-stat--xp {
        flex: 0 1 auto;
        min-width: 10rem;
        padding: 0.375rem 0.625rem;
    }

    /* Vitals flatten into the 4-column HUD row — overrides mobile 2×2 scrollable grid */
    .topbar__hud .hud-group--vitals {
        display: contents;
    }

    .hud-group--vitals {
        display: contents;
    }

    /* Wallet chips inside wallet-item: icon left, value right */
    .wallet-item .wallet-chip {
        flex-direction: row;
        gap: 0.375rem;
        padding: 0.375rem 0.25rem;
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
    }

    .wallet-item .wallet-chip__label {
        font-size: 0.5rem;
    }

    .wallet-item .wallet-chip__icon {
        width: 0.75rem;
        height: 0.75rem;
        vertical-align: middle;
    }

    .wallet-chip__value {
        font-size: 0.75rem;
        display: inline-block;
    }

    .topbar-cluster .player-card {
        gap: var(--icon-label-gap);
        align-items: center;
    }

    .topbar-cluster .hud-stat__head {
        align-items: center;
        gap: var(--icon-label-gap);
    }

    .wallet-chip__label {
        display: block;
        font-size: 0.5rem;
        letter-spacing: 0.2em;
    }

    .wallet-chip__icon {
        width: 0.75rem;
        height: 0.75rem;
        vertical-align: middle;
    }

    .wallet-chip__value {
        font-size: 0.75rem;
    }

    .wallet-chip i,
    .wallet-chip .wallet-chip__icon {
        font-size: 0.875rem;
    }

    .hud-stat {
        min-width: 0;
        padding: 0.25rem 0.75rem;
        gap: 0.25rem;
    }

    /* Shorter vitals */
    .hud-group--vitals .hud-stat {
        padding-block: 0;
        gap: 0;
    }

    .hud-stat__icon {
        width: 0.875rem;
        height: 0.875rem;
        font-size: 0.4375rem;
    }

    .hud-stat__label {
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
    }

    .hud-stat__timer {
        font-size: 0.4375rem;
    }

    .hud-stat__value {
        font-size: 0.625rem;
        padding-left: 0;
    }

    .topbar-cluster .stat-track {
        height: 0.1875rem;
        margin-top: 0.125rem;
    }

    .topbar-cluster .player-card {
        padding: 0.25rem 0.625rem;
        flex: 0 1 auto;
        min-width: 0;
    }

    .player-card__avatar {
        width: 1.875rem;
        height: 1.875rem;
        font-size: 0.75rem;
    }

    .player-card__avatar .status-dot {
        top: -0.1875rem;
        right: -0.1875rem;
        width: 0.5rem;
        height: 0.5rem;
    }

    .player-card__name {
        font-size: 0.75rem;
    }

    .player-card__rank {
        font-size: 0.5625rem;
    }

    body {
        font-size: 0.9375rem;
    }

    /* Hero — width from .main grid (cols 1–2); height tuned for 100% zoom */
    .hero__overlay {
        min-height: 10.5rem;
        padding: 1.25rem 1.5rem;
    }

    .hero {
        min-height: 10.5rem;
    }

    .hero__title {
        font-size: 1.75rem;
    }

    .hero__kicker {
        font-size: 0.625rem;
    }

    .hero__tribute {
        font-size: 0.625rem;
        padding: 0.5625rem 0.875rem;
    }

    /* Dashboard — fixed 3 columns (no auto-fit reflow); order = Dossier · Faction · Missions / Skill · Empire · Log */
    .dashboard {
        padding: var(--desktop-col-gap) 0 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--desktop-col-gap);
    }

    /* Streets page needs 3-col grid even before streets.css loads (SPA dynamic CSS race) */
    .streets-container .dashboard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.875rem;
    }

    .dashboard__pair--top {
        display: flex;
        align-items: stretch;
        flex-direction: row;
        grid-column: 1 / 3;
        gap: var(--desktop-col-gap);
        min-width: 0;
    }

    .dashboard__pair--top>.card--dossier {
        flex: 1;
        min-width: 0;
    }

    .dashboard__pair--top>.card--faction {
        flex: 2;
        min-width: 0;
    }

    .card {
        padding: 0.625rem;
    }

    .card-header {
        font-size: 0.6875rem;
        padding-bottom: 0.5rem;
        margin-bottom: 0.625rem;
        gap: 0.5rem;
    }

    .card-header i {
        font-size: 0.75rem;
    }

    .card__select {
        font-size: 0.5625rem;
        padding: 0.1875rem 0.4375rem;
    }

    .card__action {
        font-size: 0.625rem;
        padding: 0.5625rem 0.75rem;
        margin-top: 0.625rem;
    }

    .kv-label {
        font-size: 0.625rem;
    }

    .kv-value {
        font-size: 0.8125rem;
    }

    .dossier__cell {
        padding: 0.5rem 0;
    }

    .mission {
        padding: 0.5rem 0;
    }

    .mission__title {
        font-size: 0.8125rem;
    }

    .mission__rewards {
        font-size: 0.6875rem;
    }

    .mission__meta {
        font-size: 0.625rem;
        min-width: 0;
    }

    .skill__list .kv-label {
        font-size: 0.5rem;
    }

    .skill__list .kv-value {
        font-size: 0.6875rem;
    }

    .empire__legend-item {
        font-size: 0.625rem;
    }

    .terminal {
        font-size: 0.75rem;
    }

    .chat-bar {
        font-size: 0.625rem;
        padding: 0.625rem;
    }

    .card--dossier {
        order: 1;
    }

    .card--faction {
        order: 2;
    }

    .dashboard__pair--middle {
        display: flex;
        flex-direction: row;
        grid-column: 1 / 3;
        grid-row: 2;
        gap: var(--desktop-col-gap);
        min-width: 0;
        padding-top: 0.5rem;
    }

    .dashboard__pair--middle>.card--missions {
        flex: 1.25;
        min-width: 0;
    }

    .dashboard__pair--middle>.card--skill {
        flex: 1.75;
        min-width: 0;
    }

    .card--empire {
        order: 5;
        align-self: start;
    }

    .card--log {
        order: 6;
        align-self: start;
    }

    .skill__body {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .cp-summary {
        width: 100%;
        flex: 0 0 auto;
    }

    /* Accordion summaries become static headers on desktop */
    details.card>summary {
        cursor: default;
        -webkit-user-select: none;
        user-select: none;
    }

    details.card>summary .card-header__chevron {
        display: none;
    }

    .sidebar .nav__link i {


        font-size: 0.875rem;
        width: 1.125rem;
    }

    .sidebar .nav__icon-img {
        width: 1.125rem;
        height: 1.125rem;
    }

    /* Desktop-only: premium floating command console (≥900px — mobile tiers untouched) */
    /* On PC, .topbar-cluster is the visible header; .topbar stays a layout slot inside it */
    .topbar-cluster {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        position: sticky;
        top: 0;
        z-index: 30;
        min-width: 0;
        background: rgb(14, 13, 11);
        border-bottom: 1px solid var(--color-gold-dim);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        padding: 1px 0;
        box-sizing: border-box;
    }

    .topbar-cluster .topbar__meta {
        align-items: center;
        border-right-color: rgba(255, 255, 255, 0.1);
    }

    .topbar-cluster .topbar__meta-body {
        align-items: center;
    }

    /* Child sections go transparent — cluster owns the floating glass frame */
    .topbar-cluster>.topbar {
        position: static;
        background: none;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        flex: 0 1 auto;
        min-width: 0;
    }

    .topbar-cluster>.topbar__hud {
        background: none;
        border-bottom: none;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.1875rem;
        align-items: center;
        flex: 1 1 0;
        min-width: 0;
    }

    .topbar__mini-hud {
        display: none;
    }

    .main {
        padding-bottom: 0;
    }
}

/* ==========================================================
   Mid-desktop 900–1199px — compact header, no overflow
   ========================================================== */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .topbar__meta {
        padding: 0.25rem 0.5rem 0.25rem 0;
    }

    .topbar__meta-body {
        gap: 0.25rem;
    }

    .topbar__primary-row .player-card {
        padding: 0.125rem 0.375rem;
    }

    .topbar__primary-row .player-card__name {
        font-size: 0.8125rem;
    }

    .topbar__primary-row .player-card__rank {
        font-size: 0.5rem;
    }

    .topbar__primary-row .hud-stat--xp {
        min-width: 9rem;
        padding: 0.25rem 0.5rem;
    }

    .topbar__primary-row .hud-stat--xp .hud-stat__label {
        font-size: 0.4375rem;
    }

    .topbar__primary-row .hud-stat--xp .hud-stat__value {
        font-size: 0.5625rem;
    }

    .topbar__primary-row .hud-stat--xp .hud-stat__icon {
        width: 0.75rem;
        height: 0.75rem;
        font-size: 0.375rem;
    }

    .topbar__primary-row .hud-stat--xp .stat-track {
        height: 0.25rem;
    }

    .topbar-cluster .topbar__wallet {
        padding: 0.125rem 0.625rem;
        gap: 0.125rem;
        align-self: end;
        flex-shrink: 0;
    }

    .topbar-cluster .wallet-chip {
        padding: 0.1875rem 0.375rem;
    }

    .topbar-cluster .wallet-chip__icon {
        width: 0.75rem;
        height: 0.75rem;
        vertical-align: middle;
    }

    .wallet-chip__value {
        font-size: 0.625rem;
    }

    .topbar-cluster .wallet-chip i,
    .topbar-cluster .wallet-chip .wallet-chip__icon {
        font-size: 0.5625rem;
    }

    .topbar__hud {
        padding: 0.1875rem 0.375rem;
        gap: 0.25rem;
    }

    .topbar__hud .hud-stat {
        padding: 0.125rem 0.5rem;
    }

    .topbar__hud .hud-stat__label {
        font-size: 0.4375rem;
    }

    .topbar__hud .hud-stat__value {
        font-size: 0.625rem;
    }

    .topbar__hud .hud-stat__icon {
        width: 0.875rem;
        height: 0.875rem;
        font-size: 0.4375rem;
    }

    .topbar__hud .stat-track {
        height: 0.25rem;
    }

    .main {
        padding: 0 0.75rem 0.75rem;
    }

    .page-heading {
        padding: 0.625rem 0.875rem 0.25rem;
    }

    .page-heading__title {
        font-size: 1.125rem;
    }
}

/* ==========================================================
   Wide ≥ 1280px — spacing polish only (no layout changes)
   ========================================================== */
@media (min-width: 80rem) {
    .app {
        --desktop-gutter: 1.25rem;
        --desktop-sidebar: 15.75rem;
        --desktop-col-gap: 0.875rem;
    }

    .hero,
    .hero__overlay {
        min-height: 11.75rem;
    }

    .hero__title {
        font-size: 2rem;
    }

    .topbar__hud {
        gap: 0.625rem;
    }

    .wallet-chip__icon {
        width: 0.75rem;
        height: 0.75rem;
        vertical-align: middle;
    }

    .wallet-chip__value {
        font-size: 0.75rem;
    }

    /* Desktop-only subtle icon pulse (opacity, not filter) */
    @keyframes resource-icon-pulse-opacity {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.82;
        }
    }

    .topbar-cluster .wallet-chip i,
    .topbar-cluster .wallet-chip .wallet-chip__icon,
    .topbar-cluster .hud-stat__icon i {
        animation: resource-icon-pulse-opacity 2.8s ease-in-out infinite;
    }

    .page-heading {
        padding: 0.375rem 0.625rem 0.625rem;
    }

    .page-heading__title {
        font-size: 1.5rem;
    }
}

/* Page heading */
.page-heading {
    grid-column: 1 / -1;
    padding: 1.125rem 0.875rem 0.375rem;
}

.page-heading__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    letter-spacing: 0.06em;
}

.page-heading__sub {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0.25rem 0 0;
}

/* ==========================================================
   Level-up modal — multi-tier premium design
   Base: Grunt        (1–15)
   --tactical         (16–35) sharp olive
   --veteran          (36–60) warm bronze
   --elite            (61–85) cool silver
   --boss             (86–99) gold
   --kingpin          (100)   ultimate premium
   ========================================================== */
.lvlup-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease;
    overscroll-behavior: contain;
}

.lvlup-overlay[hidden] {
    display: none;
}

.lvlup-overlay--active {
    opacity: 1;
}

.lvlup-card {
    position: relative;
    width: 20rem;
    max-width: 88vw;
    background: linear-gradient(160deg, #1c1a16 0%, #141416 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.625rem;
    padding: 0 1.75rem 1.375rem;
    text-align: center;
    transform: scale(0.85) translateY(1.25rem);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, border-color 0.3s, box-shadow 0.3s, background 0.3s;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.lvlup-overlay--active .lvlup-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ── Top accent bar (full width) ── */
.lvlup-card__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.25rem;
    border-radius: 0.625rem 0.625rem 0 0;
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.3s;
}

/* ── Tier seal ── */
.lvlup-card__seal {
    width: 3.5rem;
    height: 3.5rem;
    margin: 1.375rem auto 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.lvlup-card__seal i {
    font-size: 1.375rem;
    color: rgba(255, 255, 255, 0.15);
    transition: color 0.3s, text-shadow 0.3s;
}

.lvlup-card__label {
    font-family: var(--font-serif);
    font-size: 0.8125rem;
    letter-spacing: 0.26em;
    color: var(--text-tertiary);
    margin-bottom: 0.875rem;
    transition: color 0.3s;
}

.lvlup-card__level {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.625rem;
}

.lvlup-card__level-old,
.lvlup-card__level-new {
    font-size: 3.375rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-tertiary);
    line-height: 1;
    transition: color 0.3s, text-shadow 0.3s;
}

.lvlup-card__arrow {
    font-size: 1.375rem;
    color: rgba(255, 255, 255, 0.08);
    transition: color 0.3s;
}

.lvlup-card__rank {
    font-family: var(--font-serif);
    font-size: 0.875rem;
    letter-spacing: 0.16em;
    color: var(--text-tertiary);
    margin-bottom: 0.875rem;
    transition: color 0.3s, letter-spacing 0.3s, text-shadow 0.3s;
}

.lvlup-card__divider {
    width: 2.25rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 0 auto 0.875rem;
    transition: background 0.3s, width 0.3s;
}

.lvlup-card__sub {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.22);
    margin-bottom: 1rem;
    line-height: 1.45;
    transition: color 0.3s;
}

.lvlup-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
    margin-bottom: 0.875rem;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0.375rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.lvlup-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lvlup-stat__label {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
}

.lvlup-stat__value {
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-gold);
}

.lvlup-card__milestones {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    margin-bottom: 1rem;
}

.lvlup-card__milestone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.625rem;
    background: rgba(var(--color-gold-rgb), 0.04);
    border: 1px solid rgba(var(--color-gold-rgb), 0.1);
    border-radius: 0.3125rem;
    font-size: 0.625rem;
    line-height: 1.3;
}

.lvlup-card__milestone i {
    width: 1rem;
    text-align: center;
    font-size: 0.6875rem;
    color: var(--color-gold);
}

.lvlup-card__milestone strong {
    color: var(--color-gold);
    font-weight: 600;
    margin-right: 0.25rem;
}

.lvlup-card__milestone span {
    color: rgba(255, 255, 255, 0.5);
}

/* ── Level-up Modal Continue Button (Premium styling) ── */
.lvlup-card__btn,
.level-up-modal__btn,
.cartel-lvl-up-modal__btn,
#lvlup-btn {
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #ffe066 0%, var(--color-gold) 50%, #997a15 100%);
    color: #0b0c10 !important;
    font-weight: 800;
    font-size: 0.9375rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 235, 150, 0.6);
    border-radius: 0.375rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(var(--color-gold-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.lvlup-card__btn::before,
.level-up-modal__btn::before,
.cartel-lvl-up-modal__btn::before,
#lvlup-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: rotate(25deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {

.lvlup-card__btn:hover,
.level-up-modal__btn:hover,
.cartel-lvl-up-modal__btn:hover,
#lvlup-btn:hover {
    background: linear-gradient(135deg, #fff099 0%, #e5c158 50%, #b38f1d 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(var(--color-gold-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    color: #000 !important;
}
}

@media (hover: hover) and (pointer: fine) {

.lvlup-card__btn:hover::before,
.level-up-modal__btn:hover::before,
.cartel-lvl-up-modal__btn:hover::before,
#lvlup-btn:hover::before {
    left: 130%;
}
}

.lvlup-card__btn:active,
.level-up-modal__btn:active,
.cartel-lvl-up-modal__btn:active,
#lvlup-btn:active {
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 2px 10px rgba(var(--color-gold-rgb), 0.3);
}

/* ── Tier: Tactical (16–35) — sharp edges, dark olive ── */
.lvlup-card--tactical {
    border-color: rgba(45, 64, 58, 0.4);
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(45, 64, 58, 0.06);
}

.lvlup-card--tactical .lvlup-card__accent {
    background: linear-gradient(90deg, transparent, #2d403a, transparent);
}

.lvlup-card--tactical .lvlup-card__seal {
    border-color: rgba(45, 64, 58, 0.35);
    background: rgba(45, 64, 58, 0.08);
    box-shadow: 0 0 14px rgba(45, 64, 58, 0.08);
}

.lvlup-card--tactical .lvlup-card__seal i {
    color: #7d8f7a;
}

.lvlup-card--tactical .lvlup-card__label {
    color: #7d8f7a;
    letter-spacing: 0.3em;
}

.lvlup-card--tactical .lvlup-card__level-old,
.lvlup-card--tactical .lvlup-card__level-new {
    color: #b8c4b6;
}

.lvlup-card--tactical .lvlup-card__rank {
    color: #7d8f7a;
    letter-spacing: 0.2em;
}

.lvlup-card--tactical .lvlup-card__divider {
    background: rgba(45, 64, 58, 0.35);
    width: 2.75rem;
}

/* ── Tactical tier button ── */
.lvlup-card--tactical .btn {
    border-color: rgba(45, 64, 58, 0.35);
    color: #b8c4b6;
    background: rgba(45, 64, 58, 0.05);
}

@media (hover: hover) and (pointer: fine) {

.lvlup-card--tactical .btn:hover {
    border-color: #3d5a4e;
    background: rgba(45, 64, 58, 0.12);
    box-shadow: 0 0 10px rgba(45, 64, 58, 0.06);
}
}

.lvlup-card--tactical .btn:active {
    background: rgba(45, 64, 58, 0.18);
}

.lvlup-card--tactical .lvlup-card__sub {
    color: rgba(184, 196, 182, 0.35);
}

/* ── Tier: Veteran (36–60) — warm bronze, subtle glow ── */
.lvlup-card--veteran {
    border-color: rgba(180, 140, 80, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(180, 140, 80, 0.04), 0 0 18px rgba(180, 140, 80, 0.06);
}

.lvlup-card--veteran .lvlup-card__accent {
    background: linear-gradient(90deg, transparent, rgba(180, 140, 80, 0.45), transparent);
}

.lvlup-card--veteran .lvlup-card__seal {
    border-color: rgba(180, 140, 80, 0.3);
    background: rgba(180, 140, 80, 0.06);
    box-shadow: 0 0 16px rgba(180, 140, 80, 0.06);
}

.lvlup-card--veteran .lvlup-card__seal i {
    color: rgba(180, 140, 80, 0.5);
}

.lvlup-card--veteran .lvlup-card__label {
    color: #a89070;
}

.lvlup-card--veteran .lvlup-card__level-old,
.lvlup-card--veteran .lvlup-card__level-new {
    color: #c9b28b;
}

.lvlup-card--veteran .lvlup-card__rank {
    color: #a89070;
}

.lvlup-card--veteran .lvlup-card__divider {
    background: rgba(180, 140, 80, 0.2);
    width: 3.25rem;
}

/* ── Veteran tier button ── */
.lvlup-card--veteran .btn {
    border-color: rgba(180, 140, 80, 0.25);
    color: #c9b28b;
    background: rgba(180, 140, 80, 0.04);
}

@media (hover: hover) and (pointer: fine) {

.lvlup-card--veteran .btn:hover {
    border-color: rgba(180, 140, 80, 0.45);
    background: rgba(180, 140, 80, 0.08);
    box-shadow: 0 0 12px rgba(180, 140, 80, 0.06);
}
}

.lvlup-card--veteran .btn:active {
    background: rgba(180, 140, 80, 0.12);
}

.lvlup-card--veteran .lvlup-card__sub {
    color: rgba(201, 178, 139, 0.35);
}

/* ── Tier: Elite (61–85) — cool silver, clean chrome ── */
.lvlup-card--elite {
    border-color: rgba(170, 175, 185, 0.25);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(170, 175, 185, 0.03), 0 0 20px rgba(170, 175, 185, 0.05);
}

.lvlup-card--elite .lvlup-card__accent {
    background: linear-gradient(90deg, transparent, rgba(170, 175, 185, 0.4), transparent);
}

.lvlup-card--elite .lvlup-card__seal {
    border-color: rgba(170, 175, 185, 0.25);
    background: rgba(170, 175, 185, 0.05);
    box-shadow: 0 0 18px rgba(170, 175, 185, 0.05);
}

.lvlup-card--elite .lvlup-card__seal i {
    color: rgba(170, 175, 185, 0.45);
}

.lvlup-card--elite .lvlup-card__label {
    color: #a5aab5;
}

.lvlup-card--elite .lvlup-card__level-old,
.lvlup-card--elite .lvlup-card__level-new {
    color: #d0d4dc;
}

.lvlup-card--elite .lvlup-card__rank {
    color: #a5aab5;
}

.lvlup-card--elite .lvlup-card__divider {
    background: rgba(170, 175, 185, 0.15);
    width: 3.75rem;
}

/* ── Elite tier button ── */
.lvlup-card--elite .btn {
    border-color: rgba(170, 175, 185, 0.2);
    color: #d0d4dc;
    background: rgba(170, 175, 185, 0.03);
}

@media (hover: hover) and (pointer: fine) {

.lvlup-card--elite .btn:hover {
    border-color: rgba(170, 175, 185, 0.4);
    background: rgba(170, 175, 185, 0.06);
    box-shadow: 0 0 14px rgba(170, 175, 185, 0.04);
}
}

.lvlup-card--elite .btn:active {
    background: rgba(170, 175, 185, 0.09);
}

.lvlup-card--elite .lvlup-card__sub {
    color: rgba(208, 212, 220, 0.3);
}

/* ── Tier: Boss (86–99) — gold accents, soft glow ── */
.lvlup-card--boss {
    border-color: rgba(var(--color-gold-rgb), 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(var(--color-gold-rgb), 0.04), 0 0 24px rgba(var(--color-gold-rgb), 0.08);
}

.lvlup-card--boss .lvlup-card__accent {
    background: linear-gradient(90deg, transparent, rgba(var(--color-gold-rgb), 0.55), transparent);
}

.lvlup-card--boss .lvlup-card__seal {
    border-color: rgba(var(--color-gold-rgb), 0.3);
    background: rgba(var(--color-gold-rgb), 0.07);
    box-shadow: 0 0 20px rgba(var(--color-gold-rgb), 0.08);
}

.lvlup-card--boss .lvlup-card__seal i {
    color: rgba(var(--color-gold-rgb), 0.55);
    text-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.12);
}

.lvlup-card--boss .lvlup-card__label {
    color: #c4a84a;
}

.lvlup-card--boss .lvlup-card__level-old,
.lvlup-card--boss .lvlup-card__level-new {
    color: #e8d28c;
    text-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.1);
}

.lvlup-card--boss .lvlup-card__rank {
    color: #c4a84a;
    letter-spacing: 0.18em;
    text-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.06);
}

.lvlup-card--boss .lvlup-card__divider {
    background: rgba(var(--color-gold-rgb), 0.2);
    width: 4.25rem;
}

/* ── Boss tier button ── */
.lvlup-card--boss .btn {
    border-color: rgba(var(--color-gold-rgb), 0.3);
    color: #e8d28c;
    background: rgba(var(--color-gold-rgb), 0.06);
}

@media (hover: hover) and (pointer: fine) {

.lvlup-card--boss .btn:hover {
    border-color: rgba(var(--color-gold-rgb), 0.5);
    background: rgba(var(--color-gold-rgb), 0.1);
    box-shadow: 0 0 14px rgba(var(--color-gold-rgb), 0.08);
}
}

.lvlup-card--boss .btn:active {
    background: rgba(var(--color-gold-rgb), 0.15);
    border-color: rgba(var(--color-gold-rgb), 0.55);
}

.lvlup-card--boss .lvlup-card__sub {
    color: rgba(232, 210, 140, 0.3);
}

/* ── Tier: Kingpin (100) — ultimate premium, rich gold ── */
.lvlup-card--kingpin {
    background: linear-gradient(145deg, #1e1d18 0%, #151515 100%);
    border-color: var(--color-gold);
    border-width: 1.5px;
    box-shadow: 0 10px 44px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(var(--color-gold-rgb), 0.06), 0 0 44px rgba(var(--color-gold-rgb), 0.12), inset 0 0 32px rgba(var(--color-gold-rgb), 0.03);
}

.lvlup-card--kingpin .lvlup-card__accent {
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.lvlup-card--kingpin .lvlup-card__seal {
    border-color: rgba(var(--color-gold-rgb), 0.4);
    background: rgba(var(--color-gold-rgb), 0.1);
    box-shadow: 0 0 24px rgba(var(--color-gold-rgb), 0.12);
}

.lvlup-card--kingpin .lvlup-card__seal i {
    color: rgba(var(--color-gold-rgb), 0.7);
    text-shadow: 0 0 16px rgba(var(--color-gold-rgb), 0.25);
}

.lvlup-card--kingpin .lvlup-card__label {
    color: var(--color-gold);
    text-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.12);
}

.lvlup-card--kingpin .lvlup-card__level-old,
.lvlup-card--kingpin .lvlup-card__level-new {
    color: #f0dfa0;
    text-shadow: 0 0 16px rgba(var(--color-gold-rgb), 0.2);
}

.lvlup-card--kingpin .lvlup-card__rank {
    color: var(--color-gold);
    letter-spacing: 0.22em;
    text-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.1);
}

.lvlup-card--kingpin .lvlup-card__arrow {
    color: rgba(var(--color-gold-rgb), 0.25);
}

.lvlup-card--kingpin .lvlup-card__divider {
    background: rgba(var(--color-gold-rgb), 0.2);
    width: 5.25rem;
}

/* ── Kingpin tier button ── */
.lvlup-card--kingpin .btn {
    border-color: var(--color-gold);
    color: #f0dfa0;
    background: rgba(var(--color-gold-rgb), 0.08);
    text-shadow: 0 0 6px rgba(var(--color-gold-rgb), 0.1);
}

@media (hover: hover) and (pointer: fine) {

.lvlup-card--kingpin .btn:hover {
    background: rgba(var(--color-gold-rgb), 0.14);
    border-color: #e0c040;
    box-shadow: 0 0 18px rgba(var(--color-gold-rgb), 0.12);
}
}

.lvlup-card--kingpin .btn:active {
    background: rgba(var(--color-gold-rgb), 0.2);
    border-color: #e8c84a;
}

.lvlup-card--kingpin .lvlup-card__sub {
    color: rgba(240, 223, 160, 0.3);
}

/* Remove the old ::before approach */
.lvlup-card::before {
    display: none;
}


/* Path confirmation modal */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.25s ease;
    overscroll-behavior: contain;
}

.confirm-overlay[hidden] {
    display: none;
}

.confirm-overlay--active {
    opacity: 1;
}

.confirm-card {
    position: relative;
    width: 20rem;
    max-width: 88vw;
    background: linear-gradient(160deg, #1c1a16, #141416);
    border: 1px solid rgba(var(--color-gold-rgb), 0.25);
    border-radius: 0.625rem;
    padding: 2rem 1.75rem 1.375rem;
    text-align: center;
    transform: scale(0.88) translateY(1rem);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(var(--color-gold-rgb), 0.06);
}

.confirm-overlay--active .confirm-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.confirm-card__icon {
    margin-bottom: 0.875rem;
}

.confirm-card__icon i {
    font-size: 1.625rem;
    color: rgba(var(--color-gold-rgb), 0.35);
}

.confirm-card__title {
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    color: var(--color-gold);
    margin-bottom: 0.875rem;
}

.confirm-card__body {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin-bottom: 0.875rem;
}

.confirm-card__body strong {
    color: var(--color-gold);
}

.confirm-card__warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: #EF5350;
    background: rgba(239, 83, 80, 0.06);
    border: 1px solid rgba(239, 83, 80, 0.15);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1.375rem;
    line-height: 1.4;
}

.confirm-card__warning i {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.confirm-card__actions {
    display: flex;
    gap: 0.625rem;
}

/* ── Confirm card buttons (uses .btn .btn--secondary/.btn--primary .btn--lg .btn--block) ── */

/* Path chosen confirmation screen (second modal) */
.confirm-card--chosen {
    padding: 2.5rem 1.75rem 1.75rem;
    border-color: rgba(var(--color-gold-rgb), 0.35);
}

.confirm-card__icon--chosen {
    margin-bottom: 1.25rem;
}

.confirm-card__icon--chosen i {
    font-size: 2.5rem;
    color: rgba(var(--color-gold-rgb), 0.5);
    text-shadow: 0 0 20px rgba(var(--color-gold-rgb), 0.15);
}

.confirm-card__title--chosen {
    font-size: 0.625rem;
    letter-spacing: 0.24em;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 0.5rem;
}

.path-chosen__pathname {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 0.14em;
    margin-bottom: 1.125rem;
    text-shadow: 0 0 12px rgba(var(--color-gold-rgb), 0.1);
}

.path-chosen__desc {
    font-size: 0.75rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 1.75rem;
    padding: 0 0.375rem;
}

/* ── Path chosen button (uses .btn .btn--primary .btn--lg .btn--block) ── */

/* ==========================================================
   Responsive rework — extra breakpoints for smooth scaling
   ========================================================== */

/* Very small phones (<360px) — tighter everything */
@media (max-width: 22.4375rem) {
    .topbar__meta {
        padding: 0.125rem 0 0.1875rem;
    }

    .topbar__hud {
        padding: 0.125rem 0.3125rem 0.25rem;
    }

    .dashboard {
        padding: 0 0.5rem 0.875rem;
        gap: 0.75rem;
    }

    .hero {
        margin: 0.875rem 0.5rem 0.625rem;
        min-height: 8.75rem;
    }

    .hero__overlay {
        min-height: 8.75rem;
        padding: 0.875rem;
    }

    .hero__title {
        font-size: 1.125rem;
    }

    .hero__tribute {
        padding: 0.5rem 0.75rem;
        font-size: 0.5625rem;
    }

    .card {
        padding: 0.5rem;
    }

    .hud-stat {
        padding: 0.25rem 0.375rem;
    }

    .wallet-chip {
        padding: 0.125rem 0.3125rem;
    }

    .wallet-chip__icon {
        width: 0.75rem;
        height: 0.75rem;
        vertical-align: middle;
    }

    .wallet-chip__value {
        font-size: 0.5rem;
    }

    .brand__mark {
        font-size: 1.25rem;
    }

    .sidebar .brand {
        padding: 0.875rem 0.75rem 0.75rem;
    }
}

/* Larger phones (480px+) — more breathing room */
@media (min-width: 30rem) {
    .hero {
        min-height: 12.5rem;
        margin: 1.375rem 1rem 1rem;
    }

    .hero__overlay {
        min-height: 12.5rem;
        padding: 1.75rem;
    }

    .hero__title {
        font-size: 1.625rem;
    }

    .hero__tribute {
        padding: 0.75rem 1.375rem;
        font-size: 0.6875rem;
    }

    .dashboard {
        padding: 0 0.5rem 1.25rem;
        gap: 1.25rem;
    }

    .card {
        padding: 0.75rem;
    }

    .topbar__meta {
        padding: 0.25rem 0 0.3125rem;
    }

    .topbar__hud {
        padding: 0.3125rem 0.625rem 0.4375rem;
    }

    .topbar__hud .hud-group--vitals {
        gap: 0.5rem;
    }

    .topbar__hud .hud-group--vitals .hud-stat {
        padding: 0.5rem 0.625rem;
    }

    .hud-stat__label {
        font-size: 0.75rem;
    }

    .hud-stat__value {
        font-size: 0.625rem;
    }

    .brand__mark {
        font-size: 1.625rem;
    }

    .wallet-chip {
        padding: 0.25rem 0.5rem;
    }

    .wallet-chip i,
    .wallet-chip .wallet-chip__icon {
        font-size: 0.75rem;
    }

    .wallet-chip__icon {
        width: 0.75rem;
        height: 0.75rem;
        vertical-align: middle;
    }

    .wallet-chip__value {
        font-size: 0.625rem;
    }

    .player-card__avatar {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }

    .player-card__name {
        font-size: 1rem;
    }
}

/* iPad portrait / small tablet (768px+) — richer layout */
@media (min-width: 768px) {
    .hero-feed-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
        align-items: stretch;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        padding: 0 1.25rem;
    }

    .hero-feed-row .hero {
        margin: 0;
    }

    .hero {
        min-height: 12.5rem;
    }

    .hero__overlay {
        min-height: 12.5rem;
    }

    .hero__title {
        font-size: 2.125rem;
    }

    .dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        padding: 0 0.5rem 1.25rem;
    }

    .dashboard__pair {
        gap: 1.25rem;
    }

    .topbar__meta-body {
        gap: 0.375rem;
        align-items: center;
    }

    .player-card__avatar {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.8125rem;
    }

    .player-card__name {
        font-size: 1rem;
    }

    .player-card__rank {
        font-size: 0.5rem;
    }

    .wallet-chip__icon {
        width: 0.75rem;
        height: 0.75rem;
        vertical-align: middle;
    }

    .wallet-chip__value {
        font-size: 0.75rem;
    }

    .wallet-chip__label {
        font-size: 0.4375rem;
    }

    .topbar__hud .hud-group--vitals .hud-stat__label {
        font-size: 0.5625rem;
    }

    .topbar__hud .hud-group--vitals .hud-stat__value {
        font-size: 0.625rem;
    }

    .card-header {
        padding: 0.875rem 1rem;
    }

    .card-header i {
        font-size: 0.9375rem;
    }

    .card-header span {
        font-size: 0.75rem;
    }

    /* Accordion summaries become static headers on tablet+ */
    details.card>summary {
        cursor: default;
        -webkit-user-select: none;
        user-select: none;
    }

    details.card>summary .card-header__chevron {
        display: none;
    }
}

/* Ultra-wide (1600px+) — max-width containment, larger content */
@media (min-width: 100rem) {
    .app {
        --desktop-gutter: 1.5rem;
        --desktop-sidebar: 17.5rem;
        --desktop-col-gap: 1rem;
    }

    .hero,
    .hero__overlay {
        min-height: 13.75rem;
    }

    .hero__title {
        font-size: 2.25rem;
    }

    .hero__tribute {
        padding: 0.875rem 1.75rem;
        font-size: 0.75rem;
    }

    .card {
        padding: 0.875rem;
    }

    .hud-stat__label {
        font-size: 0.625rem;
    }

    .hud-stat__value {
        font-size: 0.75rem;
    }

    .wallet-chip__icon {
        width: 0.75rem;
        height: 0.75rem;
        vertical-align: middle;
    }

    .wallet-chip__value {
        font-size: 0.8125rem;
    }
}

@media (max-width: 1023.98px) {
    #page-content {
        display: block;
    }

    .hero { margin: 0.875rem 0; }

    #dev-tools {
        display: flex;
    }

    .main {
        padding-top: calc(var(--topbar-height, 5.4rem) + 1.25rem);
    }

    .topbar__meta {
        padding: 1rem 0 0.75rem;
        position: relative;
    }

    .topbar__meta-body {
        display: grid;
        grid-template-columns: auto 3fr 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 0.125rem 0.25rem;
        align-items: center;
        min-width: 0;
        width: 100%;
    }

    .topbar__tier--identity {
        padding: 0.125rem 0.25rem;
    }

    .player-card__avatar {
        width: 1.375rem;
        height: 1.375rem;
        font-size: 0.5rem;
        overflow: visible;
        border: 1.5px solid var(--color-gold-dim);
    }

    .player-card__name {
        font-size: 0.75rem;
    }

    .player-card__rank {
        font-size: 0.4375rem;
        margin-top: 0;
    }

    .topbar__primary-row {
        display: contents;
    }

    .topbar__primary-row .topbar__tier--identity {
        grid-column: 1 / 3;
        grid-row: 1;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .topbar__primary-row .topbar__wallet {
        grid-column: 3 / 6;
        grid-row: 1;
        display: flex;
        flex-direction: row;
        gap: 0.1875rem;
        align-self: end;
        flex-shrink: 0;
    }

    .topbar__player-col {
        display: contents;
    }

    .topbar__primary-row .hud-stat--xp {
        grid-column: 1 / 6;
        grid-row: 2;
        padding: 0.125rem 0.5rem 0.1875rem;
        gap: 0.125rem;
        min-width: 0;
        max-width: 100%;
    }

    .topbar__primary-row .hud-stat--xp .hud-stat__icon {
        width: 0.6875rem;
        height: 0.6875rem;
        font-size: 0.3125rem;
    }

    .topbar__primary-row .hud-stat--xp .stat-track {
        height: 0.5rem;
    }

    .topbar-cluster .wallet-chip {
        width: auto;
        min-width: 0;
        max-width: 85px;
        flex: 1;
        padding: 0.125rem 0.25rem;
        gap: 0.125rem;
    }

    .wallet-group {
        display: contents;
    }

    .wallet-item .wallet-chip__icon {
        width: 0.75rem;
        height: 0.75rem;
        vertical-align: middle;
    }

    .wallet-chip__value {
        font-size: 0.5625rem;
        display: inline-block;
    }

    .wallet-chip i,
    .wallet-chip .wallet-chip__icon {
        font-size: 0.5625rem;
    }

    .topbar__mini-hud {
        display: flex;
        flex-direction: row;
        gap: 0.1875rem;
        padding: 0.3125rem 0.3125rem 0.25rem;
        position: fixed;
        top: var(--topbar-height, 6rem);
        margin-top: 0;
        left: 0;
        right: 0;
        z-index: 29;
        background: rgb(14, 13, 11);
    }

    .topbar {
        border-bottom-width: 0.5px;
    }

    .topbar__mini-hud .mini-hud-stat {
        padding: 0.0625rem 0.1875rem 0.0625rem;
        border-radius: 0.25rem;
        gap: 0.0625rem;
        height: 1.25rem;
        min-height: 1.25rem;
        max-height: 1.25rem;
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        border: none;
    }

    .topbar__mini-hud .mini-hud-stat__head {
        gap: 0.0625rem;
        height: 0.6875rem;
        min-height: 0.6875rem;
        max-height: 0.6875rem;
        box-sizing: border-box;
    }

    .topbar__mini-hud .mini-hud-stat__value {
        font-size: 0.375rem;
        line-height: 0.6875rem;
        height: 100%;
    }

    .topbar__mini-hud .mini-hud-stat__timer {
        font-size: 0.375rem;
        line-height: 0.6875rem;
        height: 100%;
    }

    .topbar__mini-hud .mini-hud-stat__icon {
        font-size: 0.375rem;
        width: 0.5rem;
    }

    .topbar__mini-hud .mini-hud-stat[data-stat="health"] .mini-hud-stat__value,
    .topbar__mini-hud .mini-hud-stat[data-stat="health"] .mini-hud-stat__icon {
        color: #fff;
    }

    .topbar__mini-hud .mini-hud-stat[data-stat="energy"] .mini-hud-stat__value,
    .topbar__mini-hud .mini-hud-stat[data-stat="energy"] .mini-hud-stat__icon {
        color: #fff;
    }

    .topbar__mini-hud .mini-hud-stat[data-stat="nerves"] .mini-hud-stat__value,
    .topbar__mini-hud .mini-hud-stat[data-stat="nerves"] .mini-hud-stat__icon {
        color: #fff;
    }

    .topbar__mini-hud .mini-hud-stat[data-stat="stamina"] .mini-hud-stat__value,
    .topbar__mini-hud .mini-hud-stat[data-stat="stamina"] .mini-hud-stat__icon {
        color: #fff;
    }

    .topbar__mini-hud .mini-hud-stat__max {
        opacity: 0.55;
    }

    .topbar__mini-hud .mini-hud-stat__value {
        justify-content: flex-start;
    }

    .topbar__mini-hud .mini-hud-stat__value:not([data-is-max="MAX"])::after {
        display: none;
    }

    .topbar__mini-hud .mini-hud-stat__value[data-is-max="MAX"]::after {
        display: inline-block;
        color: rgba(255, 255, 255, 0.7);
        text-shadow: none;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 2px;
        padding: 0 2px;
        margin-left: auto;
        line-height: 1;
        box-sizing: border-box;
    }

    .sidebar__actions {
        display: none;
    }

    html {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html::-webkit-scrollbar {
        display: none;
    }

    #toast-container {
        top: calc(56px + 8px) !important;
        right: 0.5rem !important;
    }
}


@media (max-width: 59.9375rem) {
    .topbar__meta {
        position: relative !important;
    }
}

/* ── Profile page title and badge display ── */
.profile-identity__title {
    margin-top: 0.375rem;
}

.profile-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.12), rgba(var(--color-gold-rgb), 0.05));
    border: 1px solid rgba(var(--color-gold-rgb), 0.3);
    color: var(--color-gold);
    box-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.08);
}

.profile-title-badge i {
    font-size: 0.75rem;
    color: var(--color-gold);
}

.profile-identity__badge {
    margin-top: 0.625rem;
}

.profile-badge-badge {
    display: inline-flex;
    align-items: stretch;
    border-radius: 0.375rem;
    overflow: hidden;
    border: 1px solid rgba(46, 204, 113, 0.3);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.08);
}

.profile-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    background: linear-gradient(180deg, rgba(46, 204, 113, 0.2), rgba(46, 204, 113, 0.08));
    border-right: 1px solid rgba(46, 204, 113, 0.15);
}

.profile-badge-icon i {
    font-size: 1rem;
    color: var(--color-positive);
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.3));
}

.profile-badge-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.25rem 0.75rem 0.25rem 0.625rem;
    background: rgba(46, 204, 113, 0.04);
}

.profile-badge-label {
    font-size: 0.4375rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(46, 204, 113, 0.5);
}

.profile-badge-name {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-positive);
    letter-spacing: 0.03em;
}

.profile-badge-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.125rem;
}

.profile-badge-rarity {
    font-size: 0.4375rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 1px 0.3125rem;
    border-radius: 0.1875rem;
    text-transform: uppercase;
}

.profile-badge-rarity--common {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-gray-aaa);
}

.profile-badge-rarity--rare {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.profile-badge-rarity--epic {
    background: rgba(167, 139, 250, 0.15);
    color: #c0adfc;
}

.profile-badge-rarity--legendary {
    background: rgba(251, 191, 36, 0.15);
    color: #fcce50;
}

.profile-badge-rarity--mythic {
    background: rgba(255, 45, 85, 0.15);
    color: #ff5c7a;
}

.profile-badge-req {
    font-size: 0.4375rem;
    color: rgba(46, 204, 113, 0.4);
    letter-spacing: 0.03em;
}


/* ==========================================================
   Global Status Banner — Premium mafia-themed bars for jailed/hospitalised players
   ========================================================== */
.status-banner {
    position: sticky;
    top: 0;
    z-index: 29;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: statusBannerSlide 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes statusBannerSlide {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.status-banner__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    min-height: 2.375rem;
    flex-wrap: wrap;
}

.status-banner--jail {
    background: var(--glass-surface-strong);
    border-top: 2px solid #b91c1c;
    border-bottom: 1px solid rgba(185, 28, 28, 0.2);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(185, 28, 28, 0.06);
}

.status-banner--hospital {
    background: var(--glass-surface-strong);
    border-top: 2px solid var(--color-crimson-bright);
    border-bottom: 1px solid rgba(160, 32, 32, 0.2);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(160, 32, 32, 0.06);
}

.status-banner__icon {
    flex-shrink: 0;
    width: 1.875rem;
    height: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8125rem;
    transition: opacity 0.2s, transform 0.2s;
}

.status-banner--jail .status-banner__icon {
    background: rgba(185, 28, 28, 0.12);
    border: 1px solid rgba(185, 28, 28, 0.3);
    color: #b91c1c;
    text-shadow: 0 0 6px rgba(185, 28, 28, 0.4);
    box-shadow: 0 0 10px rgba(185, 28, 28, 0.1);
    animation: jailIconPulse 2.4s ease-in-out infinite;
}

.status-banner--hospital .status-banner__icon {
    background: rgba(160, 32, 32, 0.15);
    border: 1px solid rgba(200, 50, 50, 0.35);
    color: var(--color-crimson-bright);
    text-shadow: 0 0 6px rgba(160, 32, 32, 0.4);
    box-shadow: 0 0 10px rgba(160, 32, 32, 0.1);
    animation: hospitalIconPulse 2.4s ease-in-out infinite;
}

@keyframes jailIconPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(185, 28, 28, 0.1);
    }

    50% {
        box-shadow: 0 0 20px rgba(185, 28, 28, 0.2);
    }
}

@keyframes hospitalIconPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(160, 32, 32, 0.1);
    }

    50% {
        box-shadow: 0 0 20px rgba(160, 32, 32, 0.2);
    }
}

.status-banner__body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.status-banner__label {
    font-family: var(--font-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: text-shadow 0.2s ease;
}

.status-banner--jail .status-banner__label {
    color: #b91c1c;
    text-shadow: 0 0 12px rgba(185, 28, 28, 0.2);
}

.status-banner--hospital .status-banner__label {
    color: var(--color-crimson-bright);
    text-shadow: 0 0 12px rgba(160, 32, 32, 0.2);
}

.status-banner__timer {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-variant-numeric: tabular-nums;
}

.status-banner__action {
    flex-shrink: 0;
    padding: 0.3125rem 0.875rem;
    border-radius: 0.3125rem;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    font-family: var(--font-serif);
    border: 1px solid;
}

.status-banner--jail .status-banner__action {
    color: var(--bg-viewport);
    background: linear-gradient(135deg, #b91c1c, #7a1212);
    border-color: #4d0c0c;
    box-shadow: 0 0 12px rgba(185, 28, 28, 0.15);
}

@media (hover: hover) and (pointer: fine) {

.status-banner--jail .status-banner__action:hover {
    background: linear-gradient(135deg, #c92222, #8a1616);
    border-color: #c92222;
    box-shadow: 0 0 20px rgba(185, 28, 28, 0.3);
    transform: translateY(-0.0625rem);
}
}

.status-banner--jail .status-banner__action:active {
    transform: translateY(0) scale(0.97);
}

.status-banner--hospital .status-banner__action {
    color: var(--color-crimson-bright);
    background: rgba(160, 32, 32, 0.1);
    border-color: rgba(160, 32, 32, 0.3);
}

@media (hover: hover) and (pointer: fine) {

.status-banner--hospital .status-banner__action:hover {
    color: var(--white);
    background: rgba(160, 32, 32, 0.25);
    border-color: var(--color-crimson-bright);
    box-shadow: 0 0 16px rgba(160, 32, 32, 0.2);
}
}

.status-banner--hospital .status-banner__action:active {
    transform: scale(0.97);
}

.status-banner__close {
    flex-shrink: 0;
    width: 1.625rem;
    height: 1.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.875rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    line-height: 1;
}

@media (hover: hover) and (pointer: fine) {

.status-banner__close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}
}

.status-banner__close:active {
    transform: scale(0.92);
}

/* Disable all interactive elements when player is jailed/hospitalised */
body.status-jailed button,
body.status-jailed a,
body.status-jailed input,
body.status-jailed select,
body.status-jailed textarea {
    pointer-events: none !important;
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

body.status-jailed .status-banner__action {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

body.status-jailed .jail-btn {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

body.status-jailed .jail-modal__close {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

body.status-jailed .jail-toggle {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Jailed players can still open other inmates' profiles from the jail page */
body.status-jailed .jail-player-card__name a {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

body.status-jailed .jail-trade-form__input {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: text !important;
}

body.status-jailed .jail-inv-search {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: text !important;
}

body.status-jailed .hospital-btn,
body.status-jailed .hospital-patients-card__load-btn {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Hospitalised players can still open their own profile via the header avatar,
   view other patients' profiles from the ward list, and load more of them */
body.status-jailed .player-card__avatar-link,
body.status-jailed #hosp-patient-list .pt-name a,
body.status-jailed #hosp-patients-load {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* ── Whitelist: Floating Chat FAB & Chat Panel / Modal ── */
body.status-jailed #chat-fab,
body.status-jailed #chat-fab *,
body.status-jailed #chat-panel,
body.status-jailed #chat-panel *,
body.status-jailed #chat-backdrop {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: auto !important;
}
body.status-jailed #chat-fab,
body.status-jailed #chat-panel button,
body.status-jailed #chat-panel .chat-tab,
body.status-jailed #chat-panel .close-btn,
body.status-jailed #chat-panel .send-btn,
body.status-jailed #chat-panel a {
    cursor: pointer !important;
}
body.status-jailed #chat-panel input,
body.status-jailed #chat-panel textarea {
    cursor: text !important;
}

/* ── Whitelist: Notifications Bell, Drawer Panel & Navigation ── */
body.status-jailed #notif-bell,
body.status-jailed #notif-bell *,
body.status-jailed .brand__notif-btn,
body.status-jailed .brand__notif-btn *,
body.status-jailed .sidebar__icon-btn--notif,
body.status-jailed .sidebar__icon-btn--notif *,
body.status-jailed #notif-dropdown.notif-panel--open,
body.status-jailed #notif-dropdown.notif-panel--open *,
body.status-jailed .notif-panel--open,
body.status-jailed .notif-panel--open *,
body.status-jailed #notif-backdrop.notif-backdrop--visible,
body.status-jailed #notif-close,
body.status-jailed #notif-close *,
body.status-jailed .notif-panel__close,
body.status-jailed .notif-panel__close *,
body.status-jailed .bottom-nav__item[href*="notifications"],
body.status-jailed .bottom-nav__item[href*="notifications"] *,
body.status-jailed .bottom-nav__item[data-page="notifications"],
body.status-jailed .bottom-nav__item[data-page="notifications"] * {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* ── Whitelist: Discord Community Buttons ── */
body.status-jailed .brand__discord-btn,
body.status-jailed .brand__discord-btn *,
body.status-jailed .mobile-header-card__discord-btn,
body.status-jailed .mobile-header-card__discord-btn * {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* ── Whitelist: Settings Icons & Navigation ── */
body.status-jailed .brand__settings-btn,
body.status-jailed .brand__settings-btn *,
body.status-jailed .mobile-header-card__settings-btn,
body.status-jailed .mobile-header-card__settings-btn *,
body.status-jailed .sidebar__close,
body.status-jailed .sidebar__close *,
body.status-jailed .sidebar-backdrop,
body.status-jailed a[href*="settings"],
body.status-jailed a[href*="settings"] * {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* ── Whitelist: Page Interactive Content on Settings & Notifications ── */
body.status-jailed.page-notifications button,
body.status-jailed.page-notifications a,
body.status-jailed.page-notifications input,
body.status-jailed.page-notifications select,
body.status-jailed.page-settings button,
body.status-jailed.page-settings a,
body.status-jailed.page-settings input,
body.status-jailed.page-settings select,
body.status-jailed.page-settings textarea,
body.status-jailed #settings-content,
body.status-jailed #settings-content *,
body.status-jailed #settings-content button,
body.status-jailed #settings-content a,
body.status-jailed #settings-content input,
body.status-jailed #settings-content select,
body.status-jailed #settings-content textarea,
body.status-jailed .settings-page,
body.status-jailed .settings-page *,
body.status-jailed .settings-toggle,
body.status-jailed .settings-toggle *,
body.status-jailed .settings-input,
body.status-jailed .settings-row,
body.status-jailed .settings-row *,
body.status-jailed #notif-list,
body.status-jailed #notif-list *,
body.status-jailed .notif-view,
body.status-jailed .notif-view * {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: auto !important;
}
body.status-jailed.page-notifications button,
body.status-jailed.page-notifications a,
body.status-jailed.page-settings button,
body.status-jailed.page-settings a,
body.status-jailed #settings-content button,
body.status-jailed #settings-content a,
body.status-jailed .settings-toggle,
body.status-jailed .settings-row button,
body.status-jailed .settings-row a,
body.status-jailed .settings-page button,
body.status-jailed .settings-page a,
body.status-jailed #notif-list button,
body.status-jailed #notif-list a,
body.status-jailed .notif-view button,
body.status-jailed .notif-view a {
    cursor: pointer !important;
}
body.status-jailed.page-notifications input,
body.status-jailed.page-settings input,
body.status-jailed.page-settings textarea,
body.status-jailed #settings-content input,
body.status-jailed #settings-content select,
body.status-jailed #settings-content textarea,
body.status-jailed .settings-input,
body.status-jailed .settings-row input,
body.status-jailed .settings-row select,
body.status-jailed .settings-row textarea,
body.status-jailed .settings-page input,
body.status-jailed .settings-page select,
body.status-jailed .settings-page textarea,
body.status-jailed #notif-list input,
body.status-jailed .notif-view input {
    cursor: text !important;
}

@media (max-width: 479.98px) {
    .status-banner__inner {
        padding: 0.375rem 0.625rem;
        gap: 0.5rem;
    }

    .status-banner__label {
        font-size: 0.5625rem;
    }

    .status-banner__timer {
        font-size: 0.6875rem;
        padding: 1px 0.375rem;
    }

    .status-banner__action {
        font-size: 0.5rem;
        padding: 0.25rem 0.625rem;
    }
}

/* =============================================================
   Confirm Modal — modern replacement for confirm()
   ============================================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.modal-overlay--visible,
.modal-overlay--open {
    opacity: 1;
    pointer-events: auto !important;
}

.modal-confirm {
    background: linear-gradient(170deg, rgba(20, 16, 12, 0.99), rgba(12, 9, 6, 0.99));
    border: 1px solid rgba(196, 136, 60, 0.15);
    border-radius: 0.75rem;
    padding: 1.5rem 1.75rem 1.25rem;
    max-width: 23.75rem;
    width: 90%;
    text-align: center;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
    transition: transform 0.2s;
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
}

.modal-overlay--visible .modal-confirm,
.modal-overlay--open .modal-confirm {
    transform: scale(1);
}

.modal-confirm__icon {
    font-size: 2rem;
    color: var(--color-danger);
    margin-bottom: 0.625rem;
}

.modal-confirm__msg {
    font-size: 0.8125rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.modal-confirm__actions {
    display: flex;
    gap: 0.625rem;
    pointer-events: auto !important;
}

.modal-confirm__actions .btn {
    flex: 1;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* ==========================================================
   Tab Bar Components (Global Styles)
   ========================================================== */
.tab-bar {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(var(--color-gold-rgb), 0.18);
    border-radius: 0.5rem;
    margin-bottom: 0.375rem;
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(var(--color-gold-rgb), 0.04);
}

.tab-bar + .dashboard {
    padding-left: 0;
    padding-right: 0;
}

.tab-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold-dim), var(--color-gold), var(--color-gold-dim), transparent);
    opacity: 0.6;
    pointer-events: none;
}

.tab-bar__item {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-family: var(--font-serif);
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

@media (hover: hover) and (pointer: fine) {

.tab-bar__item:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(196, 136, 60, 0.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
}

.tab-bar__item:active {
    background: rgba(255, 255, 255, 0.06);
}

.tab-bar__item--active {
    color: var(--color-amber);
    background: rgba(196, 136, 60, 0.08);
    box-shadow: inset 0 0 0 1px rgba(196, 136, 60, 0.2), 0 0 12px rgba(var(--color-gold-rgb), 0.15);
}

@media (hover: hover) and (pointer: fine) {

.tab-bar__item--active:hover {
    color: var(--color-amber);
    background: rgba(196, 136, 60, 0.08);
    box-shadow: inset 0 0 0 1px rgba(196, 136, 60, 0.2), 0 0 12px rgba(var(--color-gold-rgb), 0.15);
    transform: none;
}
}

.tab-bar__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.0625rem;
    height: 0.75rem;
    background: rgba(var(--color-gold-rgb), 0.45);
    border-radius: 0;
    pointer-events: none;
}

.tab-bar__item--active.tab-bar__item--active::after {
    display: block;
    content: '';
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.25rem;
    height: 0.125rem;
    background: var(--color-amber);
    border-radius: 0.0625rem;
    transition: left 0.25s ease, width 0.25s ease;
}

/* Secondary tab bar (crime tabs) */
.tab-bar--secondary {
    background: rgba(var(--color-gold-rgb), 0.03);
    border: 1px solid rgba(var(--color-gold-rgb), 0.15);
    margin-bottom: 0.75rem;
}

.tab-bar--secondary .tab-bar__item {
    padding: 0.5rem 0.375rem;
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
}

.tab-bar--secondary .tab-bar__item--active {
    background: rgba(var(--color-gold-rgb), 0.06);
    box-shadow: inset 0 0 0 1px rgba(var(--color-gold-rgb), 0.15);
}

@media (hover: hover) and (pointer: fine) {

.tab-bar--secondary .tab-bar__item--active:hover {
    background: rgba(var(--color-gold-rgb), 0.06);
    box-shadow: inset 0 0 0 1px rgba(var(--color-gold-rgb), 0.15);
}
}

.tab-bar--secondary .tab-bar__item--active::after {
    width: 1rem;
    height: 0.0625rem;
}

.tab-bar__item--locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.25);
}

.tab-bar__lock-info {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.05em;
    margin-right: 0.25rem;
}

.tab-bar__item i {
    margin-right: 0.25rem;
    font-size: 0.6875rem;
    opacity: 0.6;
}

.tab-bar__item--active i {
    color: var(--color-amber);
    opacity: 1;
}

@media (max-width: 1023.98px) {
    .tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-behavior: smooth;
        position: relative;
    }

    .tab-bar::-webkit-scrollbar {
        display: none;
    }

    .tab-bar__item {
        white-space: nowrap;
        flex: 0 0 auto;
        min-width: max-content;
        text-align: center;
    }

    .tab-bar__item--active {
        color: var(--color-amber);
        background: rgba(196, 136, 60, 0.15);
        box-shadow: inset 0 0 0 1px rgba(196, 136, 60, 0.25), 0 0 10px rgba(var(--color-gold-rgb), 0.15);
    }

    .tab-bar__item--active:hover {
        color: var(--color-amber);
        background: rgba(196, 136, 60, 0.15);
        box-shadow: inset 0 0 0 1px rgba(196, 136, 60, 0.25), 0 0 10px rgba(var(--color-gold-rgb), 0.15);
        transform: none;
    }

    .tab-bar__item--active i {
        color: var(--color-amber);
        opacity: 1;
    }

    .tab-bar--secondary .tab-bar__item--active {
        background: rgba(196, 136, 60, 0.12);
        box-shadow: inset 0 0 0 1px rgba(196, 136, 60, 0.2);
    }

    .tab-bar--secondary .tab-bar__item--active:hover {
        background: rgba(196, 136, 60, 0.12);
        box-shadow: inset 0 0 0 1px rgba(196, 136, 60, 0.2);
    }

}

/* ═══════════════════════════════════════════════════════
   SECTION TAB BAR — Global override
   ═══════════════════════════════════════════════════════ */
.tab-bar {
    border-radius: 14px;
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg-panel));
    border: 1px solid rgba(var(--color-gold-rgb), 0.15);
    margin-bottom: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    padding: 8px;
    gap: 6px;
}

.tab-bar::before {
    display: none;
}

.tab-bar__item {
    flex: 1 1 0;
    min-height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 0.5rem 0.5rem;
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.375rem;
}

.tab-bar__item:active {
    background: rgba(255, 255, 255, 0.08);
}

.tab-bar__item:not(:last-child)::after {
    display: none;
}

.tab-bar__item--active {
    background: radial-gradient(circle at 50% 35%, rgba(var(--color-gold-rgb), 0.2), rgba(var(--color-gold-rgb), 0.06) 75%);
    box-shadow: inset 0 0 0 1.5px var(--color-gold), inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 14px rgba(var(--color-gold-rgb), 0.15);
    color: var(--color-gold);
}

.tab-bar__item--active::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 3px var(--color-gold);
}

@media (hover: hover) and (pointer: fine) {

.tab-bar__item--active:hover {
    background: radial-gradient(circle at 50% 35%, rgba(var(--color-gold-rgb), 0.2), rgba(var(--color-gold-rgb), 0.06) 75%);
    box-shadow: inset 0 0 0 1.5px var(--color-gold), inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 14px rgba(var(--color-gold-rgb), 0.15);
    color: var(--color-gold);
    transform: none;
}
}

.tab-bar__item i {
    display: inline-block;
    font-size: 0.8125rem;
    line-height: 1;
    margin: 0;
}

.tab-bar--secondary {
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg-panel));
    border: 1px solid rgba(var(--color-gold-rgb), 0.15);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    padding: 8px;
    gap: 6px;
}

.tab-bar--secondary .tab-bar__item {
    flex: 1 1 0;
    min-height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 0.5rem 0.25rem;
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.tab-bar--secondary .tab-bar__item:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.08);
}

@media (hover: hover) and (pointer: fine) {

.tab-bar--secondary .tab-bar__item:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
}
}

.tab-bar--secondary .tab-bar__item--active {
    background: radial-gradient(circle at 50% 35%, rgba(var(--color-gold-rgb), 0.2), rgba(var(--color-gold-rgb), 0.06) 75%);
    box-shadow: inset 0 0 0 1.5px var(--color-gold), inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 14px rgba(var(--color-gold-rgb), 0.15);
    color: var(--color-gold);
}

@media (hover: hover) and (pointer: fine) {

.tab-bar--secondary .tab-bar__item--active:hover {
    background: radial-gradient(circle at 50% 35%, rgba(var(--color-gold-rgb), 0.2), rgba(var(--color-gold-rgb), 0.06) 75%);
    box-shadow: inset 0 0 0 1.5px var(--color-gold), inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 14px rgba(var(--color-gold-rgb), 0.15);
    color: var(--color-gold);
    transform: none;
}
}

.tab-bar--secondary .tab-bar__item--active::after {
    display: none;
}

/* ── Tab panel transitions ── */
.tab-fade-in {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tab-fade-in-start {
    opacity: 0;
    transform: translateY(8px);
}

.tab-fade-in-end {
    opacity: 1;
    transform: translateY(0);
}

.tab-fade-out {
    transition: opacity 0.12s ease;
}

.tab-fade-out-start {
    opacity: 1;
}

.tab-fade-out-end {
    opacity: 0;
}

.tab-panel--active {
    animation: tabFadeIn 0.15s ease;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Site-wide Tutorial Toggle ── */
.tutorial-toggle {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    border: 1.5px solid var(--gold, var(--color-gold-bright));
    background: transparent;
    color: var(--gold, var(--color-gold-bright));
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0;
}

@media (hover: hover) and (pointer: fine) {

.tutorial-toggle:hover {
    background: var(--gold, var(--color-gold-bright));
    color: #000;
}
}

.tutorial-panel {
    font-size: 0.75rem;
    color: var(--text-secondary, var(--text-gray-aaa));
    line-height: 1.6;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
}

.tutorial-panel strong {
    color: var(--gold, var(--color-gold-bright));
    font-weight: 700;
}

/* ─── Colorblind-friendly mode — red/blue + green/orange swap ─── */
.mode-colorblind {
    --color-rust: #3a86ff;
    --color-rust-dim: #1a3a7a;
    --color-rust-bright: #5a9eff;
    --color-rust-soft: rgba(58, 134, 255, 0.08);
    --color-rust-rgb: 58, 134, 255;
    --color-cash: #e8913a;
    --color-cash-rgb: 232, 145, 58;
    --color-dirty: #3a86ff;
    --color-success: #c97a20;
    --color-danger: #1a3a7a;
    --color-stat-strength: #3a86ff;
    --color-stat-agility: #e8913a;
    --color-stat-charisma: #3a86ff;
    --color-stat-resilience: #1a3a7a;
    --color-stock-up: #e8913a;
    --color-stock-down: #1a3a7a;
    --color-hospitalized: #1a3a7a;
    --color-online: #e8913a;
    --color-tier-organized: #e8913a;
    --color-rank-underboss: #3a86ff;
    --color-gold: #5eead4;
    --color-gold-rgb: 94, 234, 212;
    --color-gold-dim: #2dd4bf;
    /* gold aliases — follow the colorblind gold swap */
    --rarity-special: #5eead4;
    --money-whale: #5eead4;
    --theme-gold-standard: #5eead4;
    --smug-gold: #5eead4;
}

.mode-colorblind .p-hero,
.mode-colorblind .p-section,
.mode-colorblind .p-actions,
.mode-colorblind .p-header {
    border-color: #5eead4;
}

.mode-colorblind .progress__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 4px,
            rgba(255, 255, 255, 0.12) 4px,
            rgba(255, 255, 255, 0.12) 8px);
    pointer-events: none;
}

.mode-colorblind .progress__fill {
    position: relative;
    overflow: hidden;
}

.mode-colorblind .gauges__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 4px,
            rgba(0, 0, 0, 0.12) 4px,
            rgba(0, 0, 0, 0.12) 8px);
    pointer-events: none;
}

.mode-colorblind .gauges__fill {
    position: relative;
    overflow: hidden;
}

.mode-colorblind .skill-card--strength,
.mode-colorblind .skill-card--charisma {
    --card-glow: rgba(58, 134, 255, 0.3);
    border-color: var(--color-rust) !important;
}

.mode-colorblind .skill-card--agility {
    --card-glow: rgba(232, 145, 58, 0.3);
    border-color: var(--color-cash) !important;
}

.mode-colorblind .profile__badge--killer {
    background: var(--color-dirty) !important;
}

.mode-colorblind .profile__badge--financier {
    background: var(--color-cash) !important;
}

.mode-colorblind .rep__bar-fill {
    background: linear-gradient(90deg, var(--color-dirty), var(--color-cash)) !important;
}

.mode-colorblind .travel__card--available {
    border-color: var(--color-cash) !important;
}

.mode-colorblind .travel__card--locked {
    border-color: var(--color-danger) !important;
}

.mode-colorblind .tribute__toast--success {
    background: var(--color-success) !important;
}

.mode-colorblind .tribute__toast--fail {
    background: var(--color-danger) !important;
}

.mode-colorblind .stat--positive {
    color: var(--color-cash) !important;
}

.mode-colorblind .stat--negative {
    color: var(--color-dirty) !important;
}

.mode-colorblind .stock__flash--up {
    background: rgba(232, 145, 58, .15) !important;
}

.mode-colorblind .stock__flash--down {
    background: rgba(58, 134, 255, .15) !important;
}

.mode-colorblind .progress__fill--health {
    background: var(--color-rust) !important;
}

.mode-colorblind .progress__fill--stamina {
    background: var(--color-cash) !important;
}

.mode-colorblind .progress__fill--energy {
    background: var(--color-info) !important;
}

/* Swap red→blue, green→orange on inline-styled elements */
.mode-colorblind [style*="var(--color-rust-bright)"],
.mode-colorblind [style*="var(--color-rust-bright)"],
.mode-colorblind [style*="var(--color-red-soft)"],
.mode-colorblind [style*="var(--color-red-soft)"],
.mode-colorblind [style*="var(--color-rust)"],
.mode-colorblind [style*="var(--color-rust)"] {
    filter: hue-rotate(200deg);
}

.mode-colorblind [style*="var(--color-positive)"],
.mode-colorblind [style*="var(--color-positive)"],
.mode-colorblind [style*="#22c55e"],
.mode-colorblind [style*="#22C55E"],
.mode-colorblind [style*="var(--color-cash)"],
.mode-colorblind [style*="var(--color-cash)"] {
    filter: hue-rotate(130deg);
}

/* Colorblind toggle button — fixed top-left */
.cb-toggle-fixed {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 99999;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.5);
    color: var(--text-secondary, var(--text-gray-aaa));
    font-size: 0.8125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
    backdrop-filter: blur(2px);
}

@media (hover: hover) and (pointer: fine) {

.cb-toggle-fixed:hover {
    border-color: var(--color-gold, var(--color-gold));
    color: var(--color-gold, var(--color-gold));
    background: rgba(var(--color-gold-rgb), 0.1);
}
}

.cb-toggle-fixed--active {
    border-color: var(--color-gold, var(--color-gold));
    color: var(--color-gold, var(--color-gold));
    background: rgba(var(--color-gold-rgb), 0.15);
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.3);
}

/* ── Floating Chat Button (FAB) ── */
.chat-fab {
    position: fixed;
    bottom: 12px;
    right: 12px;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(var(--color-gold-rgb), 0.3);
    background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.7), rgba(var(--color-amber-rgb), 0.5));
    color: var(--bg-viewport);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--color-gold-rgb), 0.25);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
    z-index: 9999;
}

@media (hover: hover) and (pointer: fine) {

.chat-fab:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 30px rgba(var(--color-gold-rgb), 0.4);
}
}

.chat-fab:active {
    transform: scale(0.95);
}

.chat-fab--hidden {
    opacity: 0;
    transform: scale(0.4) rotate(-15deg);
    pointer-events: none;
}

.chat-fab__icon {
    font-size: 1.25rem;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-fab__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 1.125rem;
    height: 1.125rem;
    background: var(--color-rust-bright);
    color: var(--text-primary);
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-viewport);
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s, transform 0.2s;
}

.chat-fab__badge--active {
    opacity: 1;
    transform: scale(1);
}

/* ── Chat Panel ── */
.chat-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
    pointer-events: none;
}

.chat-backdrop--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.chat-panel {
    position: fixed;
    bottom: 12px;
    right: 12px;
    width: 440px;
    max-width: calc(100vw - 24px);
    height: min(540px, calc(100vh - 90px));
    height: min(540px, calc(100dvh - 90px));
    background: #0b0908;
    border: 1px solid #332922;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 20px rgba(212, 163, 57, 0.08);
    transform-origin: bottom right;
    /* Soft fade-and-rise instead of the old scale(0.08) corner zoom,
       which read as abrupt/janky on desktop. GPU-composited transform +
       opacity only, so the open/close stays at 60fps. */
    transform: scale(0.94) translateY(14px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.35s;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    contain: layout style paint;
}

.chat-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4a339, transparent);
    z-index: 10;
}

.chat-panel--open {
    transform: scale(1) translate(0, 0);
    opacity: 1;
    visibility: visible;
}

/* Lock page scroll while the chat panel is open (mirrors body.jail-modal-open) */
body.chat-panel-open {
    overflow: hidden;
}

/* Lock page scroll while the notification panel is open (desktop) */
body.notif-panel-open {
    overflow: hidden;
}

/* ---------- HEADER ---------- */
.chat-head,
.chat-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid #332922;
    background: #161210;
    flex: 0 0 auto;
}

.chat-head-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.chat-head-title svg {
    width: 19px;
    height: 19px;
    color: #d4a339;
}

.chat-head-title i {
    font-size: 16px;
    color: #d4a339;
}

.chat-head-title .chat-panel__title,
.chat-head-title h1 {
    font-family: 'Playfair Display', var(--font-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d4a339;
}

.close-btn,
.chat-panel__close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1e1815;
    border: 1px solid #332922;
    color: #a89a8a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

@media (hover: hover) and (pointer: fine) {

.close-btn:hover,
.chat-panel__close:hover {
    background: rgba(192, 57, 43, 0.2);
    border-color: #c0392b;
    color: #ece6dd;
}
}

.close-btn svg,
.chat-panel__close svg {
    width: 14px;
    height: 14px;
}

/* ---------- TABS ---------- */
.chat-tabs,
.chat-panel__tabs {
    display: flex;
    border-bottom: 1px solid #332922;
    background: #0b0908;
    flex: 0 0 auto;
}

.chat-tab,
.chat-panel__tab {
    flex: 1;
    position: relative;
    padding: 11px 8px 10px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: #6f6258;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    transition: color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {

.chat-tab:hover,
.chat-panel__tab:hover {
    color: #a89a8a;
}
}

.chat-tab.chat-panel__tab--active,
.chat-tab.active {
    color: #d4a339;
}

.chat-tab.chat-panel__tab--active::after,
.chat-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: #d4a339;
}

.unread {
    position: absolute;
    top: 3px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #c0392b;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.unread[hidden] {
    display: none !important;
}

/* ---------- CARTEL BANNER ---------- */
.cartel-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #1e1815;
    border-bottom: 1px solid #332922;
    flex: 0 0 auto;
}

.cartel-crest {
    width: 30px;
    height: 30px;
    border: 1px solid #8a6c2c;
    background: rgba(212, 163, 57, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4a339;
    flex: 0 0 auto;
}

.cartel-crest svg {
    width: 15px;
    height: 15px;
}

.cartel-banner-text {
    line-height: 1.25;
}

.cartel-banner-text .name {
    font-family: 'Playfair Display', var(--font-serif);
    font-weight: 700;
    font-size: 13px;
    color: #ece6dd;
}

.cartel-banner-text .sub {
    font-size: 10.5px;
    color: #6f6258;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cartel-banner-text .sub .chat-cartel-online {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #7bc47f;
}

.cartel-banner-text .sub .chat-cartel-online i {
    font-size: 7px;
}

.cartel-banner--has-image .cartel-banner-text .name,
.cartel-banner--has-image .cartel-banner-text .sub {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

/* ---------- CHAT CONTENT & BODY ---------- */
.chat-panel__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
}

.chat-panel__tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chat-panel__tab-content--hidden {
    display: none !important;
}

.chat-body,
.chat-msg-list {
    flex: 1 1 auto;
    overflow-y: auto;
    scroll-behavior: auto;
    overscroll-behavior: contain;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    background: #0b0908;
}

/* ---------- DIVIDERS & SYSTEM MESSAGES ---------- */
.date-divider,
.chat-day-sep {
    align-self: center;
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6f6258;
    padding: 4px 12px;
    border: 1px solid #332922;
    border-radius: 12px;
    background: #1e1815;
    margin: 4px auto;
}

.sys-msg,
.chat-sys-msg {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: #a89a8a;
    padding: 5px 12px;
    border: 1px dashed #332922;
    background: rgba(255, 255, 255, 0.02);
    margin: 4px auto;
}

.sys-msg svg,
.chat-sys-msg svg {
    width: 12px;
    height: 12px;
    color: #d4a339;
}

.sys-msg b,
.chat-sys-msg b {
    color: #d4a339;
    font-weight: 700;
}

/* ---------- MESSAGE GROUPS ---------- */
.msg-group,
.chat-msg {
    display: flex;
    gap: 9px;
    max-width: 88%;
    width: auto;
    align-self: flex-start;
}

.msg-group.out,
.chat-msg--self {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: 82%;
}

.chat-msg--grouped {
    margin-top: -6px;
}

.chat-msg--grouped .m-avatar,
.chat-msg--grouped .chat-msg__avatar {
    visibility: hidden;
}

.m-avatar,
.chat-msg__avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #241d19;
    border: 1.5px solid #332922;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a89a8a;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 11px;
    margin-top: 14px;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.chat-msg__avatar[data-profile-id],
.chat-dm-header__avatar[data-profile-id] {
    cursor: pointer;
}

.chat-msg__avatar[data-profile-id]:hover,
.chat-dm-header__avatar[data-profile-id]:hover {
    transform: scale(1.08);
    border-color: rgba(var(--color-gold-rgb), 0.5);
}

.chat-msg--self .m-avatar,
.chat-msg--self .chat-msg__avatar {
    display: none;
}

.chat-msg__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.msg-group.out .m-stack,
.chat-msg--self .m-stack {
    align-items: flex-end;
}

.m-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 2px;
}

.msg-group.out .m-name-row,
.chat-msg--self .m-name-row {
    padding-right: 2px;
}

.m-name {
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 700;
    color: #a89a8a;
}

.chat-user-wrap {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 4px;
}

.chat-msg__vip-badge {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex: 0 0 auto;
    vertical-align: middle;
    display: inline-block;
}
.chat-msg__tester-badge {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
    display: inline-block;
    line-height: 1.2;
}

.m-role {
    font-size: 8.5px;
    color: #6f6258;
    border: 1px solid #332922;
    padding: 1px 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bubble,
.chat-msg__bubble {
    background: #1e1815;
    border: 1px solid #332922;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #ece6dd;
    word-break: break-word;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.msg-group.out .bubble,
.chat-msg--self .bubble,
.chat-msg--self .chat-msg__bubble {
    background: rgba(212, 163, 57, 0.12);
    border-color: #8a6c2c;
    border-radius: 6px;
    color: #ece6dd;
}

.m-time {
    font-size: 9.5px;
    color: #6f6258;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.msg-group.out .m-time,
.chat-msg--self .m-time {
    text-align: right;
    justify-content: flex-end;
}

.chat-msg__tick {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: #6f6258;
    margin-left: 2px;
}

.chat-msg__tick--read {
    color: #d4a339;
}

.chat-msg__tick--pending {
    opacity: 0.6;
    font-size: 8.5px;
}

.chat-msg__tick--failed {
    color: #e74c3c;
    font-size: 9px;
}

.chat-msg__link {
    color: #d4a339;
    text-decoration: underline;
}

/* ---------- TYPING INDICATOR ---------- */
.typing,
.chat-typing-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px 6px 41px !important;
    font-size: 11px !important;
    color: var(--text-tertiary, #8a857c) !important;
    flex-shrink: 0 !important;
}

.typing .dots,
.chat-typing-bubble {
    display: inline-flex !important;
    gap: 3px !important;
    align-items: center !important;
    height: 12px !important;
}

.typing .dots span,
.chat-typing-dot {
    display: inline-block !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #d4af37 !important;
    animation: typing-dot-bounce 1.2s infinite ease-in-out both !important;
}

.typing .dots span:nth-child(1),
.chat-typing-dot:nth-child(1) {
    animation-delay: -0.32s !important;
}

.typing .dots span:nth-child(2),
.chat-typing-dot:nth-child(2) {
    animation-delay: -0.16s !important;
}

.typing .dots span:nth-child(3),
.chat-typing-dot:nth-child(3) {
    animation-delay: 0s !important;
}

@keyframes typing-dot-bounce {
    0%, 80%, 100% {
        transform: translateY(0) scale(0.75);
        opacity: 0.35;
    }
    40% {
        transform: translateY(-3px) scale(1.1);
        opacity: 1;
    }
}

/* ---------- CHAT SKELETON & HISTORY LOADER ---------- */
@keyframes chat-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.chat-history-loader {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 4px 12px 4px;
    width: 100%;
    animation: fadeIn 0.2s ease;
    flex-shrink: 0;
}

.chat-skeleton-row {
    display: flex;
    gap: 9px;
    max-width: 80%;
    align-items: flex-start;
}

.chat-skeleton-row--self {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: 65%;
}

.chat-skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, #1e1815 25%, #2a221d 50%, #1e1815 75%);
    background-size: 200% 100%;
    animation: chat-shimmer 1.4s infinite ease-in-out;
}

.chat-skeleton-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.chat-skeleton-line {
    height: 9px;
    border-radius: 4px;
    background: linear-gradient(90deg, #1e1815 25%, #2a221d 50%, #1e1815 75%);
    background-size: 200% 100%;
    animation: chat-shimmer 1.4s infinite ease-in-out;
}

.chat-skeleton-line--name {
    width: 70px;
    height: 8px;
}

.chat-skeleton-bubble {
    height: 28px;
    border-radius: 12px;
    border-top-left-radius: 2px;
    width: 160px;
    background: linear-gradient(90deg, #191411 25%, #261f1a 50%, #191411 75%);
    background-size: 200% 100%;
    animation: chat-shimmer 1.4s infinite ease-in-out;
    border: 1px solid rgba(212, 163, 57, 0.08);
}

.chat-skeleton-row--self .chat-skeleton-bubble {
    border-radius: 12px;
    border-top-right-radius: 2px;
    width: 130px;
    background: linear-gradient(90deg, #241c14 25%, #34281b 50%, #241c14 75%);
    background-size: 200% 100%;
    animation: chat-shimmer 1.4s infinite ease-in-out;
}

/* ---------- INPUT BAR ---------- */
.chat-input,
.chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #332922;
    background: #161210;
    flex: 0 0 auto;
}

.chat-input-field,
.chat-input input {
    flex: 1;
    min-width: 0;
    background: #1e1815;
    border: 1px solid #332922;
    color: #ece6dd;
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 9px 12px;
    outline: none;
    transition: border-color 0.15s;
}

.chat-input-field::placeholder,
.chat-input input::placeholder {
    color: #6f6258;
}

.chat-input-field:focus,
.chat-input input:focus {
    border-color: #8a6c2c;
}

.send-btn,
.chat-send-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    background: #d4a339;
    border: none;
    color: #0b0908;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

@media (hover: hover) and (pointer: fine) {

.send-btn:hover,
.chat-send-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}
}

.send-btn:active,
.chat-send-btn:active {
    transform: scale(0.96);
}

.send-btn svg,
.chat-send-btn svg {
    width: 16px;
    height: 16px;
}

.send-btn:disabled,
.chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------- CHAT PANEL INPUT BOX (input + send inside a single pill) ---------- */
.chat-panel .chat-input-box {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1e1815;
    border: 1px solid #332922;
    border-radius: 22px;
    padding: 4px 5px 4px 14px;
    transition: border-color 0.15s;
}

.chat-panel .chat-input-box:focus-within {
    border-color: #8a6c2c;
}

.chat-panel .chat-input-field,
.chat-panel .chat-input-box .chat-input {
    flex: 1;
    min-width: 0;
    display: block;
    background: transparent;
    border: none;
    color: #ece6dd;
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 8px 0;
    outline: none;
    transition: none;
}

.chat-panel .chat-input-box .send-btn,
.chat-panel .chat-input-box .chat-send-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #d4a339;
    border: none;
    color: #0b0908;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

@media (hover: hover) and (pointer: fine) {

.chat-panel .chat-input-box .send-btn:hover,
.chat-panel .chat-input-box .chat-send-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}
}

.chat-panel .chat-input-box .send-btn:active,
.chat-panel .chat-input-box .chat-send-btn:active {
    transform: scale(0.96);
}

.chat-panel .chat-input-box .send-btn:disabled,
.chat-panel .chat-input-box .chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 479.98px) {
    .chat-panel {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        bottom: 0;
        right: 0;
        border: none;
    }
}

/* Sent confirmation pulse. Added by chat.js sendNow() right after a successful
   send; removed ~400ms later so the button reverts to its normal disabled
   state for the remainder of the 2-second throttle. */
.chat-send-btn.is-sent {
    /* position:relative anchors the ✓ ::after below */
    position: relative;
    background: rgba(86, 201, 160, 0.22);
    color: #000;
    border: 1px solid rgba(86, 201, 160, 0.55);
    animation: chat-send-sent-pulse 320ms ease-out;
}
.chat-send-btn.is-sent:disabled {
    /* Override the .chat-send-btn:disabled opacity:0.5 so the pulse stays
       bright during the brief 400ms confirmation window. */
    opacity: 1;
    cursor: default;
}
.chat-send-btn.is-sent > i {
    /* Hide the paper-plane icon while the ✓ ::after renders in its place. */
    opacity: 0;
}
.chat-send-btn.is-sent::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(38, 138, 96, 1);
    pointer-events: none;
}
@keyframes chat-send-sent-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* ── Chat Empty State ── */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    text-align: center;
}

.chat-empty i {
    font-size: 1.25rem;
    opacity: 0.5;
}

/* ── DM List ── */
.chat-dm-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scroll-behavior: smooth;
    flex: 1;
}

/* ── DM Conversation List ── */
.chat-dm-search {
    padding: 0.75rem 0.875rem;
    flex: 0 0 auto;
    position: relative;
}
.chat-dm-search__box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid rgba(var(--color-gold-rgb), 0.12);
    padding: 0.5625rem 0.75rem;
    transition: border-color 0.15s;
    position: relative;
}
.chat-dm-search__box:focus-within {
    border-color: rgba(var(--color-gold-rgb), 0.35);
}
.chat-dm-search__icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--text-tertiary);
    flex: 0 0 auto;
}
.chat-dm-search__input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 0.8125rem;
}
.chat-dm-search__input::placeholder {
    color: var(--text-tertiary);
}
.chat-dm-search__clear {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}
.chat-dm-search__clear svg {
    width: 12px;
    height: 12px;
}
@media (hover: hover) and (pointer: fine) {
.chat-dm-search__clear:hover {
    color: var(--text-primary);
}
}

/* ── Floating Search Filter Dropdown ── */
.chat-dm-search__dropdown {
    position: absolute;
    top: calc(100% - 4px);
    left: 0.875rem;
    right: 0.875rem;
    background: #191411;
    border: 1px solid rgba(var(--color-gold-rgb), 0.25);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 1px rgba(212, 163, 57, 0.2);
    max-height: 280px;
    overflow-y: auto;
    z-index: 120;
}
.chat-dm-search__group-title {
    padding: 0.5rem 0.75rem 0.25rem;
    font-family: var(--font-primary);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold-dim);
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.chat-dm-search__group-title:first-child {
    border-top: none;
}
.chat-dm-search__result-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    text-align: left;
}
@media (hover: hover) and (pointer: fine) {
.chat-dm-search__result-item:hover,
.chat-dm-search__result-item:focus {
    background: rgba(212, 163, 57, 0.12);
}
}
.chat-dm-search__no-results {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.chat-dm-item {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    padding: 0.6875rem 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    text-align: left;
    width: 100%;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
}
@media (hover: hover) and (pointer: fine) {
.chat-dm-item:hover {
    background: rgba(255, 255, 255, 0.03);
}
}
.chat-dm-item:active {
    background: rgba(255, 255, 255, 0.02);
}
.chat-dm-item--unread {
    background: linear-gradient(90deg, rgba(192, 57, 43, 0.09) 0%, rgba(25, 20, 18, 0.55) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
@media (hover: hover) and (pointer: fine) {
.chat-dm-item--unread:hover {
    background: linear-gradient(90deg, rgba(192, 57, 43, 0.15) 0%, rgba(32, 26, 23, 0.75) 100%);
}
}

.chat-dm-item__avatar {
    position: relative;
    flex: 0 0 auto;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-color-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-dm-item--unread .chat-dm-item__avatar {
    border-color: rgba(212, 163, 57, 0.65);
    box-shadow: 0 0 8px rgba(212, 163, 57, 0.2);
}
.chat-dm-item__dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 0.6875rem;
    height: 0.6875rem;
    border-radius: 50%;
    background: var(--green-1);
    border: 2px solid var(--bg-deep);
    z-index: 1;
}
.chat-dm-item__dot.off {
    background: var(--color-rust-bright);
}

.chat-dm-item__info {
    flex: 1;
    min-width: 0;
}
.chat-dm-item__name {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.84375rem;
    color: var(--text-dim);
}
.chat-dm-item--unread .chat-dm-item__name {
    color: #ffffff;
    font-weight: 700;
}
.chat-dm-item__name .chat-msg__vip-badge {
    width: 12px;
    height: 12px;
}
.chat-dm-item__time {
    margin-left: auto;
    font-size: 0.65625rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}
.chat-dm-item--unread .chat-dm-item__time {
    color: #e5a93c;
    font-weight: 600;
}
.chat-dm-item__preview {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-dm-item__preview .you {
    color: var(--text-dim);
    flex: 0 0 auto;
}
.chat-dm-item--unread .chat-dm-item__preview {
    color: #e2dacd;
    font-weight: 500;
}
.chat-dm-item__badge {
    flex: 0 0 auto;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.35rem;
    border-radius: 0.5625rem;
    background: linear-gradient(135deg, #c0392b 0%, #962d22 100%);
    box-shadow: 0 2px 6px rgba(192, 57, 43, 0.4);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-dm-item__delete {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: #6f6258;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

@media (hover: hover) and (pointer: fine) {

.chat-dm-item:hover .chat-dm-item__delete {
    opacity: 0.85;
}
}

@media (hover: hover) and (pointer: fine) {

.chat-dm-item__delete:hover {
    opacity: 1 !important;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.12);
}
}

.chat-dm-item__delete svg {
    width: 13px;
    height: 13px;
    pointer-events: none;
}

.chat-dm-search-empty {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    display: none;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
}

/* "People" section header shown above player-search results inside the list */
.chat-dm-people-label {
    padding: 0.625rem 0.875rem 0.25rem;
    font-family: var(--font-primary);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gold-dim);
}

/* ── DM Thread ── */
.chat-dm-thread {
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chat-dm-header {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #161210;
    border-bottom: 1px solid #332922;
    flex: 0 0 auto;
}

.chat-dm-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1e1815;
    border: 1px solid #332922;
    color: #d4a339;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.15s, color 0.15s;
}

@media (hover: hover) and (pointer: fine) {

.chat-dm-back:hover {
    background: rgba(212, 163, 57, 0.15);
    border-color: #d4a339;
}
}

.chat-dm-back svg {
    width: 14px;
    height: 14px;
}

.chat-dm-header__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #241d19;
    border: 1.5px solid #332922;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.chat-dm-header__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-dm-header__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-dm-header__title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-dm-header__name {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 700;
    color: #ece6dd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-dm-header__sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: #6f6258;
    letter-spacing: 0.02em;
}

.chat-dm-header__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green, #4a8c5c);
    flex: 0 0 auto;
}

/* ── Security / Syndicate Encryption Banner ── */
.chat-security-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px auto 12px;
    padding: 6px 12px;
    background: rgba(212, 163, 57, 0.04);
    border: 1px dashed rgba(212, 163, 57, 0.2);
    border-radius: 4px;
    max-width: 90%;
    font-size: 10.5px;
    color: #8a6c2c;
    text-align: center;
    line-height: 1.35;
}

.chat-security-banner svg {
    width: 12px;
    height: 12px;
    color: #d4a339;
    flex: 0 0 auto;
}

/* ── Floating New Messages Scroll Pill ── */
.chat-new-pill {
    position: absolute;
    bottom: 58px;
    left: 50%;
    transform: translateX(-50%);
    background: #d4a339;
    color: #0b0908;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    z-index: 20;
    transition: opacity 0.2s, transform 0.2s;
    animation: chat-pill-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-new-pill svg {
    width: 12px;
    height: 12px;
}

.chat-new-pill[hidden] {
    display: none !important;
}

@keyframes chat-pill-pop {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Chat Panel Content Layout ── */
.chat-panel__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chat-panel__tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chat-panel__tab-content--hidden {
    display: none !important;
}

/* ── Friends List ── */
.chat-friends-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #332922;
    font-size: 0.8125rem;
}

.chat-friends-header__label {
    font-weight: 700;
    color: #ece6dd;
}

.chat-friends-header__max {
    font-weight: 400;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.chat-friends-header__count {
    font-weight: 700;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.chat-friends-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
}

.chat-friend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #332922;
    transition: background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {

.chat-friend-item:hover {
    background: rgba(255, 255, 255, 0.02);
}
}

.chat-friend-item__avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.chat-friend-item__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #241d19;
    border: 1.5px solid #332922;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a89a8a;
    font-weight: 700;
    font-size: 11px;
    overflow: hidden;
}

.chat-friend-item__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-friend-item__status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-rust-bright);
    border: 2px solid #0b0908;
}

.chat-friend-item__status-dot--online {
    background: var(--green, #4a8c5c);
    box-shadow: 0 0 6px rgba(74, 140, 92, 0.6);
}

.chat-friend-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-friend-item__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-friend-item__name {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 700;
    color: #ece6dd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-friend-item__sub {
    font-size: 10px;
    color: #6f6258;
}

.chat-friend-item__sub--online {
    color: var(--green, #4a8c5c);
}

.chat-friend-item__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.chat-friend-btn {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    font-family: var(--font-sans);
    transition: background 0.15s, color 0.15s;
}

.chat-friend-btn--msg {
    background: rgba(212, 163, 57, 0.12);
    color: #d4a339;
    border: 1px solid rgba(212, 163, 57, 0.35);
    padding: 5px 12px;
    font-size: 11px;
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(212, 163, 57, 0.08);
    transition: all 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {

.chat-friend-btn--msg:hover {
    background: linear-gradient(135deg, rgba(212, 163, 57, 0.3), rgba(212, 163, 57, 0.15));
    color: #f0c850;
    border-color: rgba(212, 163, 57, 0.6);
    box-shadow: 0 0 12px rgba(212, 163, 57, 0.2);
    transform: translateY(-1px);
}
}

.chat-friend-btn--msg:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 0 4px rgba(212, 163, 57, 0.15);
}

.chat-friend-btn--remove {
    background: transparent;
    color: #6f6258;
    border: 1px solid transparent;
    padding: 4px 6px;
}

@media (hover: hover) and (pointer: fine) {

.chat-friend-btn--remove:hover {
    color: #c0392b;
}
}

/* ── Mobile Responsive ── */
@media (max-width: 1023.98px) {
    .chat-fab {
        bottom: calc(3rem + env(safe-area-inset-bottom, 0));
        right: 6px;
        width: 2.25rem;
        height: 2.25rem;
    }

    .chat-fab__icon {
        font-size: 1.125rem;
    }

    .chat-panel {
        /* Mobile: panel takes nearly the full screen with a thin edge gutter
           so messages aren't squeezed into a narrow column. */
        width: calc(100% - 16px);
        max-width: 380px;
        max-height: 58vh;
        bottom: calc(3rem + env(safe-area-inset-bottom, 0));
        right: 6px;
        left: auto;
        border-radius: 0.75rem;
        transform-origin: bottom right;
        transform: scale(0.9) translateY(10px);
        opacity: 0;
        pointer-events: none;
    }

    .chat-panel--open {
        transform: scale(1) translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .notif-panel {
        width: calc(100% - 64px) !important;
        max-width: 260px !important;
        max-height: 55vh !important;
        height: auto !important;
        overflow: visible !important;
        top: auto;
        bottom: 115px;
        right: calc(12px + 2.25rem + 0.5rem);
        left: auto;
        border-radius: 0.75rem;
        border-left: none;
        transform-origin: bottom right;
        transform: scale(0.9) translateY(10px) !important;
        opacity: 0;
        pointer-events: none;
    }

    .notif-panel--open {
        transform: scale(1) translateY(0) !important;
        opacity: 1;
        pointer-events: auto;
    }

    .notif-panel__body {
        padding: 1rem;
        min-height: 300px;
    }

    .notif-panel__head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.875rem 1rem;
        background: rgba(var(--color-gold-rgb), 0.03);
    }

    .notif-panel__title {
        display: flex;
        font-size: 0.8125rem;
    }

    .notif-panel__actions {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .notif-panel__close {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        border: 1px solid var(--glass-border);
        background: var(--glass-surface);
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
    }

    .notif-panel__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        align-items: center;
        justify-content: flex-end;
    }

    .notif-panel__mark {
        white-space: normal;
        font-size: 0.4375rem;
        padding: 0.1875rem 0.375rem;
    }

    .sidebar__notif-title {
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .sidebar__notif-msg {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .sidebar__notif-time {
        font-size: 0.75rem;
    }
}




.settings-avatar-preview {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--color-gold-rgb), 0.3);
}

.settings-avatar-default {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-gold-rgb), 0.06);
}

/* ── Notification page ── */
/* .notif-page fills the content area like every other page (profile, inventory, etc.).
   No max-width cap on the outer container — wide-screen readability comes from
   capping individual message line lengths if needed, not from clamping the page. */
.notif-page {
    width: 100%;
    padding: 0.75rem;
}

.notif-page__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.2);
    margin-bottom: 0.75rem;
}

.notif-page__back {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.125rem;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
}

@media (hover: hover) and (pointer: fine) {

.notif-page__back:hover {
    color: var(--text-primary);
}
}

/* On desktop the sidebar nav already exposes the notification surface, so
   the in-page back button + duplicate title label are redundant. Hide them
   on PC; mobile keeps both. */
@media (min-width: 1024px) {
    .notif-page__back,
    .notif-page__title {
        display: none;
    }
}

.notif-page__title {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-gold);
    flex: 1;
}

.notif-page__mark {
    background: rgba(var(--color-gold-rgb), 0.12);
    border: 1px solid rgba(var(--color-gold-rgb), 0.3);
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-mobile);
    cursor: pointer;
    white-space: nowrap;
    margin-left: auto;
}

@media (hover: hover) and (pointer: fine) {

.notif-page__mark:hover {
    background: rgba(var(--color-gold-rgb), 0.2);
}
}

.notif-page__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.notif-page__empty {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    padding: 3rem 0;
}

.notif-page__load-more {
    background: rgba(var(--color-gold-rgb), 0.08);
    border: 1px solid rgba(var(--color-gold-rgb), 0.2);
    color: var(--color-gold);
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.625rem;
    border-radius: var(--radius-mobile);
    cursor: pointer;
    margin-top: 0.5rem;
    width: 100%;
}

@media (hover: hover) and (pointer: fine) {

.notif-page__load-more:hover {
    background: rgba(var(--color-gold-rgb), 0.15);
}
}

@media (min-width: 1024px) {
    .notif-page {
        /* Mirror .page-container's zero-top shape so notifications sits inside the
           same column gutter as every other page. The visible top gap above the
           NOTIFICATIONS title is now provided by .notif-page__header below. */
        padding: 0 0.5rem 0.5rem;
    }

    .notif-page__header {
        /* Match .page-heading's desktop default so the visible top gap above the
           title matches the rest of the site (~18px / 1.125rem). */
        padding: 1.125rem 0.875rem 0.375rem;
    }

    .notif-page__title {
        font-size: 1rem;
    }

    .notif-page__mark {
        font-size: 0.625rem;
        padding: 0.5rem 1rem;
    }
}

/* Mid-desktop tightening 900–1199px — match .page-heading's mid-desktop rule. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .notif-page__header {
        padding: 0.625rem 0.875rem 0.25rem;
    }
}

/* Mobile: hide empty header, match other pages' top spacing */
@media (max-width: 1023.98px) {

    .notif-page__back,
    .notif-page__title {
        display: none;
    }

    .notif-page__header {
        display: none;
    }

    .notif-page {
        padding-top: 0;
    }
}

/* Mobile XP bar visibility fix */
@media (max-width: 1023.98px) {
    .topbar__primary-row .hud-stat--xp {
        min-width: 100% !important;
        width: 100% !important;
        min-height: 2.5rem !important;
        z-index: 100 !important;
        position: relative !important;
        padding: 0.5rem 0.75rem !important;
    }

    .topbar__primary-row .hud-stat--xp .stat-track--xp {
        height: 0.5rem !important;
        width: 100% !important;
        min-width: 100% !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .topbar__primary-row .hud-stat--xp .stat-track__fill {
        width: 100% !important;
        background: var(--color-gold) !important;
        box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.6) !important;
    }

    .topbar__primary-row .hud-stat--xp .hud-stat__value {
        min-width: 4rem !important;
        color: var(--color-gold) !important;
        font-size: 0.625rem !important;
    }

    .topbar__primary-row .hud-stat--xp .hud-stat__label {
        color: var(--text-tertiary) !important;
        font-size: 0.6875rem !important;
    }

    .topbar__primary-row .hud-stat--xp .hud-stat__icon {
        width: 1rem !important;
        height: 1rem !important;
        font-size: 0.5rem !important;
        color: var(--color-gold) !important;
        border: 1px solid rgba(var(--color-gold-rgb), 0.35) !important;
        border-radius: var(--radius-ui) !important;
        background: rgba(var(--color-gold-rgb), 0.12) !important;
    }

    .topbar__primary-row .hud-stat--xp .hud-stat__xp-pct {
        display: inline-block !important;
        color: var(--color-gold) !important;
        font-size: 0.625rem !important;
        font-weight: 700 !important;
        margin-left: 0.5rem !important;
        text-shadow: 0 0 6px rgba(var(--color-gold-rgb), 0.5), 0 0 16px rgba(var(--color-gold-rgb), 0.3) !important;
    }
}

.online-users-container {
    padding: 0.5rem 0.5rem 80px;
    max-width: none;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Match the standard .page-container top and side gutters on desktop */
@media (min-width: 1024px) {
    .online-users-container {
        padding: 0 var(--desktop-gutter) 80px;
    }
}

.online-users-page {
    position: relative;
    width: 100%;
}

.online-users-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.online-users-page .search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
}

.online-users-page .search-bar svg {
    width: 15px;
    height: 15px;
    color: var(--text-dim);
    flex-shrink: 0;
}

.online-users-page .search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 13.5px;
    font-family: var(--font-primary);
}

.online-users-page .search-bar input::placeholder {
    color: var(--text-dim);
}

.online-users-page .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.1);
}

.online-users-page .tabs {
    display: flex;
    gap: 6px;
    background: var(--bg-surface, #1C1712);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 3px;
    overflow-x: auto;
}

.online-users-page .tab {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.online-users-page .tab.active {
    background: var(--color-gold);
    color: #1A1305;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.25);
}

@media (hover: hover) and (pointer: fine) {
    .online-users-page .tab:not(.active):hover {
        color: var(--text-primary);
    }
}

.online-users-page .right-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.online-users-page .live-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-online);
    white-space: nowrap;
    text-transform: uppercase;
}

.online-users-page .live-count .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-online);
    box-shadow: 0 0 6px rgba(79, 155, 92, 0.8);
    animation: ouBlink 2.4s infinite;
}

.online-users-page .sort-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.online-users-page .sort-select {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface, #1C1712);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 6px 30px 6px 12px;
    min-width: 130px;
    box-sizing: border-box;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.online-users-page .sort-select-wrap svg {
    position: absolute;
    right: 10px;
    width: 11px;
    height: 11px;
    color: var(--text-dim);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .online-users-page .sort-select:hover,
    .online-users-page .sort-select:focus {
        border-color: var(--color-gold);
        color: var(--text-primary);
    }
}

.online-users-page .list {
    display: flex;
    flex-direction: column;
}

.online-users-page .row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.12s ease;
    opacity: 0;
    animation: ouRise 0.35s ease forwards;
}

.online-users-page .row:last-child {
    border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {
    .online-users-page .row:hover {
        background: rgba(255, 255, 255, 0.02);
    }
}

.online-users-page .avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
}

.online-users-page .avatar {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #3A241C, #17110D);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.online-users-page .avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.online-users-page .avatar .fallback {
    display: block;
}

.online-users-page .avatar.avatar--vip-lite {
    border-color: #a0aab8 !important;
    box-shadow: 0 0 8px rgba(160, 170, 184, 0.35);
}

.online-users-page .avatar.avatar--vip-premium {
    border-color: #ffd76a !important;
    box-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.45);
}

.online-users-page .lv-tag {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-base, #0F0D0B);
    border: 1px solid var(--color-gold-dim);
    color: var(--color-gold);
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 3;
    letter-spacing: 0.02em;
}

.online-users-page .lv-tag--vip-lite {
    border-color: rgba(160, 170, 184, 0.6);
    color: #a0aab8;
}

.online-users-page .lv-tag--vip-premium {
    border-color: rgba(255, 215, 106, 0.7);
    color: #ffd76a;
}

.online-users-page .id {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.online-users-page .id-top {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.online-users-page .id-top-row2 {
    display: none;
}

.online-users-page .name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.online-users-page .name.vip-lite {
    color: #a0aab8 !important;
    text-shadow: 0 0 4px rgba(160, 170, 184, 0.7), 0 0 10px rgba(160, 170, 184, 0.4);
}

.online-users-page .name.vip-premium {
    color: #ffd76a !important;
    text-shadow: 0 0 6px rgba(var(--color-gold-rgb), 0.5);
}

@media (hover: hover) and (pointer: fine) {
    .online-users-page .name:hover {
        color: var(--color-gold);
    }
}

.online-users-page .badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
}

.online-users-page .badge svg {
    width: 9px;
    height: 9px;
}

.online-users-page .badge.vip.vip-lite {
    color: #a0aab8;
    border-color: rgba(160, 170, 184, 0.5);
    background: rgba(160, 170, 184, 0.12);
}

.online-users-page .badge.vip.vip-premium {
    color: #ffd76a;
    border-color: rgba(255, 215, 106, 0.6);
    background: rgba(255, 215, 106, 0.16);
    box-shadow: 0 0 6px rgba(255, 215, 106, 0.25);
}

.online-users-page .badge.cartel {
    color: #ffd866;
    border-color: rgba(255, 216, 102, 0.35);
    background: rgba(255, 216, 102, 0.1);
}

.online-users-page .badge.you {
    color: var(--text-dim);
    border-color: var(--border-color);
}

/* Mobile: swap VIP text label for badge image & remove container background */
@media (max-width: 1023px) {
    .online-users-page .badge.vip {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    .online-users-page .badge.vip .vip-icon-desktop,
    .online-users-page .badge.vip .vip-label-desktop {
        display: none;
    }
    .online-users-page .badge.vip .vip-badge-mobile {
        display: inline-block;
        height: 16px;
        width: auto;
        vertical-align: middle;
        margin: 0;
    }
}

/* Desktop: hide the mobile badge image */
.vip-badge-mobile {
    display: none;
}

.online-users-page .badge.path-badge[data-path="corrupt"] {
    color: #A78CDB;
    border-color: rgba(124, 92, 191, 0.45);
    background: rgba(124, 92, 191, 0.1);
}

.online-users-page .badge.path-badge[data-path="hustler"] {
    color: var(--color-gold-bright);
    border-color: rgba(var(--color-gold-rgb), 0.45);
    background: rgba(var(--color-gold-rgb), 0.1);
}

.online-users-page .badge.path-badge[data-path="enforcer"] {
    color: var(--color-rust-bright);
    border-color: rgba(var(--color-rust-rgb), 0.45);
    background: rgba(var(--color-rust-rgb), 0.1);
}

.online-users-page .meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.online-users-page .status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.online-users-page .dot-sm.green {
    color: var(--color-online);
}

.online-users-page .dot-sm.dim {
    color: var(--text-dim);
}

.online-users-page .badge.state-hospital {
    color: var(--color-rust-bright);
    border-color: rgba(var(--color-rust-rgb), 0.4);
    background: rgba(var(--color-rust-rgb), 0.15);
}

.online-users-page .badge.state-jail {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.15);
}

.online-users-page .badge.state-traveling {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.online-users-page .badge-icon-img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

.pr-loc-travel-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: -2px;
    margin-right: 4px;
    display: inline-block;
}

.online-users-page .actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.online-users-page .actions button {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface, #1C1712);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.online-users-page .actions button svg {
    width: 14px;
    height: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .online-users-page .actions button:hover:not(.btn--disabled) {
        border-color: var(--color-gold);
        color: var(--color-gold);
        background: rgba(var(--color-gold-rgb), 0.1);
    }

    .online-users-page .actions button.danger:hover:not(.btn--disabled) {
        border-color: var(--color-rust-bright);
        color: var(--color-rust-bright);
        background: rgba(var(--color-rust-rgb), 0.1);
    }
}

.online-users-page .actions button.btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.online-users-page .empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 13px;
}

.online-users-page .empty-state button {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--color-gold);
    padding: 6px 10px;
    border-radius: var(--radius-sharp);
    cursor: pointer;
    margin-left: 6px;
    transition: border-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .online-users-page .empty-state button:hover {
        border-color: var(--color-gold);
    }
}

.online-users-page .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.online-users-page .pagination__info {
    min-width: 96px;
    text-align: center;
}

.online-users-page .pagination__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--bg-surface, #1C1712);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 7px 12px;
    border-radius: var(--radius-sharp);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.online-users-page .pagination__btn svg {
    width: 13px;
    height: 13px;
}

@media (hover: hover) and (pointer: fine) {
    .online-users-page .pagination__btn:hover:not(:disabled) {
        border-color: var(--color-gold);
        color: var(--color-gold);
    }
}

.online-users-page .pagination__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .online-users-page .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .online-users-page .tabs {
        width: 100%;
        overflow-x: auto;
    }

    .online-users-page .right-controls {
        width: 100%;
        justify-content: space-between;
    }

    .online-users-page .row {
        gap: 10px;
        padding: 10px 12px;
    }

    .online-users-page .name {
        font-size: 14px;
    }

    /* 3-row mobile layout: row1=name+cartel+vip, row2=path+you, row3=status */
    .online-users-page .id-top-row2 {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .online-users-page .meta {
        margin-top: 2px;
    }
}

@keyframes ouRise {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ouBlink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .online-users-page .status-dot {
        animation: none;
    }
    .online-users-page .row {
        animation: none;
        opacity: 1;
    }
}

/* ── Staff Team Tabular Directory ── */
.staff-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.staff-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ui);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.staff-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--color-gold-rgb), 0.6), transparent);
}

.staff-hero__left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.staff-hero__title {
    font-family: var(--font-primary);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.staff-hero__title i {
    color: var(--color-gold);
}

.staff-hero__sub {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.staff-hero__badge {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(var(--color-gold-rgb), 0.1);
    border: 1px solid rgba(var(--color-gold-rgb), 0.3);
    color: var(--color-gold);
}

.staff-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ui);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.staff-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 600px;
}

.staff-table th {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    background: rgba(0, 0, 0, 0.35);
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--border-color);
}

.staff-table td {
    padding: 1rem 1.125rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.staff-table tr:last-child td {
    border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {

.staff-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}
}

.staff-member-cell {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.staff-avatar-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.staff-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sharp);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.staff-avatar--vip {
    box-shadow: 0 0 0 1px rgba(255, 216, 102, 0.5), 0 0 5px rgba(255, 216, 102, 0.2);
}

.staff-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-panel);
}

.staff-dot--online {
    background: var(--color-positive);
    box-shadow: 0 0 6px var(--color-positive);
}

.staff-dot--offline {
    background: var(--color-rust-bright);
}

.staff-member-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.staff-member-name {
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {

.staff-member-name:hover {
    color: var(--color-gold);
}
}

.staff-role-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.staff-role-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ff4d4d;
    background: rgba(255, 77, 77, 0.12);
    border: 1px solid rgba(255, 77, 77, 0.4);
    padding: 2px 8px;
    border-radius: var(--radius-sharp);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 0 8px rgba(255, 77, 77, 0.2);
    width: fit-content;
}

.staff-role-desc {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.staff-level-pill {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sharp);
    color: var(--text-secondary);
    display: inline-block;
}

.staff-status-text {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.staff-status-text--online {
    color: var(--color-positive);
}

.staff-status-text--offline {
    color: var(--text-tertiary);
}

.staff-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.staff-action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sharp);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {

.staff-action-btn:hover {
    background: rgba(var(--color-gold-rgb), 0.15);
    border-color: var(--color-gold);
    color: var(--color-gold);
    transform: translateY(-1px);
}
}

@media (max-width: 640px) {
    .staff-hero {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .staff-table-wrap {
        overflow-x: visible;
    }

    .staff-table {
        min-width: 0;
        display: block;
        width: 100%;
    }

    .staff-table thead {
        display: none;
    }

    .staff-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
        padding: 0.875rem;
    }

    .staff-table tr {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
        background: var(--bg-panel);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-ui);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .staff-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        border-bottom: none;
        width: 100%;
        box-sizing: border-box;
    }

    .staff-table td[data-label="Staff Member"] {
        padding-bottom: 0.625rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .staff-table td[data-label="Actions"] {
        padding-top: 0.625rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        justify-content: flex-end;
    }

    .staff-table td:not([data-label="Staff Member"]):not([data-label="Actions"])::before {
        content: attr(data-label);
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-tertiary);
    }
}

/* ╔═══════════════════════════════════════════════════════════════════
   ║  DASHBOARD (index.html only) — DISABLE COLLAPSIBLE ON MOBILE/TABLET
   ║  The Missions + Skill <details> cards stay always-expanded at
   ║  widths ≤ 899px (~900px): no chevron, default cursor, no
   ║  pointer/focus interaction, and content stays visible even if
   ║  the [open] attribute is somehow lost. Scope `.dashboard`
   ║  matches the page wrapper used ONLY by views/index.html.
   ╚═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
    .dashboard details.card > summary {
        cursor: default;
        pointer-events: none;
        user-select: none;
    }
    .dashboard details.card .card-header__chevron,
    .dashboard details.card > summary::after,
    .dashboard details.card > summary::-webkit-details-marker,
    .dashboard details.card > summary::marker {
        display: none !important;
    }
    /* Belt-and-suspenders: if any other rule toggled the [open] attr,
       force the non-summary children visible so users always see content. */
    .dashboard details.card:not([open]) > :not(summary) {
        display: block !important;
    }
}

/* ╔═══════════════════════════════════════════════════════════════════
   ║  HERO — REDUCE TOP GAP ON MOBILE/TABLET
   ║  The hero section currently sits ~9.5rem below the topbar at narrow
   ║  widths (topbar + main padding + #page-content margin-top + hero
   ║  margin). For mobile we trim the dominant #page-content margin-top
   ║  from 2rem to 0.5rem so the briefing is closer to the topbar.
   ║  Source-order override (later in tail) beats the existing rule at L2430.
   ╚═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
    /* Scope: only #page-content that contains a .dashboard — which ships
       only on views/index.html. Uses CSS :has() (project already uses this
       in inventory.css so it's conformant). On browsers without :has() support
       the rule silently no-ops and the original 2rem is retained — safe fall. */
    #page-content:has(.dashboard) { margin-top: 0.5rem; }
    /* .hero itself ships only on views/index.html, so the plain selector is fine. */
    .hero { margin-top: 0.375rem; }
}

/* ============================================================
   Notification Panel v2 — PC-focused upgrades
   Overrides + additions for the panel + page-level filters.
   Appended after existing notifications block (line ~1340)
   and the desktop popover override (line ~9859). New rules
   either override the existing media query with !important
   or stack via later-source-order specificity.
   ============================================================ */

/* Show title group by default (override original display:none) */
.notif-panel__title {
    display: flex;
}

.notif-panel__title-group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.notif-panel__count {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    transition: color 0.2s, text-shadow 0.2s;
}

.notif-panel__count--has-unread {
    color: var(--color-gold);
    text-shadow: 0 0 6px rgba(var(--color-gold-rgb), 0.4);
}

/* Filter chip strip */
.notif-panel__filters {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.08);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.notif-panel__filters::-webkit-scrollbar { display: none; }

.notif-panel__filters[hidden] { display: none; }

.notif-chip {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
    font-family: var(--font-sans);
}

@media (hover: hover) and (pointer: fine) {

.notif-chip:hover {
    border-color: rgba(var(--color-gold-rgb), 0.35);
    color: var(--text-primary);
}
}

.notif-chip--active {
    background: rgba(var(--color-gold-rgb), 0.18);
    border-color: rgba(var(--color-gold-rgb), 0.5);
    color: var(--color-gold);
    text-shadow: 0 0 6px rgba(var(--color-gold-rgb), 0.25);
}

/* Round icon buttons: filter, clear, close.
   On mobile we keep the original loose touch targets so one-handed users
   don't lose fat-finger surface area; only on desktop do we tighten them
   into a compact circular pill row. */
@media (min-width: 1024px) {
    .notif-panel__filter-btn,
    .notif-panel__clear,
    .notif-panel__close {
        width: 1.875rem;
        height: 1.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 0.75rem;
        border: 1px solid var(--glass-border);
        background: var(--glass-surface);
        color: var(--text-tertiary);
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
        padding: 0;
        font-family: var(--font-sans);
        line-height: 1;
    }
}

@media (hover: hover) and (pointer: fine) {

.notif-panel__filter-btn:hover {
    color: var(--color-gold);
    border-color: rgba(var(--color-gold-rgb), 0.4);
    background: rgba(var(--color-gold-rgb), 0.1);
}
}

.notif-panel__filter-btn[aria-expanded="true"] {
    color: var(--color-gold);
    border-color: rgba(var(--color-gold-rgb), 0.5);
    background: rgba(var(--color-gold-rgb), 0.18);
    box-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.15);
}

@media (hover: hover) and (pointer: fine) {

.notif-panel__clear:hover {
    color: #ef5350;
    border-color: rgba(239, 83, 80, 0.4);
    background: rgba(239, 83, 80, 0.12);
}
}

.notif-panel__close {
    color: rgba(239, 83, 80, 0.8);
}

@media (hover: hover) and (pointer: fine) {

.notif-panel__close:hover {
    color: #ef4444;
    border-color: rgba(239, 83, 80, 0.4);
    background: rgba(239, 83, 80, 0.12);
}
}

/* ── Footer link to notifications page ── */
.notif-panel__footer {
    border-top: 1px solid rgba(var(--color-gold-rgb), 0.12);
    flex-shrink: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(var(--color-gold-rgb), 0.04) 100%);
}

.notif-panel__view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-gold);
    font-family: var(--font-serif);
    text-shadow: 0 0 6px rgba(var(--color-gold-rgb), 0.2);
    transition: background 0.12s, color 0.12s;
}

@media (hover: hover) and (pointer: fine) {

.notif-panel__view-all:hover {
    color: var(--color-gold-bright);
    background: rgba(var(--color-gold-rgb), 0.06);
}
}

.notif-panel__view-all i {
    font-size: 0.625rem;
    transition: transform 0.15s;
}

@media (hover: hover) and (pointer: fine) {

.notif-panel__view-all:hover i {
    transform: translateX(2px);
}
}

/* ── Empty state with bell-slash icon ── */
.notif-panel__empty {
    padding: 2.75rem 1rem 2.25rem;
    text-align: center;
    color: rgba(var(--color-gold-rgb), 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.notif-empty__icon {
    font-size: 2rem;
    color: var(--color-gold-dim);
    opacity: 0.45;
    margin-bottom: 0.625rem;
    display: block;
    filter: drop-shadow(0 0 6px rgba(var(--color-gold-rgb), 0.18));
}

.notif-empty__title {
    font-family: var(--font-serif);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--color-gold);
    text-shadow: 0 0 6px rgba(var(--color-gold-rgb), 0.25);
    margin-bottom: 0.25rem;
}

.notif-empty__hint {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

/* ── Skeleton loader ── */
.notif-skeleton {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.05);
}

.notif-skeleton__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(var(--color-gold-rgb), 0.05) 0%, rgba(var(--color-gold-rgb), 0.14) 50%, rgba(var(--color-gold-rgb), 0.05) 100%);
    background-size: 200% 100%;
    animation: notif-shimmer 1.4s linear infinite;
    border: 1px solid rgba(var(--color-gold-rgb), 0.06);
}

.notif-skeleton__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-top: 0.125rem;
}

.notif-skeleton__line {
    height: 0.625rem;
    border-radius: 0.25rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: notif-shimmer 1.4s linear infinite;
}

.notif-skeleton__line--short { width: 60%; }

@keyframes notif-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Chat Skeleton ── */
.chat-skeleton {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
}
.chat-skeleton__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
    background-size: 200% 100%;
    animation: chat-shimmer 1.4s linear infinite;
}
.chat-skeleton__msg {
    flex: 1;
    height: 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
    background-size: 200% 100%;
    animation: chat-shimmer 1.4s linear infinite;
}
@keyframes chat-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ── Badge pulse on new notif ── */
.sidebar__badge--pulse,
.notif-fab__badge--pulse,
.bottom-nav__badge--pulse {
    animation: badge-pulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.6); box-shadow: 0 0 18px var(--color-crimson-bright), 0 0 4px var(--color-crimson-bright); }
    100% { transform: scale(1.15); }
}

/* ── New-notification entrance animation ── */
@keyframes notif-enter {
    0% { transform: translateY(-14px); opacity: 0; box-shadow: inset 3px 0 0 var(--color-gold), 0 0 24px rgba(var(--color-gold-rgb), 0.5); }
    50% { transform: translateY(2px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; box-shadow: inset 3px 0 0 var(--color-gold), 0 0 0 rgba(var(--color-gold-rgb), 0); }
}

.sidebar__notif-item--new {
    animation: notif-enter 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sidebar__notif-item--new .sidebar__notif-icon {
    color: var(--color-gold-bright);
    background: rgba(var(--color-gold-rgb), 0.22);
    border-color: rgba(var(--color-gold-rgb), 0.45);
    box-shadow: 0 0 14px rgba(var(--color-gold-rgb), 0.45);
}

/* ── Stronger unread affordance: bold title + filled icon ── */
.sidebar__notif-item--unread .sidebar__notif-title { font-weight: 800; }

.sidebar__notif-item--unread .sidebar__notif-icon {
    color: var(--color-gold);
    background: rgba(var(--color-gold-rgb), 0.14);
    border: 1px solid rgba(var(--color-gold-rgb), 0.22);
    box-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.18);
}

/* ── Date group chip (sticky inside scrollable body) ── */
.notif-group {
    padding: 0.75rem 0.875rem 0.5rem;
    font-family: var(--font-serif);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-gold);
    background: rgba(var(--color-gold-rgb), 0.06);
    border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.12);
    position: sticky;
    top: 0;
    z-index: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.notif-group:first-child { padding-top: 0.75rem; }

/* ── Hover-revealed actions row (PC only) ── */
.sidebar__notif-row-actions {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, var(--bg-panel) 30%, var(--bg-panel) 100%);
    padding-left: 1.25rem;
    z-index: 3;
}

@media (min-width: 1024px) {
    .sidebar__notif-item:hover .sidebar__notif-row-actions,
    .sidebar__notif-item:focus-within .sidebar__notif-row-actions,
    .sidebar__notif-item--row-hover .sidebar__notif-row-actions {
        opacity: 1;
        pointer-events: auto;
    }
}

.sidebar__notif-row-btn {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s, transform 0.1s;
    padding: 0;
    font-family: var(--font-sans);
}

@media (hover: hover) and (pointer: fine) {

.sidebar__notif-row-btn:hover {
    color: var(--color-gold);
    border-color: rgba(var(--color-gold-rgb), 0.4);
    background: rgba(var(--color-gold-rgb), 0.1);
}
}

@media (hover: hover) and (pointer: fine) {

.sidebar__notif-row-btn--delete:hover {
    color: #ef5350;
    border-color: rgba(239, 83, 80, 0.4);
    background: rgba(239, 83, 80, 0.1);
}
}

.sidebar__notif-row-btn:active { transform: scale(0.92); }

/* ── Market Skeleton ── */
.market-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 1rem;
}
.market-skeleton-card {
    background: var(--bg-panel);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    gap: 0.75rem;
}
.market-skeleton-card__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 4px;
    background: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
    background-size: 200% 100%;
    animation: market-shimmer 1.4s linear infinite;
}
.market-skeleton-card__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.market-skeleton-card__line {
    height: 0.75rem;
    border-radius: 4px;
    background: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
    background-size: 200% 100%;
    animation: market-shimmer 1.4s linear infinite;
}
@keyframes market-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Travel Skeleton ── */
.travel-skeleton {
    padding: 2rem;
    text-align: center;
}
.travel-skeleton-line {
    height: 1rem;
    margin: 1rem auto;
    border-radius: 4px;
    background: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
    background-size: 200% 100%;
    animation: travel-shimmer 1.4s linear infinite;
}
@keyframes travel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


   @media (hover: hover) and (pointer: fine) {


   trash (delete) red so the action intent reads on PC regardless of
   hover. These sit AFTER the generic rules to win source-order ties. */
.sidebar__notif-row-btn--read,
.sidebar__notif-row-btn--read:hover {
    color: var(--color-positive);
    border-color: rgba(46, 204, 113, 0.4);
}
}

@media (hover: hover) and (pointer: fine) {

.sidebar__notif-row-btn--read:hover {
    background: rgba(46, 204, 113, 0.14);
}
}

@media (hover: hover) and (pointer: fine) {

.sidebar__notif-row-btn--delete,
.sidebar__notif-row-btn--delete:hover {
    color: var(--color-rust-bright);
    border-color: rgba(231, 76, 60, 0.4);
}
}

@media (hover: hover) and (pointer: fine) {

.sidebar__notif-row-btn--delete:hover {
    background: rgba(231, 76, 60, 0.14);
}
}

/* ── Filtered-out state ── */
.sidebar__notif-item--filtered { display: none !important; }

/* ── Page-level filters strip ── */
/* ── Page-level filters strip — chips on the left, MARK ALL READ pinned right ── */
.notif-page__filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.1);
    background: var(--bg-panel);
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Push "MARK ALL READ" to the far right of the filters row AND keep it on the
   same line as the chips — never let it wrap onto its own row. */
.notif-page__filters .notif-page__mark {
    margin-left: auto;
    flex-shrink: 0;
    order: 99;
}

/* ── Page filter dropdown — now the only filter UI on this page.
   Always visible since the chip row was removed; the rules below were
   previously scoped to a @media (max-width: 1023.98px) mobile override. ── */
.notif-page__filter-select {
    display: block;
    flex: 1;
    min-width: 0;
    padding: 0.5rem 1.625rem 0.5rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid rgba(var(--color-gold-rgb), 0.25);
    border-radius: var(--radius-mobile);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d4af37' opacity='0.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.625rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.notif-page__filter-select:hover {
    border-color: rgba(var(--color-gold-rgb), 0.5);
}
}
.notif-page__filter-select:focus {
    outline: none;
    border-color: rgba(var(--color-gold-rgb), 0.6);
    box-shadow: 0 0 12px rgba(var(--color-gold-rgb), 0.15);
}

@media (max-width: 1023.98px) {
    .notif-page__filters {
        flex-wrap: nowrap;
        padding: 0.75rem 1rem;
    }
}

/* ── Time chip: absolute on PC, relative on mobile ── */
.sidebar__notif-time {
    cursor: default;
}

.sidebar__notif-time > .sidebar__notif-relative { display: inline; }
.sidebar__notif-time > .sidebar__notif-absolute { display: none; }

@media (min-width: 1024px) {
    .sidebar__notif-time {
        flex-direction: row;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.6875rem;
    }
    .sidebar__notif-time > .sidebar__notif-relative { display: none; }
    .sidebar__notif-time > .sidebar__notif-absolute { display: inline; font-size: 0.6875rem; letter-spacing: 0.02em; }
    .sidebar__notif-time > .sidebar__notif-absolute::before {
        content: '';
    }
}

/* ── Keyboard focus visible on notif items ── */
.sidebar__notif-item:focus-visible {
    outline: 1px solid rgba(var(--color-gold-rgb), 0.5);
    outline-offset: -2px;
    background: rgba(var(--color-gold-rgb), 0.06);
}

/* ── PC: wider popover with scale-in animation.
   Replaces the (max-width: 260px) override at line ~9859. ── */
@media (min-width: 1024px) {
    .notif-panel {
        width: min(420px, calc(100vw - 64px)) !important;
        max-width: 420px !important;
        max-height: 78vh !important;
        border-left: none !important;
        border: 1px solid rgba(var(--color-gold-rgb), 0.18) !important;
        border-radius: 0.75rem !important;
        top: 4rem !important;
        right: 0.75rem !important;
        background:
            linear-gradient(180deg, rgba(20, 16, 12, 0.96), rgba(12, 10, 8, 0.98)) !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(var(--color-gold-rgb), 0.06) !important;
        transition: opacity var(--motion-base) var(--ease-out),
                    transform var(--motion-base) var(--ease-out) !important;
    }
    .notif-panel:not(.notif-panel--open) {
        transform: translateY(-10px) scale(0.96) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .notif-panel--open {
        transform: translateY(0) scale(1) !important;
        opacity: 1 !important;
    }
    .notif-backdrop--visible {
        background: rgba(0, 0, 0, 0.35);
    }
}

@media (min-width: 1280px) {
    .notif-panel {
        width: 440px !important;
        max-width: 440px !important;
    }
}

/* Fix: when DevTools docks and viewport drops below 1024px, the notif-panel
   desktop-open state (transform/opacity from the ≥1024px popover rules) must
   be reset so it doesn't stick out on the right alongside the mobile sidebar. */
@media (max-width: 1023.98px) {
    .notif-panel:not(.notif-panel--open) {
        transform: translateX(100%) !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }
}

/* Note: the notification page intentionally has no max-width cap — it should
   fill the content area like every other page (forum, inventory, etc.). The
   wide-screen polish comes from internal items (filter chips, list rows)
   rather than from clamping the outer container. */

/* Reduced motion: keep entrance highlight, skip animation */
@media (prefers-reduced-motion: reduce) {
    .sidebar__notif-item--new {
        animation: none;
        box-shadow: inset 3px 0 0 var(--color-gold);
    }
    .sidebar__badge--pulse,
    .notif-fab__badge--pulse,
    .bottom-nav__badge--pulse {
        animation: none;
    }
}

/* ============================================================
   CHAT v2 — sender grouping, day separators, linkify, time variants
   Appended after the existing chat block (~line 9770). Companion to
   the rewritten public/js/chat.js.
   ============================================================ */

/* Anchor for the floating "X new" pill (applies to tab-content wrapper). */
.chat-msg-col { position: relative; }
.chat-msg-list { position: relative; } /* keep tab-content away if pill moves inside list */

/* Initial-letter avatar */
.chat-msg__avatar-letter,
.chat-dm-item__avatar .chat-msg__avatar-letter {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    user-select: none;
    line-height: 1;
}

/* Profile-picture avatar: fills the 1.75rem (chat) / 2rem (DM-list) circle
   as a cover image. When the URL 404s, chat.js's inline onerror hides this
   img and reveals the colored letter fallback span underneath. */
.chat-msg__avatar-img,
.chat-dm-item__avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Grouped message: collapse the avatar to a transparent spacer and
   drop the header — only the body shows. The avatar's spacing is
   preserved via visibility:hidden so the bubble alignment is stable. */
.chat-msg--grouped .chat-msg__avatar {
    visibility: hidden;
    pointer-events: none;
}
.chat-msg--self.chat-msg--grouped .chat-msg__avatar { visibility: hidden; }

/* Hide the timestamp on the middle/end of a multi-message group so
   only the trailing message displays it. */
.chat-msg__time--in-group { display: none; }

/* Day separator chip — sticky, gold-dim, gold-soft background */
/* Day labels sit in normal flow with the messages — not sticky, not
   scrollable. Earlier versions applied `position: sticky; top: 0.25rem`
   to keep "Today / Yesterday / Mon 12" pinned to the top of the chat
   list while messages scrolled underneath. Per feedback that's confusing
   rather than helpful: users want the label to travel with its day so
   the visual grouping reads naturally. The pill chrome (rounded
   background, gold border, blur) is preserved below for visual weight. */
/* Lock page scroll while the chat panel is open. chat.js `showPanel()`
   toggles `.chat-open` on BOTH <body> AND <html> so the lock fires on
   desktop browsers and iOS Safari (where `body` overflow alone is
   unreliable under a fixed-positioned overlay).
   touch-action: none prevents iOS Safari from allowing background scroll. */
body.chat-open,
html.chat-open {
    overflow: hidden;
    touch-action: none;
    -webkit-overflow-scrolling: auto;
}

.chat-day-sep {
    align-self: center;
    margin: 0.5rem 0 0.25rem;
    padding: 0.125rem 0.625rem;
    font-family: var(--font-serif);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold-dim);
    background: rgba(var(--color-gold-rgb), 0.05);
    border: 1px solid rgba(var(--color-gold-rgb), 0.1);
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Inline URL link styling */
.chat-msg__link {
    color: var(--color-gold);
    text-decoration: underline;
    text-decoration-color: rgba(var(--color-gold-rgb), 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s, color 0.15s;
    word-break: break-all;
}
@media (hover: hover) and (pointer: fine) {
.chat-msg__link:hover {
    color: var(--color-gold-bright);
    text-decoration-color: var(--color-gold);
}
}

/* Empty state polish */
.chat-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: rgba(var(--color-gold-rgb), 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.chat-empty__icon {
    font-size: 1.75rem;
    color: var(--color-gold-dim);
    opacity: 0.5;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 6px rgba(var(--color-gold-rgb), 0.18));
    display: block;
}
.chat-empty__title {
    font-family: var(--font-serif);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--color-gold);
    margin-bottom: 0.25rem;
}
.chat-empty__hint {
    font-size: 0.625rem;
    color: var(--text-tertiary);
    max-width: 14rem;
    line-height: 1.4;
}

/* Sender row — name + optional Lv badge + VIP pill */
.chat-msg__level {
    font-size: 0.5rem;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 0.0625rem 0.375rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* VIP tier variants — Premium gets a subtle gold glow on the badge image */
.chat-msg__vip--premium {
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.35);
}

/* The .chat-msg__col wrapper was removed when rework adopted the new
   iMessage-style side-by-side bubble layout (chat.js renderOne now emits
   [avatar][bubble] as direct children of .chat-msg). The col-level rules
   below were therefore deleted; bubble-level rules (.chat-msg__bubble,
   .chat-msg__bubble:not(...), .chat-msg--self .chat-msg__bubble) at lines
   ~9630+ now own bubble-width and side-docking. */

/* Time chip stays slim and aligns cleanly under the bubble. */
.chat-msg__time {
    flex-shrink: 0;
    flex-grow: 0;
    align-self: flex-start;
}

.chat-msg--self .chat-msg__time {
    align-self: flex-end;
}

/* Time chip: relative time on mobile, real time on PC. Hover swaps them. */
.chat-msg__time,
.chat-dm-item__time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.5625rem;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.125rem;
    padding: 0 0.25rem;
    cursor: default;
    white-space: nowrap;
}
/* Mobile default — DM-list shows relative "2m ago" and hides absolute HH:MM,
   while chat-msg bubbles now show HH:MM unconditionally. chat.js renderOne
   reworked the bubble inner HTML to emit ONLY .chat-msg__time-abs (the
   relative-span dropped), so chat-msg has no rel element to swap to and
   must always render its abs timestamp regardless of breakpoint. The
   .chat-msg__time .chat-msg__time-rel selector below is dead-path
   post-rework (no rel child exists inside chat-msg bubbles), kept only
   for symmetry so a future regression that re-introduces it stays
   consistent with the @media override below. */
.chat-msg__time .chat-msg__time-rel,
.chat-dm-item__time .chat-msg__time-rel { display: inline; }
.chat-dm-item__time .chat-msg__time-abs { display: none; }
.chat-msg__time .chat-msg__time-abs { display: inline; }

@media (min-width: 1024px) {
    .chat-dm-item__time {
        align-self: center;
        font-size: 0.625rem;
    }
    .chat-msg__time {
        align-self: flex-start;
        font-size: 0.625rem;
    }
    .chat-msg--self .chat-msg__time {
        align-self: flex-end;
    }
    /* Hide the relative "2m ago" + show HH:MM on PC. The chat-msg__time-rel
       parent selector is dead post-rework (chat.js renderOne no longer emits
       __time-rel inside chat-msg bubbles) but kept here for symmetry with
       the dm-item selector so a future regression that re-introduces it
       stays consistent. */
    .chat-msg__time .chat-msg__time-rel,
    .chat-dm-item__time .chat-msg__time-rel { display: none; }
    .chat-msg__time .chat-msg__time-abs,
    .chat-dm-item__time .chat-msg__time-abs { display: inline; }
    /* Hover to reveal the relative time is now meaningful only on DM-list
       rows since chat-msg bubbles don't emit __time-rel anymore. */
    .chat-dm-item__time:hover .chat-msg__time-rel { display: inline; }
    .chat-dm-item__time:hover .chat-msg__time-abs { display: none; }
}

/* DM-list time chip sits in the row with the name: drop the mono styling and
   keep it vertically centered so it aligns with the title. */
.chat-panel .chat-dm-item__time {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-primary);
    padding: 0;
    margin-top: 0;
    align-self: center;
}

/* Floating "X new messages" pill anchored to chat-msg-col wrapper */
.chat-new-pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* 58px clears the chat input bar (it anchored to the tab-content
       wrapper, which includes the input area at its bottom). */
    bottom: 58px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(var(--color-gold-rgb), 0.96);
    color: #1a1613;
    border: 1px solid var(--color-gold);
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45),
        0 0 14px rgba(var(--color-gold-rgb), 0.35);
    z-index: 2;
    transition: transform 0.15s, box-shadow 0.15s;
    text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
.chat-new-pill:hover {
    transform: translateX(-50%) translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5),
        0 0 18px rgba(var(--color-gold-rgb), 0.5);
}
}
.chat-new-pill:active {
    transform: translateX(-50%) scale(0.97);
}
.chat-new-pill[hidden] { display: none; }

/* Hover affordance on whole message row */
.chat-msg {
    transition: background 0.12s ease;
    border-radius: 0.375rem;
    padding: 0.125rem 0.375rem;
}
@media (hover: hover) and (pointer: fine) {
.chat-msg:hover {
    background: rgba(255, 255, 255, 0.025);
}
}

/* ── Redesigned Cartel Status Card (Dashboard) ── */
.cartel-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cartel-status-header__left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 6px rgba(var(--color-gold-rgb), 0.6);
    display: inline-block;
}
.cartel-status-header__title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.cartel__identity {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(var(--color-gold-rgb, 212, 175, 55), 0.15);
    background: linear-gradient(180deg, rgba(22, 18, 14, 0.6) 0%, rgba(12, 10, 8, 0.9) 100%);
    position: relative;
    overflow: hidden;
}
.cartel__identity--has-banner {
    padding-top: 4rem;
    background-size: cover, cover !important;
    background-position: center, center !important;
}
.cartel__identity--has-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(10, 8, 6, 0.85) 80%, rgba(10, 8, 6, 0.98) 100%);
    pointer-events: none;
    z-index: 1;
}
.cartel__identity--has-banner .cartel__name,
.cartel__identity--has-banner .cartel__tier {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 1);
}
.cartel__name {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
.cartel__tier {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-gold, #d4af37);
    margin-top: 0.25rem;
    text-transform: uppercase;
}
.cartel__tier-highlight {
    color: var(--color-gold, var(--color-gold));
}

.cartel__grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(var(--color-gold-rgb, 212, 175, 55), 0.15);
    border-top: 1px solid rgba(var(--color-gold-rgb, 212, 175, 55), 0.2);
    border-bottom: 1px solid rgba(var(--color-gold-rgb, 212, 175, 55), 0.2);
}
.cartel__grid-cell {
    padding: 0.625rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: rgba(14, 12, 10, 0.92);
    transition: background 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.cartel__grid-cell:hover {
    background: rgba(22, 19, 15, 0.96);
}
}

.cartel__cell-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.cartel__cell-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.3125rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
}
/* Individual Theme Accents */
.cartel__grid-cell:nth-child(1) .cartel__cell-icon {
    color: #d4af37;
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.25);
}
.cartel__grid-cell:nth-child(2) .cartel__cell-icon {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.25);
}
.cartel__grid-cell:nth-child(3) .cartel__cell-icon {
    color: #f97316;
    background: rgba(249, 115, 22, 0.08);
    border-color: rgba(249, 115, 22, 0.25);
}
.cartel__grid-cell:nth-child(4) .cartel__cell-icon {
    color: #2ea043;
    background: rgba(46, 160, 67, 0.08);
    border-color: rgba(46, 160, 67, 0.25);
}

.cartel__cell-label {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-tertiary, #888);
    text-transform: uppercase;
}

.cartel__cell-val {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}
.cartel__cell-val--gold {
    color: var(--color-gold, #d4af37);
}
.cartel__cell-val--green {
    color: #2ecc71;
}
.cartel__cell-sub {
    font-size: 0.75rem;
    color: var(--text-dim, #777);
    font-weight: 600;
}

/* Footer: specialization + rank chips */
.cartel__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: rgba(10, 8, 6, 0.65);
}

.cartel__footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    min-width: 0;
}

.cartel__footer-col--right {
    flex: 0 0 auto;
    text-align: right;
}

.cartel__spec-label,
.cartel__rank-label {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--text-dim, #777);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cartel__specialization {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #e2ded5;
    font-weight: 700;
    font-family: var(--font-sans);
    background: rgba(255, 255, 255, 0.03);
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cartel__specialization i {
    font-size: 0.75rem;
    color: var(--color-gold, #d4af37);
}

.cartel__rank-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-gold, #d4af37);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(212, 175, 55, 0.08);
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(212, 175, 55, 0.25);
    display: inline-block;
}

/* ==========================================================
   Mobile Market Sell Card Redesign
   ========================================================== */
.mkt-sell-card-mobile {
    background: linear-gradient(145deg, rgba(26, 23, 19, 0.95), rgba(16, 14, 11, 0.98));
    border: 1px solid rgba(var(--color-gold-rgb), 0.15);
    border-radius: 0.75rem;
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mkt-sell-card-mobile--selected {
    border-color: rgba(var(--color-gold-rgb), 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--color-gold-rgb), 0.15);
    background: linear-gradient(145deg, rgba(35, 30, 22, 0.98), rgba(20, 16, 12, 0.99));
}
.mkt-sell-card-mobile__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.mkt-sell-card-mobile__img {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--color-gold-rgb), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.mkt-sell-card-mobile__img img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}
.mkt-sell-card-mobile__info {
    flex: 1;
    min-width: 0;
}
.mkt-sell-card-mobile__name-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mkt-sell-card-mobile__name {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.mkt-sell-card-mobile__badge {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: rgba(var(--color-gold-rgb), 0.12);
    color: var(--color-gold);
    border: 1px solid rgba(var(--color-gold-rgb), 0.25);
    text-transform: uppercase;
}
.mkt-sell-card-mobile__qty {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-dim);
    margin-top: 0.125rem;
}
.mkt-sell-card-mobile__qty span {
    color: var(--text-secondary);
    font-weight: 700;
}
.mkt-sell-card-mobile__base-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0.375rem;
    padding: 0.4rem 0.625rem;
    margin-bottom: 0.75rem;
}
.mkt-sell-card-mobile__label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}
.mkt-sell-card-mobile__val {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-gold);
}
.mkt-sell-card-mobile__inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}
.mkt-sell-card-mobile__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.market-inv-qty__btn--max {
    background: rgba(var(--color-gold-rgb), 0.15) !important;
    color: var(--color-gold) !important;
    border-color: rgba(var(--color-gold-rgb), 0.3) !important;
    font-size: 0.5625rem !important;
    font-weight: 800 !important;
    padding: 0 0.375rem !important;
    border-radius: 0.25rem !important;
}
@media (hover: hover) and (pointer: fine) {
.market-inv-qty__btn--max:hover {
    background: rgba(var(--color-gold-rgb), 0.3) !important;
}
}

/* Online Users: stack meta below filters on mobile */
@media (max-width: 639.98px) {
    .online-users-page .time-tabs__meta {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}

/* Global player equipped custom badge icon/image */
.player-equipped-badge,
.hits-equipped-badge {
    width: 0.9375rem;
    height: 0.9375rem;
    vertical-align: middle;
    object-fit: contain;
    display: inline-block;
    flex-shrink: 0;
    margin-left: 2px;
}

.player-equipped-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.9375rem;
    height: 0.9375rem;
    font-size: 0.625rem;
    color: var(--color-gold);
    vertical-align: middle;
    flex-shrink: 0;
    margin-left: 2px;
}