@import url('https://fonts.cdnfonts.com/css/flama');
:root {
    --global-transition: 175ms cubic-bezier(.785, .135, .15, .86);
    --color-bg-page: #0f1014;
    --color-bg-surface: #15161d;
    --color-bg-surface-alt: #1d1e26;
    --color-bg-hover: #22232c;
    --color-border: #292a34;
    --color-border-alt: #32333f;
    --color-text-primary: #dcdcdc;
    --color-text-secondary: #9293a6;
    --color-text-faint: #5d5e6b;
    --color-gold: #e9b10e;
    --color-gold-hover: #f5c432;
    --color-gold-active: #d68b00;
    --color-danger: #cf3535;
    --color-danger-border: #c12d2d;
    --color-success: #2f9b46;
    --color-success-bg: #1f3524;
    --color-badge-neutral: #2a2b33;
    --radius-sm: .25rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --shadow-inset-button: inset 0 -3px #cc6c31;
    --shadow-inset-button-active: inset 0 -2px #cc6c31;
    --gradient-empire: linear-gradient(90deg,#e9b10e,#f5c432);
}
	* {
        font-family: Flama, sans-serif;
	}
    body {
        background-color: var(--color-bg-page);
        color: var(--color-text-secondary);
        margin: 0;
        padding: 0;
        font-size: .9375rem;
        font-weight: 400;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

/* Topbar removed */
    .layout-shell { padding: 24px 32px; }

    .container {
        max-width: 1200px;
        margin: 0 auto;
    }

.header { background-color: #1d1e26; padding: 18px 22px; border-radius: .75rem; margin-bottom: 24px; display:flex; align-items:stretch; gap:26px; position:relative; overflow:hidden; }
.header:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 12% 35%,rgba(233,177,14,0.08),transparent 60%); pointer-events:none; }
.header-left { display:flex; align-items:center; gap:20px; min-width:0; }
.header-main { display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0; }
.header-meta-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.meta-pill { background:#21222b; color:#b2b3c2; padding:4px 10px 4px; font-size:.625rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; display:inline-flex; align-items:center; gap:6px; line-height:1; position:relative; }
.meta-pill strong { color:#fff; font-weight:700; letter-spacing:.05em; }
.meta-pill a { color:#e9b10e; text-decoration:none; }
.meta-pill a:hover { text-decoration:underline; }
.avatar-wrap { position:relative; width:104px; flex:0 0 auto; display:flex; align-items:center; }
.avatar-ring { display:none !important; }
.avatar { width:104px; height:104px; border-radius:12px; object-fit:cover; display:block; box-shadow:0 4px 14px -4px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.05); }
@media (max-width:780px){
    .header { flex-direction:column; align-items:flex-start; }
    .header-right { margin-left:0; }
.avatar-wrap { width:88px; }
.avatar { width:88px; height:88px; border-radius:10px; }
}

    .player-info h1 {
        margin: 0 0 8px 0;
        color: #e9b10e;
        font-family: Flama, sans-serif;
        font-size: 1.75rem;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 1.25;
    }

    .player-info p {
        margin: 5px 0;
        color: #dcdcdc;
        font-size: .8125rem;
    }

:root { --faceit-orange:#ff5500; --faceit-orange-dim:#ff6f26; }

h1#player-name {text-transform:none !important;display:flex;gap:8px; color:#c8a332;}
h1#player-name span:first-child {font-weight:900;text-shadow:0 0 6px rgba(255,180,60,0.3); }
h1#player-name span:nth-child(2) {font-weight:300; color:#FFFFFF !important; opacity:.75; display:none;} 
/* Faceit name secondary appearance; parentheses added only when Steam name present via .with-steam class */
/* Parentheses now injected via JS when both names exist */

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; margin:32px 0 8px; align-items:stretch; }
.stat-card { background: var(--color-bg-surface-alt); border:none; border-radius: var(--radius-md); padding:18px 16px 16px; position:relative; box-shadow:0 0 0 1px rgba(255,255,255,0.02); transition: background var(--global-transition), transform var(--global-transition); }
.stat-card:after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.06),transparent 60%); opacity:0; transition:opacity var(--global-transition); }
.stat-card:hover { background: var(--color-bg-hover); transform:translateY(-2px); }
.stat-card:hover:after { opacity:1; } 
.stat-card h3 { width:100%;font-size:.625rem; letter-spacing:.08em; font-weight:700; color:var(--color-text-secondary); text-transform:uppercase; text-align:left; margin: 0 0 6px 0; }
.stat-card p { margin:0; font-size:1.45rem; font-weight:600; color:var(--color-text-primary); font-family:Flama, sans-serif; line-height:1.1; }
/* Best map background */
#card-best-map { position:relative; overflow:hidden; display:flex; flex-direction:column; }
#card-best-map p { flex:1; width:100%; position:static; top:auto; left:auto; transform:none; margin:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.45rem; }
#card-best-map p .best-map-name { font-size:1.65rem; }
#card-best-map p .best-map-wins-count { font-size:1.15rem; }
#card-best-map p { font-size:1.35rem; line-height:1.25; font-weight:700; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.35rem; height:100%; }
#card-best-map p .best-map-name { font-size:1.6rem; font-weight:700; letter-spacing:.04em; }
#card-best-map p .best-map-wins-count { font-size:1.15rem; font-weight:600; opacity:.9; }
#card-best-map::before { content:""; position:absolute; inset:0; background-image: var(--best-map-img); background-size:cover; background-position:center; filter:brightness(.5) saturate(1.05) blur(1.5px); opacity:.95; transition:filter var(--global-transition), transform var(--global-transition); }
#card-best-map::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.35),rgba(0,0,0,0.85)); opacity:.9; }
#card-best-map > * { position:relative; z-index:2; }
#card-best-map.hoverable:hover::before { filter:brightness(.7) saturate(1.2) blur(1.5px); transform:scale(1.06); }

/* Map stat cards */
.map-stat-card { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content: space-between; aspect-ratio:1;} 
.map-stat-card span.map-stats { color:#FFFFFF; font-family:Flama, sans-serif; font-size:.74rem; font-weight:300; opacity:.9; letter-spacing: .08em; line-height:1.08;text-shadow: 0 2px 5px rgba(0, 0, 0, .6);}
.map-stat-card span.map-stats b { font-weight:500;} 
.map-stat-card::before { content:""; position:absolute; inset:0; background-image: var(--map-bg-img); background-size:cover; background-position:center; filter:brightness(.5) saturate(1.05) blur(1.5px); opacity:.95; transition:filter var(--global-transition), transform var(--global-transition); }
.map-stat-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.35),rgba(0,0,0,0.85)); opacity:.9; }
.map-stat-card > * { position:relative; z-index:2; } 
.map-stat-card.hoverable:hover::before { filter:brightness(.7) saturate(1.2) blur(1.5px); transform:scale(1.06); }
.map-stat-card .map-pheasant { position:absolute; width:32px; bottom:10px; right:10px; height:auto; z-index:3; } 

/* (Removed legacy .most-expensive-skin-card styles; replaced by .inventory-banner panels) */

/* Cinematic Inventory Banner (Tri-Panel) */
.inventory-banner { 
    margin: 30px 0 34px; 
    display:grid; 
    grid-template-columns: repeat(3, 1fr);
    gap:14px; 
    position:relative; 
}
@media (max-width:1180px){ .inventory-banner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:760px){ .inventory-banner { grid-template-columns: 1fr; } }
.inventory-banner-header { display:flex; align-items:center; justify-content:space-between; grid-column:1/-1; margin:-6px 16px 4px; gap:12px; }
.inventory-banner-title { margin:0; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--color-text-secondary); display:flex; align-items:center; gap:10px; }
.inventory-banner-actions { display:flex; align-items:center; gap:14px; }
.inventory-total { font-size:.55rem; font-weight:700; color:#FFFFFF; letter-spacing:.08em; text-shadow:0 0 4px rgba(115, 115, 115, 0.3); white-space:nowrap; }
.inv-open-link { font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--color-gold); text-decoration:none; position:relative; padding:4px 0; }
.inv-open-link:after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,var(--color-gold),rgba(255,200,80,0.4)); transform:scaleX(.35); transform-origin:left center; transition:transform .3s var(--global-transition); }
.inv-open-link:hover:after { transform:scaleX(1); }
.inv-open-link:focus-visible { outline:2px solid var(--color-gold); outline-offset:2px; }
.inv-panel { 
    position:relative; 
    min-height:180px; 
    background:#111; 
    border-radius: var(--radius-md); 
    overflow:hidden; 
    cursor:pointer; 
    display:flex; 
    align-items:flex-end; 
    isolation:isolate; 
    box-shadow:0 0 0 1px rgba(255,255,255,0.03), 0 4px 18px -6px rgba(0,0,0,0.65); 
    transition: transform 600ms var(--global-transition), box-shadow 600ms var(--global-transition); 
}
.inv-panel:focus-visible { outline:2px solid var(--color-gold); outline-offset:2px; }
.inv-panel .inv-bg { 
    position:absolute; inset:0; 
    background-size:contain; background-repeat:no-repeat; background-position:center; 
    /* Removed blur so full 512x384 image remains crisp */
    filter:brightness(.75) saturate(1.05); 
    transform:none; 
    opacity:1; 
    transition: filter 600ms var(--global-transition); 
    z-index:0; 
    background-color:#0f1013; /* letterbox fill */
}
.inv-panel .inv-overlay { 
    position:absolute; inset:0; 
    background:radial-gradient(circle at 35% 55%, rgba(0,0,0,0.15), rgba(0,0,0,0.9)); 
    mix-blend-mode:normal; 
    opacity:.92; 
    z-index:1; 
    transition: opacity 600ms var(--global-transition); 
}
.inv-panel .inv-content { 
    position:relative; 
    z-index:2; 
    padding:16px 18px 18px; 
    width:100%; 
    display:flex; 
    flex-direction:column; 
    gap:4px; 
}
.inv-panel .inv-label { 
    margin:0; 
    font-size:.55rem; 
    letter-spacing:.12em; 
    font-weight:700; 
    text-transform:uppercase; 
    color:var(--color-text-secondary); 
    opacity:.85; 
}
.inv-panel .inv-name { 
    margin:0; 
    font-size:.9rem; 
    font-weight:600; 
    letter-spacing:.05em; 
    line-height:1.15; 
    color:#fff; 
    text-shadow:0 2px 6px rgba(0,0,0,.55); 
    max-width:95%; 
}
.inv-panel .inv-meta { 
    display:flex; 
    gap:10px; 
    align-items:center; 
    font-size:.6rem; 
    letter-spacing:.08em; 
    font-weight:600; 
    margin-top:4px; 
    color:var(--color-text-secondary); 
    text-transform:uppercase; 
}
.inv-panel .inv-meta .inv-wear { color:#e6e6e6; font-weight:500; }
.inv-panel .inv-meta .inv-price { color:#ffd26a; font-weight:700; text-shadow:0 0 4px rgba(255,180,60,0.35); }
.inv-panel .inv-inspect { margin-top:10px; width:fit-content; padding:0 14px; }
/* Blue style specifically for highlighted inventory inspect buttons (override gold) */
.inventory-banner .inv-panel .inv-inspect {
    background:rgb(41 42 52) !important;
    color:rgb(220,220,220) !important;
    box-shadow:inset 0 -2px #15161d !important;
    border:none;
}
.inventory-banner .inv-panel .inv-inspect:hover {
    background:#353849 !important;
}
.inventory-banner .inv-panel .inv-inspect:active {
    background:#353849 !important;
    box-shadow:inset 0 -2px #15161d !important;
}
/* Actions row: inspect (left) and buy (right) */
.inv-panel .inv-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.inv-panel .inv-actions .inv-empire-slot { margin:0 0 0 auto; display:flex; justify-content:flex-end; }
.inv-panel .inv-empire-slot { display:flex; }
.inv-panel .inv-buy { font-size:.55rem; padding:0 10px; height:26px; box-shadow:inset 0 -2px #cc6c31; margin:0; }
.inv-panel .inv-buy:active { box-shadow:inset 0 -1px #cc6c31; }

/* Hover cinematic expansion */
.inventory-banner:hover .inv-panel { transform:translateY(0) scale(.98); }
.inv-panel:hover { 
    transform:translateY(-4px) scale(1.02); 
    box-shadow:0 0 0 1px rgba(255,255,255,0.05), 0 8px 28px -6px rgba(0,0,0,0.75), 0 0 14px -2px rgba(255,180,60,0.15); 
}
.inv-panel:hover .inv-bg { filter:brightness(.95) saturate(1.2); }
.inv-panel:hover .inv-overlay { opacity:.85; }

/* Empty state */
.inventory-banner--empty { grid-template-columns:repeat(3,1fr); }
.inv-panel--empty { background:linear-gradient(135deg,#181a20,#14161c); min-height:140px; box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 2px 10px -4px rgba(0,0,0,0.6); }
.inv-panel--empty .inv-content { align-items:flex-start; }

/* Full Inventory Modal */
.inventory-modal { max-width:1080px; width:90vw; max-height:82vh; display:flex; flex-direction:column; padding:24px 26px 28px; }
/* Center the inventory modal overlay */
#inventory-modal-overlay { display:none; align-items:center; justify-content:center; padding:40px 28px; }
.inventory-modal-header { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.inventory-modal-header #inventory-total-value { font-size:.7rem; letter-spacing:.08em; font-weight:600; color:var(--color-text-secondary); }
.inventory-modal-body { flex:1 1 auto; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; padding-right:4px; }
.inventory-item { position:relative; background:linear-gradient(145deg,#1a1c22,#16181d); border:1px solid #24262c; border-radius:8px; padding:10px 10px 12px; display:flex; flex-direction:column; gap:6px; box-shadow:0 0 0 1px rgba(255,255,255,0.02), 0 3px 10px -4px rgba(0,0,0,0.6); }
.inventory-item:hover { background:linear-gradient(145deg,#1f2229,#1a1c22); border-color:#2e3139; }
.inventory-item .inv-img-wrap { position:relative; width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:#101114; border:1px solid #22252b; border-radius:4px; overflow:hidden; }
.inventory-item img { max-width:100%; max-height:100%; object-fit:contain; image-rendering:auto; }
.inventory-item .inv-item-name { font-size:.62rem; font-weight:600; letter-spacing:.06em; line-height:1.1; color:#fff; margin:0; }
.inventory-item .inv-item-wear { font-size:.55rem; letter-spacing:.06em; font-weight:600; color:var(--color-text-secondary); }
.inventory-item .inv-item-price { font-size:.6rem; font-weight:700; letter-spacing:.08em; color:#ffd26a; text-shadow:0 0 4px rgba(255,180,60,0.3); }
.inventory-item .inv-item-group { font-size:.5rem; letter-spacing:.08em; font-weight:600; text-transform:uppercase; color:var(--color-text-secondary); opacity:.75; }
.inventory-item .inv-inspect { margin-top:2px; font-size:.65rem; padding:0 .6rem; }
.inventory-empty-note { font-size:.7rem; letter-spacing:.06em; opacity:.7; padding:20px 4px; grid-column:1/-1; }
@media (max-width:640px){
    .inventory-modal-body { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
    .inventory-item { padding:8px 8px 10px; }
}

/* When fewer than 3 panels, auto widen */
.inventory-banner:has(.inv-panel:nth-child(2)):not(:has(.inv-panel:nth-child(3))) { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.inventory-banner:has(.inv-panel:nth-child(1)):not(:has(.inv-panel:nth-child(2))) { grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); }

@media (max-width: 860px){
  .inventory-banner { grid-template-columns:1fr; }
  .inv-panel { min-height:160px; }
  .inv-panel .inv-name { font-size:.85rem; }
}

/* Prefers reduced motion: dampen transforms */
@media (prefers-reduced-motion: reduce){
  .inv-panel, .inventory-banner:hover .inv-panel, .inv-panel:hover { transition:none !important; transform:none !important; }
  .inv-panel .inv-bg { transition:none !important; }
}

/* (Removed old bar visualization styles) */

/* Circular progress cards */
.progress-card { display:flex; flex-direction:column; align-items:center; justify-content:space-between; } 
.progress-wrap { position:relative; width:120px; height:120px; }
.progress-wrap svg { overflow:visible; }
.progress-ring-bg { stroke: rgba(255,255,255,0.06); }
.progress-ring-bar { stroke: var(--color-gold); filter: drop-shadow(0 0 6px rgba(233,177,14,0.4)); transition: stroke-dashoffset 600ms var(--global-transition), stroke 250ms var(--global-transition); transform: rotate(90deg); transform-origin: 50% 50%; }
/* Faceit ring rotation: base 90deg + (gap/2) centers gap at bottom (applies to bg + bar) */
#ring-faceit, #ring-faceit-bg { transform: rotate(130deg); transform-origin:50% 50%; }
/* Color variants */
.ring-green { stroke: #2f9b46 !important; filter: drop-shadow(0 0 6px rgba(47,155,70,0.45)); }
.ring-yellow { stroke: #e9b10e !important; filter: drop-shadow(0 0 6px rgba(233,177,14,0.45)); }
.ring-red { stroke: #cf3535 !important; filter: drop-shadow(0 0 6px rgba(207,53,53,0.5)); }
/* Faceit level specific colors */
.ring-faceit-l1 { stroke:#55585f !important; filter:drop-shadow(0 0 6px rgba(85,88,95,0.4)); }
.ring-faceit-l2 { stroke:#2bb673 !important; filter:drop-shadow(0 0 6px rgba(43,182,115,0.45)); }
.ring-faceit-l3 { stroke:#1fa862 !important; filter:drop-shadow(0 0 6px rgba(31,168,98,0.5)); }
.ring-faceit-l4 { stroke:#c8a332 !important; filter:drop-shadow(0 0 6px rgba(200,163,50,0.5)); }
.ring-faceit-l5 { stroke:#d7ae2f !important; filter:drop-shadow(0 0 6px rgba(215,174,47,0.55)); }
.ring-faceit-l6 { stroke:#f2b52c !important; filter:drop-shadow(0 0 6px rgba(242,181,44,0.6)); }
.ring-faceit-l7 { stroke:#ff9d26 !important; filter:drop-shadow(0 0 6px rgba(255,157,38,0.65)); }
.ring-faceit-l8 { stroke:#ff7d1a !important; filter:drop-shadow(0 0 6px rgba(255,125,26,0.7)); }
.ring-faceit-l9 { stroke:#ff5e00 !important; filter:drop-shadow(0 0 8px rgba(255,94,0,0.75)); }
.ring-faceit-l10 { stroke:#ff1133 !important; filter:drop-shadow(0 0 10px rgba(255,17,51,0.85)); }
.progress-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.15rem; font-weight:600; color:var(--color-text-primary); }
span#faceit-total-matches {color:#FFFFFF;}
.stat-card.vac-private { 
    background: radial-gradient(circle at 35% 25%, rgba(180,0,0,0.55), rgba(90,0,0,0.82)) !important;
    box-shadow:0 0 0 1px rgba(255,60,60,0.25), 0 0 22px -6px rgba(200,0,0,0.55) inset, 0 0 10px -2px rgba(120,0,0,0.6);
    position:relative;
}
.stat-card.vac-private:after { opacity:0 !important; }
.stat-card.vac-private:hover { background: radial-gradient(circle at 40% 30%, rgba(205,0,0,0.6), rgba(110,0,0,0.88)) !important; }
.stat-card.vac-private .progress-center { font-size:2.4rem; font-weight:700; letter-spacing:.04em; }
.stat-card.vac-private[data-state="private"] #vacpct-count { color:#ffc9c9; }
.stat-card.vac-private[data-state="private"] .progress-center { color:#ffefef; text-shadow:0 0 8px rgba(255,80,80,0.55); }
.stat-card.vac-private[data-state="no-friends"] #vacpct-count { color:#ffe3c4; }
.stat-card.vac-private[data-state="no-friends"] .progress-center { color:#fff5e2; text-shadow:0 0 6px rgba(255,170,60,0.5); }
/* Preaim FOV visualization (semicircle) */
#card-preaim { display:flex; flex-direction:column; align-items:center; }
.preaim-wrap { position:relative; width:120px; height:120px; margin-top:2px; }
.preaim-svg { width:120px; height:120px; }
#preaim-base { fill:none; stroke:rgba(255,255,255,0.12); stroke-width:1.25; }
#preaim-sector { fill:var(--color-success); filter:drop-shadow(0 0 5px rgba(47,155,70,0.45)); transition: d 320ms var(--global-transition), fill 160ms var(--global-transition); }
#preaim-sector.yellow { fill:var(--color-gold); filter:drop-shadow(0 0 5px rgba(233,177,14,0.45)); }
#preaim-sector.red { fill:var(--color-danger); filter:drop-shadow(0 0 5px rgba(207,53,53,0.55)); }
#preaim-sector.green { fill:var(--color-success); }
/* Removed central preaim value display */
/* Head accuracy standalone visualization */
#card-accuracy-head { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.head-acc-wrap { position:relative; width:120px; height:140px; display:flex; align-items:center; justify-content:center; }
.head-acc-figure { position:absolute; inset:0; }
.head-acc-figure svg { height:130px; }
.head-bullets { position:absolute; inset:0; pointer-events:none; }
.bullet-hole { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--color-text-secondary); box-shadow:0 0 0 1px rgba(0,0,0,0.6),0 0 4px rgba(0,0,0,0.4); opacity:.95; transform:translate(-50%,-50%); }
.bullet-hole:after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 2px rgba(0,0,0,0.6) inset; }
.bullet-hole.red { background:var(--color-danger); box-shadow:0 0 0 1px rgba(0,0,0,0.7),0 0 6px rgba(207,53,53,0.55); }
.bullet-hole.yellow { background:var(--color-gold); box-shadow:0 0 0 1px rgba(0,0,0,0.7),0 0 6px rgba(233,177,14,0.55); }
.bullet-hole.green { background:var(--color-success); box-shadow:0 0 0 1px rgba(0,0,0,0.7),0 0 6px rgba(47,155,70,0.55); }
.bullet-hole.miss { background:var(--color-danger); opacity:.45; box-shadow:0 0 0 1px rgba(0,0,0,0.6),0 0 4px rgba(207,53,53,0.4); }
@keyframes bulletPop { from { transform:scale(.4) translate(-50%,-50%); opacity:0; } to { transform:scale(1) translate(-50%,-50%); opacity:1; } }
.bullet-hole { animation: bulletPop 300ms ease forwards; transform:translate(-50%,-50%); }
.bullet-hole:nth-child(odd) { animation-delay:40ms; }
.bullet-hole:nth-child(even) { animation-delay:80ms; }
/* Head accuracy bottom value styled like other progress-minmax rows */
#card-accuracy-head .progress-minmax { justify-content:center; margin-top:8px; }
#card-accuracy-head .progress-minmax span { font-size:.55rem; letter-spacing:.08em; font-weight:600; color:var(--color-text-secondary); }
#faceit-center { flex-direction:column; gap:2px; text-align:center; }
#faceit-skill-center { font-size:.95rem; font-weight:700; letter-spacing:.05em; }
#faceit-elo-center { font-size:.55rem; font-weight:500; opacity:.85; margin-top:0; }
.progress-minmax { margin-top:6px; font-size:.55rem; letter-spacing:.08em; color:var(--color-text-secondary); display:flex; width:100%; justify-content:space-between; font-weight:600; }
#vacpct-count-wrap { justify-content:center; }
#vacpct-count { font-size:.6rem; letter-spacing:.1em; text-align:center; }
/* Unified bottom row for stat cards (replaces per-metric variants) */
.stat-card-bottom { margin-top:6px; font-size:.55rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-secondary); display:flex; width:100%; gap:4px; font-weight:600; line-height:1; }
.stat-card-bottom > span { flex:1 1 0; }
.stat-card-bottom > span:only-child { text-align:center; flex-grow:1;}
.stat-card-bottom > span:not(:only-child):first-child { text-align:left; flex-grow:1;}
.stat-card-bottom > span:not(:only-child):last-child { text-align:right; flex-grow:1;}
.stat-card-bottom > span:nth-child(2):nth-last-child(2) { text-align:center; flex-grow:3;}

#vacpct-count-wrap { justify-content:center; }
#vacpct-count { font-size:.6rem; letter-spacing:.1em; text-align:center; }
/* Leetify icon */
.leetify-icon { position:absolute; top:20px; right:16px; width:50px;object-fit:contain; opacity:.85; pointer-events:none; filter:drop-shadow(0 0 4px rgba(0,0,0,0.6)); }
.leetify-card:hover .leetify-icon { opacity:1; }
/* Updated Faceit icon for header removal scenario */
.faceit-icon { width:100px; margin:4px auto 6px; display:block; position:static; opacity:.9; }
.faceit-card:hover .faceit-icon { opacity:1; }
/* KD ring uses default progress-card styles */

.suspicion-alert { background: var(--color-bg-surface-alt); position: relative; padding:16px 18px 14px 18px; border-radius: var(--radius-md); display:none; margin-bottom:24px; box-shadow:0 0 0 1px rgba(255,255,255,0.02); }
.suspicion-alert:before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--color-danger); border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.suspicion-alert.show { display:block; }
.suspicion-alert h2 { margin:0 0 10px 0; font-size:.875rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color: var(--color-text-primary); display:flex; align-items:center; gap:.5rem; }
.suspicion-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.suspicion-list li { background: var(--color-danger); color:#fff; padding:.35rem .6rem; font-size:.625rem; font-weight:600; letter-spacing:.05em; border-radius: var(--radius-sm); text-transform:uppercase; }
.suspicion-actions { display:flex; align-items:center; gap:10px; margin:4px 0 10px; flex-wrap:wrap; }
.button-primary--gold.small { height:30px; font-size:.65rem; padding:0 .9rem;}
.button-primary--gold.small:active { box-shadow: inset 0 -2px #cc6c31; }
#copy-suspicion-feedback { font-size:.625rem; font-weight:600; letter-spacing:.08em; color:var(--color-text-secondary); min-height:1em; }
#copy-suspicion-btn[disabled] { filter:grayscale(.4) brightness(.8); cursor:default; }

.faceit-info { background: var(--color-bg-surface-alt); border:none; border-radius: var(--radius-md); padding:16px 18px 14px 18px; margin-top:24px; position:relative; transition: background var(--global-transition); box-shadow:0 0 0 1px rgba(255,255,255,0.02); }
.faceit-info:hover { background: var(--color-bg-hover); }
.faceit-info h3 { margin:0 0 12px 0; font-size:.625rem; letter-spacing:.08em; font-weight:700; text-transform:uppercase; color: var(--color-text-secondary); display:flex; align-items:center; gap:.4rem; }
.faceit-info h3:after { content:""; flex:1; height:1px; background: var(--color-border); opacity:.5; margin-left:.5rem; }
.faceit-info p { margin:6px 0; font-size:.8125rem; color: var(--color-text-primary); display:flex; justify-content:space-between; }
.faceit-info p span { color: var(--color-text-secondary); }

    .button-primary--gold {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: .25rem;
        padding: 0 1.25rem;
        font-size: .65rem;
        font-weight: 700;
        line-height: 1.15;
        height: 36px;
        background-color: #e9b10e;
        color: #101014;
        box-shadow: inset 0 -2px #cc6c31;
        padding-bottom: 3px;
        transition: all var(--global-transition);
        cursor: pointer;
        text-decoration: none;
        border: none;
    }

    .button-primary--gold:hover {
        background-color: #f5c432;
    }

    .button-primary--gold:active {
        background-color: #d68b00;
        box-shadow: inset 0 -2px #cc6c31;
    }

    .label {
        font-size: .6875rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        font-family: Flama-Medium, Flama, sans-serif;
        font-weight: 700;
        color: #9293a6;
    }

    .heading {
        font-family: Flama, sans-serif;
        font-size: 1.75rem;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 1.25;
        color: #dcdcdc;
    }
/* Removed layout grid / sidebar */
/* Loader Overlay */
#loader-overlay { position:fixed; inset:0; background:radial-gradient(circle at 40% 35%, rgba(255,186,24,0.08), transparent 70%), #0f1014; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; z-index:9999; font-family:Flama, sans-serif; }
#loader-overlay.fade-out { opacity:0; pointer-events:none; transition: opacity 600ms ease; }
.loader-title { font-family:Flama, sans-serif; font-size:2.1rem; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-primary); font-weight:400; text-align:center; }
.loader-sub { font-size:.75rem; text-transform:uppercase; letter-spacing:.18em; font-weight:600; color:var(--color-text-secondary); text-align:center; opacity:.9; }
.loader-bar { width:360px; max-width:70vw; height:10px; background:#1a1b22; border-radius:20px; overflow:hidden; position:relative; box-shadow:0 0 0 1px rgba(255,255,255,0.04),0 4px 12px -2px rgba(0,0,0,0.6) inset; }
.loader-bar-fill { position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#e9b10e,#f5c432 60%,#ffdd66); box-shadow:0 0 12px 2px rgba(233,177,14,0.35),0 0 32px -4px rgba(245,196,50,0.4); border-radius:inherit; transition: width 650ms var(--global-transition); }
.loader-stages { display:flex; gap:10px; width:360px; max-width:70vw; justify-content:space-between; }
.loader-stage { flex:1; height:4px; background:#1a1b22; border-radius:4px; position:relative; overflow:hidden; }
.loader-stage.active:before, .loader-stage.done:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#e9b10e,#f5c432); box-shadow:0 0 6px rgba(233,177,14,0.5); }
.loader-stage.done:before { background:linear-gradient(90deg,#2f9b46,#5ad272); box-shadow:0 0 6px rgba(47,155,70,0.55); }
.loader-metric-log { font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-secondary); height:54px; width:360px; max-width:70vw; display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.loader-metric-log span { opacity:.55; animation: fadeInMetric .5s ease forwards; }
@keyframes fadeInMetric { from { opacity:0; transform:translateY(6px); } to { opacity:.55; transform:translateY(0); } }
@media (max-width:600px){ .loader-title{font-size:1.6rem;} .loader-bar{height:9px;} }

/* Empire promo card */
#card-empire { position:relative; overflow:hidden; aspect-ratio:1; cursor:pointer; }
#card-empire::before { content:""; position:absolute; inset:0; background:url('/img/empire-square.jpg') center/cover no-repeat; transition:filter var(--global-transition), transform var(--global-transition); }
#card-empire::after { content:""; position:absolute; inset:0; }
#card-empire > * { position:relative; z-index:2; }
#card-empire p { margin:0; position:absolute; left:14px; bottom:14px; font-size:1.25rem; font-weight:700; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.6); text-align:justify;}
#card-empire:hover::before {transform:scale(1.05); }

/* Generic promo card */
.promo-card { position:relative; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; padding:12px 12px 14px;}
.promo-card::before { content:""; position:absolute; inset:0; background:var(--promo-bg) center/cover no-repeat; transition:filter var(--global-transition), transform var(--global-transition); }
.promo-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.15),rgba(0,0,0,0.65)); } 
.promo-card > * { position:relative; z-index:2; } 
.promo-card p { margin:0; font-size:.74rem; line-height:1.08; font-family:Flama, sans-serif; font-weight:700; text-transform:uppercase; color:#fff; text-shadow:0 2px 5px rgba(0,0,0,.6); text-align: justify; }
.promo-card:hover::before { transform:scale(1.04); }
.promo-age-gated { cursor:pointer; position:relative; }
.promo-age-gated:focus { outline:2px solid #e9b10e; outline-offset:2px; }

/* Report count card */
#card-report-count { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
#report-count-val { font-size:3rem !important; display:flex; align-items:center; justify-content:center; width:100%; flex:1 1 auto; margin:0; }
#card-report-count .report-count-sub { margin-top:auto; }
#age-gate-overlay.fade-in { animation: ageGateFade .25s ease forwards; }
#age-gate-overlay.fade-out { animation: ageGateFadeOut .25s ease forwards; }
@keyframes ageGateFade { from { opacity:0; } to { opacity:1; } }
@keyframes ageGateFadeOut { from { opacity:1; } to { opacity:0; } }
/* Remove legacy empire specific rules if present */
#card-empire, #card-empire::before, #card-empire::after { all: unset; }
/* Reaction timeline visualization */
.reaction-card { position:relative; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; align-items:center; }
.reaction-card .reaction-timeline { position:relative; height:34px; margin:0 0 14px; }
.reaction-card .rt-icon { position:absolute; top:50%; width:22px; height:22px; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; }
.reaction-card .rt-eye { left:0; }
.reaction-card .rt-bullet { right:0; }
.reaction-card .rt-eye svg, .reaction-card .rt-bullet svg { width:18px; height:18px; opacity:.85; }
.reaction-card .rt-track { position:absolute; left:26px; right:26px; top:50%; height:10px; transform:translateY(-50%); background:#22232c; border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,0.03) inset; overflow:hidden; }
.reaction-card .rt-progress { position:absolute; left:26px; top:50%; height:10px; width:calc(100% - 52px); transform:translateY(-50%) scaleX(0); transform-origin:left center; background:#2584ff; border-radius:3px; filter:drop-shadow(0 0 5px rgba(37,132,255,0.55)); }
/* Force single blue style regardless of any speed classification classes */
.reaction-card.fast .rt-progress,
.reaction-card.medium .rt-progress,
.reaction-card.slow .rt-progress { background:#2584ff !important; filter:drop-shadow(0 0 5px rgba(37,132,255,0.55)) !important; }
@keyframes rtFillOnce { to { transform:translateY(-50%) scaleX(1); } }
@keyframes rtFillOncePro { to { transform:translateY(-50%) scaleX(1); } }
.reaction-card .rt-progress-pro{position:absolute; left:26px; top:50%; height:6px; width:calc(100% - 52px); transform:translate(-2px,-50%) scaleX(0); transform-origin:left center; background:linear-gradient(90deg,#00d676,#009e4a); border-radius:3px; opacity:.55; filter:drop-shadow(0 0 4px rgba(0,200,120,0.35)); pointer-events:none; mix-blend-mode:screen;}
@keyframes rtFlashEye { 0% { box-shadow:0 0 0 0 rgba(255,255,255,0); } 8% { box-shadow:0 0 10px 4px rgba(255,255,255,0.9); } 100% { box-shadow:0 0 0 0 rgba(255,255,255,0); } }
@keyframes rtFlashBulletPlayer { 
    0% { box-shadow:0 0 0 0 rgba(37,132,255,0); background:radial-gradient(circle at 50% 50%, rgba(37,132,255,0) 0%, rgba(37,132,255,0) 60%, rgba(37,132,255,0) 100%); transform:translateY(-50%) scale(1); }
    6% { box-shadow:0 0 18px 8px rgba(37,132,255,0.95); background:radial-gradient(circle at 50% 50%, rgba(37,160,255,0.70) 0%, rgba(37,132,255,0.42) 55%, rgba(37,132,255,0.10) 100%); transform:translateY(-50%) scale(1.17); }
    18% { box-shadow:0 0 14px 6px rgba(37,132,255,0.70); background:radial-gradient(circle at 50% 50%, rgba(37,132,255,0.50) 0%, rgba(37,132,255,0.30) 55%, rgba(37,132,255,0.06) 100%); transform:translateY(-50%) scale(1.09); }
    38% { box-shadow:0 0 10px 5px rgba(37,132,255,0.45); background:radial-gradient(circle at 50% 50%, rgba(37,132,255,0.30) 0%, rgba(37,132,255,0.18) 55%, rgba(37,132,255,0.04) 100%); transform:translateY(-50%) scale(1.04); }
    70% { box-shadow:0 0 6px 3px rgba(37,132,255,0.25); background:radial-gradient(circle at 50% 50%, rgba(37,132,255,0.18) 0%, rgba(37,132,255,0.10) 55%, rgba(37,132,255,0.02) 100%); transform:translateY(-50%) scale(1.01); }
    100% { box-shadow:0 0 0 0 rgba(37,132,255,0); background:radial-gradient(circle at 50% 50%, rgba(37,132,255,0) 0%, rgba(37,132,255,0) 60%, rgba(37,132,255,0) 100%); transform:translateY(-50%) scale(1); }
}
@keyframes rtFlashBulletPro { 
    0% { box-shadow:0 0 0 0 rgba(0,200,120,0); background:radial-gradient(circle at 50% 50%, rgba(0,200,120,0) 0%, rgba(0,200,120,0) 60%, rgba(0,200,120,0) 100%); transform:translateY(-50%) scale(1); }
    6% { box-shadow:0 0 18px 8px rgba(0,220,140,0.95); background:radial-gradient(circle at 50% 50%, rgba(0,220,140,0.70) 0%, rgba(0,200,120,0.44) 55%, rgba(0,200,120,0.11) 100%); transform:translateY(-50%) scale(1.17); }
    18% { box-shadow:0 0 14px 6px rgba(0,200,120,0.70); background:radial-gradient(circle at 50% 50%, rgba(0,200,120,0.50) 0%, rgba(0,200,120,0.30) 55%, rgba(0,200,120,0.07) 100%); transform:translateY(-50%) scale(1.09); }
    38% { box-shadow:0 0 10px 5px rgba(0,200,120,0.46); background:radial-gradient(circle at 50% 50%, rgba(0,200,120,0.32) 0%, rgba(0,200,120,0.18) 55%, rgba(0,200,120,0.05) 100%); transform:translateY(-50%) scale(1.04); }
    70% { box-shadow:0 0 6px 3px rgba(0,200,120,0.26); background:radial-gradient(circle at 50% 50%, rgba(0,200,120,0.18) 0%, rgba(0,200,120,0.10) 55%, rgba(0,200,120,0.02) 100%); transform:translateY(-50%) scale(1.01); }
    100% { box-shadow:0 0 0 0 rgba(0,200,120,0); background:radial-gradient(circle at 50% 50%, rgba(0,200,120,0) 0%, rgba(0,200,120,0) 60%, rgba(0,200,120,0) 100%); transform:translateY(-50%) scale(1); }
}
.reaction-card .rt-eye.flash { animation: rtFlashEye .45s ease; border-radius:50%; }
.reaction-card .rt-bullet.flash-player { animation: rtFlashBulletPlayer .48s cubic-bezier(.26,.01,.3,.98); border-radius:50%; }
.reaction-card .rt-bullet.flash-pro { animation: rtFlashBulletPro .48s cubic-bezier(.26,.01,.3,.98); border-radius:50%; }
/* Ensure bullet containers can show background flash (they were flex icons) */
.reaction-card .rt-bullet { width:22px; height:22px; border-radius:50%; }
/* Keep pistol icon visible above gradient */
.reaction-card .rt-bullet svg { position:relative; z-index:2; }
#reaction-time { margin:4px 0 2px; text-align:center; font-size:.55rem; letter-spacing:.08em; font-weight:600; color:var(--color-text-secondary); text-transform:uppercase; }

/* ================= New Utility & Component Classes (extracted from inline styles) ================= */
/* Utilities */
.hidden { display:none !important; }
.flex { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.flex-wrap { flex-wrap:wrap; }
.align-center { align-items:center; }
.align-start { align-items:flex-start; }
.justify-center { justify-content:center; }
.gap-6 { gap:6px; }
.gap-8 { gap:8px; }
.gap-10 { gap:10px; }
.gap-12 { gap:12px; }
.gap-14 { gap:14px; }
.gap-18 { gap:18px; }
.gap-20 { gap:20px; }
.ml-auto { margin-left:auto; }
.h-34 { height:34px; }
.text-xxs { font-size:.55rem; letter-spacing:.08em; font-weight:600; }
.text-xs { font-size:.6rem; letter-spacing:.08em; font-weight:600; }
.text-sm { font-size:.65rem; letter-spacing:.06em; font-weight:600; }

/* Secondary / neutral button */
.btn-secondary { background:var(--color-badge-neutral); color:var(--color-text-primary); border:1px solid var(--color-border-alt); border-radius:6px; font-weight:600; font-size:.7rem; padding:0 16px; letter-spacing:.05em; cursor:pointer; transition:background var(--global-transition); }
.btn-secondary:hover { background:#32333f; }

/* Generic modal overlay + surfaces */
.modal-overlay { position:fixed; inset:0; z-index:11000; background:rgba(15,16,20,0.9); backdrop-filter:blur(4px); display:none; align-items:flex-start; justify-content:center; overflow-y:auto; }
.modal-surface { background:var(--color-bg-surface-alt); border:1px solid var(--color-border); border-radius:14px; display:flex; flex-direction:column; box-shadow:0 12px 34px -10px rgba(0,0,0,0.65); }

/* Report modal specific */
#report-modal { margin:60px 0 80px; width:min(940px,92%); }
.report-modal-header { padding:20px 24px 4px; display:flex; align-items:center; gap:14px; }
.report-modal-title { margin:0; font-size:1.05rem; letter-spacing:.04em; font-weight:600; color:var(--color-text-primary); }
.report-modal-steamid { font-size:.6rem; letter-spacing:.08em; font-weight:600; color:var(--color-text-secondary); background:#252631; padding:4px 8px; border-radius:6px; }
.report-modal-close { background:#252631; color:var(--color-text-primary); border:1px solid var(--color-border-alt); font-size:.75rem; padding:0 12px; border-radius:6px; font-weight:600; cursor:pointer; }
.report-modal-body { padding:4px 24px 20px; display:flex; flex-direction:column; gap:18px; }
.report-intro { margin:0; font-size:.6rem; letter-spacing:.08em; color:var(--color-text-secondary); }
.report-form { display:flex; flex-direction:column; gap:18px; }
.report-accordion { display:flex; flex-direction:column; gap:14px; }
.report-note-block { display:flex; flex-direction:column; gap:6px; }
.report-note-label { font-size:.6rem; letter-spacing:.08em; font-weight:600; text-transform:uppercase; color:var(--color-text-secondary); }
.report-note-label span { font-weight:400; color:var(--color-text-faint); text-transform:none; }
.report-note-wrapper { position:relative; }
.report-note-input { width:100%; max-width:760px; height:34px; background:var(--color-bg-surface); border:1px solid var(--color-border-alt); color:var(--color-text-primary); padding:10px 12px; font-size:.72rem; line-height:1.4; border-radius:8px; outline:none; font-family:Flama, sans-serif; }
.note-counter { position:absolute; right:10px; bottom:6px; font-size:.55rem; letter-spacing:.08em; font-weight:600; color:var(--color-text-faint); }
.report-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.report-feedback { font-size:.625rem; font-weight:600; letter-spacing:.08em; min-height:1em; color:var(--color-text-secondary); }
.report-limits { margin:0; font-size:.55rem; letter-spacing:.08em; color:var(--color-text-faint); }
/* Report category text sizing reset to default body size */
.report-cat-title { font-size:inherit; font-weight:600; margin:0 0 4px; line-height:1.3; color:var(--color-text-primary); }
.report-cat-items { display:flex; flex-direction:column; gap:4px; }
.report-item { display:flex; align-items:flex-start; gap:8px; font-size:inherit; line-height:1.35; }
.report-item input { margin-top:3px; }
.report-item span { font-size:inherit; color:var(--color-text-primary); font-weight:400; }

/* Age gate specific */
.age-gate-overlay { position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; background:rgba(15,16,20,0.92); backdrop-filter:blur(3px); }
.age-gate-modal { background:var(--color-bg-surface-alt); border:1px solid var(--color-border); padding:28px 30px 26px; border-radius:12px; max-width:420px; width:92%; box-shadow:0 10px 28px -8px rgba(0,0,0,0.7); display:flex; flex-direction:column; gap:20px; }
.age-gate-header { display:flex; flex-direction:column; gap:10px; }
.age-gate-title { margin:0; font-size:1.15rem; font-weight:600; color:var(--color-text-primary); letter-spacing:.02em; }
.age-gate-desc { margin:0; font-size:.75rem; line-height:1.5; color:var(--color-text-secondary); }
.age-gate-field { display:flex; flex-direction:column; gap:8px; }
.age-gate-select { width:100%; padding:10px 12px; border-radius:8px; background:var(--color-bg-surface); border:1px solid var(--color-border-alt); color:var(--color-text-primary); font-size:.75rem; outline:none; cursor:pointer; }
.age-gate-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.age-gate-feedback { font-size:.6rem; font-weight:600; letter-spacing:.08em; min-height:1em; color:var(--color-text-faint); }

/* Adjust existing small gold button height variant */
.button-primary--gold.h-34, .h-34.button-primary--gold { height:34px; }

/* Preaim row center (removed inline style) */
#preaim-percent-row { justify-content:center; }
/* Faceit detail section */
.faceit-detail { background:var(--color-bg-surface-alt); border:1px solid var(--color-border); border-radius:14px; padding:20px 22px 22px; margin:30px 0 60px; box-shadow:0 0 0 1px rgba(255,255,255,0.03); display:flex; flex-direction:column; gap:18px; }
.faceit-detail-title { margin:0; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--color-text-primary); display:flex; align-items:center; gap:.5rem; }
.faceit-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px 24px; }
.faceit-row { display:flex; justify-content:space-between; align-items:center; background:#1d1e26; padding:8px 12px; border-radius:8px; font-size:.65rem; letter-spacing:.05em; }
.faceit-row.optional { opacity:.7; }
.faceit-label { font-weight:600; color:var(--color-text-secondary); text-transform:uppercase; }
.faceit-value { font-weight:600; color:var(--color-text-primary); font-size:.7rem; }
.faceit-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.faceit-feedback { font-size:.6rem; letter-spacing:.08em; font-weight:600; color:var(--color-text-secondary); min-height:1em; }
.faceit-detail a.button-primary--gold.disabled { pointer-events:none; filter:grayscale(.6) brightness(.8); }
.age-badge { font-weight:600; color:var(--color-gold); }
.preaim-title { align-self:flex-start; }

/* High-specificity override for VAC private card (ensure after generic .stat-card rules) */
#card-vacpct.vac-private, .stats-grid #card-vacpct.vac-private {
    background:#3a0508 linear-gradient(145deg, rgba(150,0,0,0.9), rgba(70,0,0,0.82)) !important;
    box-shadow:0 0 0 1px rgba(255,70,70,0.25), 0 0 28px -6px rgba(255,0,0,0.55) inset, 0 0 10px -1px rgba(180,0,0,0.55);
}
#card-vacpct.vac-private:hover {
    background:linear-gradient(145deg, rgba(170,0,0,0.92), rgba(80,0,0,0.9)) !important;
}
#card-vacpct.vac-private .vac-warning-icon { filter:drop-shadow(0 0 10px rgba(255,120,120,0.65)); }

/* ================= Faceit Recent Matches (List Version) ================= */
div.faceit-recent-header { display:grid; grid-template-columns:75px 100px 75px 75px 32px 32px 32px 32px 32px; gap:0; font-size:.6rem; letter-spacing:.08em; font-weight:600; text-transform:uppercase; color:var(--color-text-secondary); background:var(--color-bg-surface-alt); border:1px solid var(--color-border); border-bottom:none; padding:6px 8px; border-top-left-radius:8px; border-top-right-radius:8px; text-align:center;}
div.faceit-recent-header span { padding:0 4px; display:flex; align-items:center; justify-content:center; }
div.faceit-recent-header span.col-date { justify-content: flex-start; }
div.faceit-recent-header span.col-map { justify-content: flex-start; }
.faceit-recent-list { list-style:none; margin:0; padding:0; border:1px solid var(--color-border); border-top:none; border-bottom-left-radius:8px; border-bottom-right-radius:8px; overflow:hidden; }
li.faceit-recent-item { display:grid; grid-template-columns:75px 100px 75px 75px 32px 32px 32px 32px 32px; font-size:.65rem; padding:4px 8px; align-items:center; background:#17191d; border-top:1px solid #22252b; text-align:center; transition: background 0.175s cubic-bezier(.785, .135, .15, .86); }
li.faceit-recent-item.alt { background:#1c1f24; }
li.faceit-recent-item:hover { background:#1a1d22; }
li.faceit-recent-item.win span.col-result { color:#6dd27d; }
li.faceit-recent-item.loss span.col-result { color:#d26d6d; }
li.faceit-recent-item span {text-align:center;}
li.faceit-recent-item span.col-date { opacity:.75; font-variant-numeric:tabular-nums; text-align:left; }
li.faceit-recent-item span.col-map { max-width:140px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; }
li.faceit-recent-item span.col-result { font-weight:600; }
li.faceit-recent-item span.col-map a.faceit-recent-map-link { color:#9bb4ff; text-decoration:none; }
li.faceit-recent-item span.col-map a.faceit-recent-map-link:hover { text-decoration:underline; }
@media (max-width: 900px){
    .faceit-recent-header, .faceit-recent-item { grid-template-columns:75px 1fr 75px 75px 32px 32px 32px 32px 32px; }
}
@media (max-width: 680px){
    .faceit-recent-header span.col-hs, .faceit-recent-item .col-hs { display:none; }
    .faceit-recent-header, .faceit-recent-item { grid-template-columns:75px 1fr 75px 75px 32px 32px 32px 32px; }
}
@media (max-width: 560px){
    .faceit-recent-header span.col-a, .faceit-recent-item .col-a { display:none; }
    .faceit-recent-header, .faceit-recent-item { grid-template-columns:75px 1fr 75px 75px 32px 32px 32px; }
}
@media (max-width: 480px){
    .faceit-recent-header span.col-kd, .faceit-recent-item .col-kd { display:none; }
    .faceit-recent-header, .faceit-recent-item { grid-template-columns:75px 1fr 75px 75px 32px 32px; } 
}
@media (max-width: 410px){
    .faceit-recent-header span.col-score, .faceit-recent-item .col-score { display:none; } 
    .faceit-recent-header, .faceit-recent-item { grid-template-columns:75px 1fr 75px 75px 32px; }
}