/* ===================================================================
ClanWar -- stylesheet for /cw/* on gameme.luda-ekipa.rs
Layout: fixed left sidebar + scrollable main column.
Mobile (<= 900px): sidebar slides in from the left via a CSS-only
checkbox-and-label "burger" toggle.
=================================================================== */
:root {
/* HLstatsX-ish dark palette, but a touch cooler so the accent pops. */
--cw-bg: #0a0c13;
--cw-bg-2: #11151f;
--cw-bg-3: #181d2b;
--cw-bg-4: #232a3d;
--cw-bg-5: #2d364d;
--cw-border: #262e44;
--cw-border-2: #313a55;
--cw-fg: #e6eaf3;
--cw-fg-2: #99a2b8;
--cw-fg-dim: #5a647d;
--cw-accent: #4f8fff;
--cw-accent-2: #a855f7;
--cw-good: #34d399;
--cw-warn: #fbbf24;
--cw-bad: #f87171;
--cw-t: #f97316; /* T side */
--cw-ct: #4f8fff; /* CT side */
--cw-radius: 10px;
--cw-radius-sm: 6px;
--cw-radius-lg: 14px;
--cw-side-w: 232px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body.cw-body {
margin: 0;
background: var(--cw-bg);
color: var(--cw-fg);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.55;
min-height: 100vh;
/* subtle radial glow under the sidebar/top corner */
background-image:
radial-gradient(900px 600px at -200px -200px, rgba(79,143,255,0.08), transparent 60%),
radial-gradient(800px 500px at 110% -100px, rgba(168,85,247,0.06), transparent 60%);
}
a { color: var(--cw-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ===================================================================
SIDEBAR
=================================================================== */
.cw-side {
/* Fixed-position so the rail is rock-solid sticky no matter what
the main column does (mobile drawer override is further down). */
position: fixed;
top: 0; left: 0;
width: var(--cw-side-w);
height: 100vh;
background: linear-gradient(180deg, #11151f, #0d1119 80%);
border-right: 1px solid var(--cw-border);
display: flex;
flex-direction: column;
z-index: 60;
box-shadow: 1px 0 0 rgba(255,255,255,0.02);
}
/* Brand */
.cw-brand {
display: flex; align-items: center; gap: 12px;
padding: 18px 16px 16px;
border-bottom: 1px solid var(--cw-border);
text-decoration: none !important;
color: var(--cw-fg);
}
.cw-brand-icon {
width: 38px; height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2));
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 13px;
color: #fff;
letter-spacing: 0.5px;
box-shadow:
0 6px 18px rgba(79,143,255,0.40),
inset 0 1px 0 rgba(255,255,255,0.35);
}
.cw-brand-text strong {
display: block; font-size: 14px; font-weight: 800; letter-spacing: 0.2px;
}
.cw-brand-text small {
display: block; font-size: 9px; font-weight: 800;
color: var(--cw-fg-dim); letter-spacing: 2px; margin-top: 1px;
}
/* Nav */
.cw-side-nav {
flex: 1;
overflow-y: auto;
padding: 12px 10px;
}
.cw-side-nav::-webkit-scrollbar { width: 4px; }
.cw-side-nav::-webkit-scrollbar-thumb { background: var(--cw-border); border-radius: 4px; }
.cw-side-sec { margin-bottom: 14px; }
.cw-side-sec-h {
font-size: 9px; font-weight: 800;
letter-spacing: 2px; text-transform: uppercase;
color: var(--cw-fg-dim);
padding: 0 12px 8px;
}
.cw-side-link {
position: relative;
display: flex; align-items: center; gap: 11px;
padding: 8px 12px;
margin: 1px 0;
border-radius: var(--cw-radius-sm);
font-weight: 600; font-size: 13px;
color: var(--cw-fg-2);
text-decoration: none !important;
transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.cw-side-link:hover {
background: var(--cw-bg-3);
color: var(--cw-fg);
}
.cw-side-link.active {
background: linear-gradient(90deg, rgba(79,143,255,0.20), rgba(79,143,255,0.04) 80%);
color: var(--cw-fg);
}
.cw-side-link.active::before {
content: '';
position: absolute;
left: -10px; top: 50%;
transform: translateY(-50%);
width: 3px; height: 20px;
background: linear-gradient(180deg, var(--cw-accent), var(--cw-accent-2));
border-radius: 0 3px 3px 0;
box-shadow: 0 0 8px rgba(79,143,255,0.6);
}
.cw-side-link.active .cw-ico { background-color: var(--cw-accent); }
.cw-side-label { flex: 1; min-width: 0; }
/* Live-matches widget (above the footer) */
.cw-side-live {
padding: 8px 10px 6px;
border-top: 1px solid var(--cw-border);
display: flex; flex-direction: column; gap: 2px;
}
.cw-side-live-row {
display: flex; flex-direction: column; gap: 1px;
padding: 6px 8px;
border-radius: 6px;
text-decoration: none;
color: var(--cw-fg);
transition: background 80ms ease;
}
.cw-side-live-row:hover { background: rgba(255,255,255,0.04); }
.cw-side-live-fmt {
font-size: 11px; font-weight: 800;
letter-spacing: 0.4px;
color: var(--cw-accent);
}
.cw-side-live-meta {
font-size: 11px;
color: var(--cw-fg-dim);
}
/* Footer (signed-in player chip) */
.cw-side-foot {
border-top: 1px solid var(--cw-border);
padding: 12px 10px;
display: flex; flex-direction: column; gap: 6px;
}
.cw-side-me {
display: flex; flex-direction: column; gap: 8px;
padding: 10px;
background: linear-gradient(180deg, var(--cw-bg-3), var(--cw-bg-2));
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
text-decoration: none !important;
transition: border-color 0.15s, transform 0.08s;
}
.cw-side-me:hover {
border-color: var(--cw-accent);
transform: translateY(-1px);
}
.cw-side-me-name {
font-weight: 700; font-size: 12px;
color: var(--cw-fg);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cw-side-me .cw-prem { gap: 8px; }
.cw-side-me .cw-prem-chip { min-width: 34px; height: 28px; font-size: 12px; padding: 0 6px; }
.cw-side-me .cw-prem-tier { font-size: 11px; }
.cw-side-me .cw-prem-mmr { font-size: 11px; }
.cw-side-me .cw-prem-mmr-label { display: none; }
.cw-side-logout {
display: block;
text-align: center; font-size: 11px;
color: var(--cw-fg-dim);
padding: 4px 8px;
text-decoration: none !important;
}
.cw-side-logout:hover { color: var(--cw-bad); }
.cw-side-signin {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 12px;
background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2));
color: #fff !important;
border-radius: var(--cw-radius);
text-decoration: none !important;
font-weight: 700; font-size: 13px;
box-shadow: 0 6px 16px rgba(79,143,255,0.30);
transition: transform 0.08s, box-shadow 0.15s;
}
.cw-side-signin:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(79,143,255,0.40);
}
.cw-side-signin .cw-ico { background-color: #fff; }
.cw-side-hlx {
display: block;
text-align: center; font-size: 11px;
color: var(--cw-fg-dim);
padding: 6px;
text-decoration: none !important;
border-radius: var(--cw-radius-sm);
transition: background 0.12s, color 0.12s;
}
.cw-side-hlx:hover {
color: var(--cw-accent);
background: var(--cw-bg-3);
}
/* ===================================================================
MAIN COLUMN
=================================================================== */
.cw-main {
margin-left: var(--cw-side-w); /* clear the fixed sidebar */
min-height: 100vh;
display: flex; flex-direction: column;
}
.cw-topbar {
position: sticky; top: 0; z-index: 50;
background: rgba(10,12,19,0.80);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--cw-border);
padding: 12px 22px;
display: flex; align-items: center; gap: 14px;
min-height: 60px;
}
.cw-page-title {
margin: 0; flex: 1;
font-size: 17px; font-weight: 700;
letter-spacing: -0.2px;
}
.cw-top-actions { display: flex; gap: 8px; align-items: center; }
.cw-top-live { color: var(--cw-bad) !important; border-color: rgba(248,113,113,0.35); }
.cw-top-live:hover { background: rgba(248,113,113,0.10); border-color: var(--cw-bad); }
.cw-live-dot {
width: 6px; height: 6px; border-radius: 999px;
background: var(--cw-bad);
box-shadow: 0 0 8px var(--cw-bad);
animation: cw-pulse 1.4s ease-in-out infinite;
}
@keyframes cw-pulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
.cw-content {
padding: 22px;
max-width: 1320px;
width: 100%;
margin: 0 auto;
}
/* ===================================================================
MOBILE: sidebar slides in, scrim covers main
=================================================================== */
.cw-side-toggle { display: none; } /* checkbox itself, hidden */
.cw-side-scrim { display: none; } /* dim overlay, mobile only */
.cw-burger { display: none; } /* hamburger button, mobile only */
@media (max-width: 900px) {
.cw-side {
/* Slide off-screen by default; checkbox slides it in. */
width: 260px;
transform: translateX(-100%);
transition: transform 0.22s ease;
box-shadow: 12px 0 32px rgba(0,0,0,0.45);
}
.cw-side-toggle:checked ~ .cw-side { transform: translateX(0); }
.cw-side-scrim {
display: block;
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
opacity: 0; pointer-events: none;
transition: opacity 0.22s ease;
z-index: 55;
}
.cw-side-toggle:checked ~ .cw-side-scrim {
opacity: 1; pointer-events: auto;
}
.cw-burger {
display: flex; flex-direction: column; justify-content: space-between;
width: 26px; height: 20px;
cursor: pointer; padding: 2px;
border-radius: var(--cw-radius-sm);
}
.cw-burger:hover { background: var(--cw-bg-3); }
.cw-burger span {
display: block; height: 2px; width: 100%;
background: var(--cw-fg);
border-radius: 2px;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.cw-main {
margin-left: 0; /* sidebar is drawer, no offset needed */
width: 100%;
}
.cw-content { padding: 16px; }
}
/* ===================================================================
ICONS
SVG masks driven by currentColor (or the active accent). Each icon
is data-URI baked here so we don't ship a sprite sheet.
=================================================================== */
.cw-ico {
display: inline-block;
width: 18px; height: 18px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: 18px 18px; mask-size: 18px 18px;
}
.cw-ico-trophy { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.cw-ico-swords { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.cw-ico-crown { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.cw-ico-pulse { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.cw-ico-list { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.cw-ico-chart { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.cw-ico-user { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.cw-ico-users { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.cw-ico-cog { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.cw-ico-key { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
/* ===================================================================
RANK CHIP (CS2 Premier-style letter chip)
Kept intact -- this is the main visual element of the whole ladder.
=================================================================== */
.cw-prem {
--cwp-c: #4f8fff;
--cwp-c-light: #82adff;
--cwp-c-dark: #2a5fc4;
--cwp-glow: rgba(79,143,255,0.45);
display: inline-flex; align-items: center; gap: 12px;
font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
line-height: 1.15;
white-space: nowrap;
vertical-align: middle;
}
.cw-prem-chip {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; height: 32px;
padding: 0 8px;
border-radius: 7px;
background:
linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0) 55%),
linear-gradient(135deg, var(--cwp-c-light), var(--cwp-c) 55%, var(--cwp-c-dark));
border: 1px solid rgba(255,255,255,0.30);
color: #ffffff;
font-weight: 900; font-size: 15px; letter-spacing: 0.4px;
text-shadow: 0 1px 2px rgba(0,0,0,0.65),
0 0 6px rgba(0,0,0,0.35);
box-shadow:
0 3px 12px var(--cwp-glow),
inset 0 -1px 4px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.45);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cw-prem:hover .cw-prem-chip {
transform: translateY(-1px);
box-shadow:
0 6px 18px var(--cwp-glow),
inset 0 -1px 4px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.55);
}
.cw-prem-mod-plus .cw-prem-chip { box-shadow:
0 3px 12px var(--cwp-glow),
inset 0 -1px 4px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.55),
inset 3px 0 0 rgba(255,255,255,0.65); }
.cw-prem-mod-minus .cw-prem-chip { box-shadow:
0 3px 12px var(--cwp-glow),
inset 0 -1px 4px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.25),
inset -3px 0 0 rgba(0,0,0,0.50); }
.cw-prem-chip-unranked {
background: linear-gradient(135deg, #3a4256, #1d2230);
border-color: #5c6479;
color: #b8c1d6;
box-shadow: none;
}
.cw-prem-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cw-prem-tier {
font-weight: 700; font-size: 12px; letter-spacing: 0.3px;
color: var(--cwp-c);
text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 10px var(--cwp-glow);
}
.cw-prem-tier small {
font-weight: 700; font-size: 10px; opacity: 0.9; margin-left: 4px;
color: var(--cwp-c); letter-spacing: 0.8px;
}
.cw-prem-mmr {
font-weight: 700; font-size: 12px;
color: var(--cw-fg); font-variant-numeric: tabular-nums;
letter-spacing: 0.2px;
}
.cw-prem-mmr-label {
font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--cw-fg-dim);
margin-left: 4px;
}
.cw-prem-unranked {
--cwp-c: #8b95aa;
--cwp-glow: rgba(140,150,170,0.30);
}
.cw-prem-unranked .cw-prem-tier { color: #b8c1d6; text-shadow: none; }
/* Table-row variant: just the chip. */
.cw-table .cw-prem { gap: 0; }
.cw-table .cw-prem-chip { min-width: 32px; height: 26px; font-size: 12px; border-radius: 5px; padding: 0 6px; }
.cw-table .cw-prem-body { display: none; }
.cw-table .cw-prem:hover .cw-prem-chip { transform: none; }
.cw-table .cw-progress { width: 80px; margin-top: 5px; }
/* Progress bar (tier progress) */
.cw-progress {
--cw-c: var(--cw-accent);
height: 6px; background: var(--cw-bg-3);
border-radius: 999px; overflow: hidden; margin-top: 6px;
}
.cw-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--cw-c), color-mix(in srgb, var(--cw-c) 70%, #fff));
border-radius: 999px;
transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
/* ===================================================================
CARDS
=================================================================== */
.cw-card {
background: var(--cw-bg-2);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
margin-bottom: 18px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.cw-card-h {
padding: 14px 18px;
border-bottom: 1px solid var(--cw-border);
display: flex; justify-content: space-between; align-items: center;
background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 90%);
}
.cw-card-h h2 {
margin: 0; font-size: 12px; font-weight: 800;
color: var(--cw-fg-2); text-transform: uppercase; letter-spacing: 1.4px;
}
.cw-card-h small {
color: var(--cw-fg-dim); font-weight: 500;
text-transform: none; letter-spacing: 0; margin-left: 6px;
}
.cw-card-b { padding: 0; }
.cw-card-b.padded { padding: 18px; }
/* ===================================================================
BUTTONS
=================================================================== */
.cw-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px;
font: inherit; font-weight: 700; font-size: 13px;
background: linear-gradient(135deg, var(--cw-accent), #3a72d8);
color: #fff;
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--cw-radius-sm);
cursor: pointer;
text-decoration: none !important;
box-shadow: 0 4px 14px rgba(79,143,255,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
transition: transform 0.10s ease, box-shadow 0.15s ease, filter 0.15s ease;
letter-spacing: 0.2px;
}
.cw-btn:hover {
transform: translateY(-1px);
filter: brightness(1.08);
box-shadow: 0 7px 22px rgba(79,143,255,0.34), inset 0 1px 0 rgba(255,255,255,0.22);
}
.cw-btn:active { transform: translateY(0); }
.cw-btn.ghost {
background: var(--cw-bg-2);
color: var(--cw-fg-2);
border-color: var(--cw-border);
box-shadow: none;
}
.cw-btn.ghost:hover {
background: var(--cw-bg-3);
color: var(--cw-fg);
border-color: var(--cw-border-2);
}
.cw-btn.danger {
background: linear-gradient(135deg, var(--cw-bad), #d04646);
box-shadow: 0 4px 14px rgba(248,113,113,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
.cw-btn.sm { padding: 5px 11px; font-size: 12px; }
.cw-btn:disabled, .cw-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
/* ===================================================================
HERO BLOCK
=================================================================== */
.cw-hero {
position: relative;
background:
radial-gradient(600px 200px at 100% 0, rgba(168,85,247,0.18), transparent 60%),
radial-gradient(500px 200px at 0 100%, rgba(79,143,255,0.16), transparent 60%),
linear-gradient(135deg, var(--cw-bg-2), var(--cw-bg));
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-lg);
padding: 30px;
margin-bottom: 22px;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
overflow: hidden;
}
.cw-hero::before {
content: '';
position: absolute; left: 0; top: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(79,143,255,0.4), transparent);
}
.cw-hero h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }
.cw-hero p { margin: 0 0 14px; color: var(--cw-fg-2); max-width: 65ch; }
.cw-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* ----- Format tabs (1v1 / 2v2 / 3v3 / 5v5) ----- */
.cw-format-tabs {
display: flex; gap: 6px; flex-wrap: wrap;
margin: 4px 0 14px;
padding: 4px;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-radius: 10px;
width: max-content; max-width: 100%;
}
.cw-format-tab {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
border-radius: 7px;
color: var(--cw-fg-2);
text-decoration: none;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.2px;
transition: background 120ms ease, color 120ms ease;
}
.cw-format-tab:hover { background: rgba(255,255,255,0.04); color: var(--cw-fg); }
.cw-format-tab.active {
background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2));
color: #fff;
box-shadow: 0 4px 14px rgba(79,143,255,0.35);
}
.cw-format-tab-count {
display: inline-block;
min-width: 22px; padding: 2px 7px;
border-radius: 999px;
background: rgba(0,0,0,0.32);
font-size: 11px; font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
color: #e6ecf7;
}
.cw-format-tab:not(.active) .cw-format-tab-count {
background: rgba(255,255,255,0.05);
color: var(--cw-fg-dim);
}
.cw-hero-rating {
text-align: center;
padding: 20px 28px;
background: linear-gradient(180deg, var(--cw-bg-3), var(--cw-bg-2));
border: 1px solid var(--cw-border-2);
border-radius: var(--cw-radius);
min-width: 230px;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.cw-big-mmr {
font-size: 44px; font-weight: 900; line-height: 1;
background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-variant-numeric: tabular-nums;
letter-spacing: -1px;
}
/* ===================================================================
STAT STRIP + TIER CARDS (the row of B/S/G/P/D/M/GM counts on ranks)
=================================================================== */
.cw-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 18px;
}
.cw-stat {
background: var(--cw-bg-2);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
padding: 14px 16px;
text-decoration: none !important;
color: inherit;
display: block;
transition: border-color 0.15s, transform 0.08s;
}
a.cw-stat:hover { border-color: var(--cw-border-2); transform: translateY(-1px); }
.cw-stat-label {
color: var(--cw-fg-dim);
font-size: 11px; font-weight: 700;
letter-spacing: 1.2px; text-transform: uppercase;
}
.cw-stat-value {
font-size: 22px; font-weight: 800; margin-top: 4px;
font-variant-numeric: tabular-nums;
}
/* Tier breakdown variant (used on /cw/ranks.php) */
.cw-stats-tiers { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.cw-stat-tier {
--cwp-c: var(--cw-accent);
--cwp-glow: rgba(79,143,255,0.35);
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
position: relative;
overflow: hidden;
}
.cw-stat-tier::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--cwp-c);
box-shadow: 0 0 12px var(--cwp-glow);
}
.cw-stat-tier:hover { border-color: var(--cwp-c); transform: translateY(-1px); }
.cw-stat-tier.active { border-color: var(--cwp-c); background: linear-gradient(135deg, color-mix(in srgb, var(--cwp-c) 10%, var(--cw-bg-2)), var(--cw-bg-2)); }
.cw-stat-tier-chip {
width: 34px; height: 28px;
border-radius: 6px;
background:
linear-gradient(180deg, rgba(255,255,255,0.25), transparent 60%),
linear-gradient(135deg, color-mix(in srgb, var(--cwp-c) 70%, #fff), var(--cwp-c) 60%, color-mix(in srgb, var(--cwp-c) 50%, #000));
border: 1px solid rgba(255,255,255,0.25);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 900; font-size: 12px;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
box-shadow: 0 2px 8px var(--cwp-glow), inset 0 1px 0 rgba(255,255,255,0.45);
flex-shrink: 0;
}
.cw-stat-tier-body { min-width: 0; }
.cw-stat-tier-body .cw-stat-label { color: var(--cwp-c); }
.cw-stat-tier-body .cw-stat-value { font-size: 18px; }
/* ===================================================================
TABLES
=================================================================== */
.cw-table-wrap { overflow-x: auto; }
.cw-table { width: 100%; border-collapse: collapse; }
.cw-table thead th {
text-align: left;
padding: 11px 13px;
background: var(--cw-bg-3);
color: var(--cw-fg-2);
font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: 1.4px;
border-bottom: 1px solid var(--cw-border);
white-space: nowrap;
}
.cw-table tbody td {
padding: 10px 13px;
border-bottom: 1px solid var(--cw-border);
vertical-align: middle;
}
.cw-table tbody tr:hover { background: rgba(79,143,255,0.04); }
.cw-table tbody tr:last-child td { border-bottom: none; }
.cw-pos { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--cw-fg-2); width: 56px; }
.cw-pos.gold { color: #fbbf24; text-shadow: 0 0 12px rgba(251,191,36,0.45); }
.cw-pos.silver { color: #c0c5d0; text-shadow: 0 0 12px rgba(192,197,208,0.30); }
.cw-pos.bronze { color: #d97755; text-shadow: 0 0 12px rgba(217,119,85,0.30); }
.cw-name { font-weight: 600; }
.cw-flag { width: 18px; height: 12px; vertical-align: middle; margin-right: 6px; border-radius: 2px; }
/* ===================================================================
SLOTS / TEAMS (lobby + match views)
=================================================================== */
.cw-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cw-team {
background: var(--cw-bg-2);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
padding: 14px;
}
.cw-team.t { border-top: 3px solid var(--cw-t); }
.cw-team.ct { border-top: 3px solid var(--cw-ct); }
.cw-team h3 {
font-size: 11px; font-weight: 800;
text-transform: uppercase; letter-spacing: 1.4px;
color: var(--cw-fg-2); margin: 0 0 10px;
display: flex; justify-content: space-between; align-items: center;
}
.cw-team.t h3 strong { color: var(--cw-t); }
.cw-team.ct h3 strong { color: var(--cw-ct); }
.cw-slot {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px;
background: var(--cw-bg-3);
border-radius: var(--cw-radius-sm);
margin-bottom: 6px;
border: 1px solid transparent;
transition: border-color 0.12s;
}
.cw-slot:hover { border-color: var(--cw-border-2); }
.cw-slot.empty { opacity: 0.4; font-style: italic; }
.cw-slot-name { flex: 1; font-weight: 600; font-size: 13px; }
.cw-slot-mmr { color: var(--cw-fg-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.cw-cap {
font-size: 10px; padding: 2px 6px; border-radius: 4px;
background: rgba(168,85,247,0.18); color: #c084fc;
font-weight: 800; letter-spacing: 1px;
}
/* ===================================================================
MATCH ROW (matches / live lists)
=================================================================== */
.cw-match-row {
display: grid;
grid-template-columns: 90px 1fr auto 110px;
gap: 12px; align-items: center;
padding: 12px 14px;
background: var(--cw-bg-2);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
margin-bottom: 8px;
color: inherit;
text-decoration: none !important;
transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.cw-match-row:hover {
background: var(--cw-bg-3);
border-color: var(--cw-border-2);
transform: translateY(-1px);
}
.cw-match-score {
font-size: 19px; font-weight: 900; text-align: center;
font-variant-numeric: tabular-nums;
letter-spacing: -0.5px;
}
.cw-match-score .t { color: var(--cw-t); }
.cw-match-score .ct { color: var(--cw-ct); }
.cw-match-score .sep { color: var(--cw-fg-dim); margin: 0 4px; font-weight: 500; }
/* ===================================================================
FILTERS / FORMS / BADGES
=================================================================== */
.cw-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.cw-filter input, .cw-filter select {
background: var(--cw-bg-2);
border: 1px solid var(--cw-border);
color: var(--cw-fg);
border-radius: var(--cw-radius-sm);
padding: 9px 12px;
font: inherit;
transition: border-color 0.12s, box-shadow 0.12s;
}
.cw-filter input { flex: 1; min-width: 200px; }
.cw-filter input:focus, .cw-filter select:focus {
outline: none;
border-color: var(--cw-accent);
box-shadow: 0 0 0 3px rgba(79,143,255,0.20);
}
.cw-badge {
display: inline-block; padding: 3px 9px; font-size: 11px; font-weight: 600;
border-radius: 999px;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
color: var(--cw-fg-2);
white-space: nowrap;
}
.cw-badge.good { background: rgba(52,211,153,0.10); color: var(--cw-good); border-color: rgba(52,211,153,0.35); }
.cw-badge.bad { background: rgba(248,113,113,0.10); color: var(--cw-bad); border-color: rgba(248,113,113,0.35); }
.cw-badge.warn { background: rgba(251,191,36,0.10); color: var(--cw-warn); border-color: rgba(251,191,36,0.35); }
/* ===================================================================
FLASH MESSAGES
=================================================================== */
.cw-flash {
padding: 12px 16px;
border-radius: var(--cw-radius);
margin-bottom: 16px; font-weight: 600;
border: 1px solid var(--cw-border);
display: flex; align-items: center; gap: 10px;
}
.cw-flash::before { content: ''; width: 4px; align-self: stretch; border-radius: 999px; }
.cw-flash.success { background: rgba(52,211,153,0.08); color: var(--cw-good); border-color: rgba(52,211,153,0.35); }
.cw-flash.success::before { background: var(--cw-good); }
.cw-flash.error { background: rgba(248,113,113,0.08); color: var(--cw-bad); border-color: rgba(248,113,113,0.35); }
.cw-flash.error::before { background: var(--cw-bad); }
.cw-flash.info { background: rgba(79,143,255,0.08); color: var(--cw-accent); border-color: rgba(79,143,255,0.35); }
.cw-flash.info::before { background: var(--cw-accent); }
.cw-flash.warning { background: rgba(251,191,36,0.08); color: var(--cw-warn); border-color: rgba(251,191,36,0.35); }
.cw-flash.warning::before { background: var(--cw-warn); }
/* Pagination */
.cw-pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
/* ===================================================================
SUBNAV -- still used by /cw/stats.php for its category tabs;
the global sidebar replaces what page.php used to render.
=================================================================== */
.cw-subnav {
display: flex; gap: 4px; flex-wrap: wrap;
background: var(--cw-bg-2);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
padding: 4px;
}
.cw-subnav a {
padding: 8px 14px; border-radius: var(--cw-radius-sm);
font-weight: 600; font-size: 13px; color: var(--cw-fg-2);
text-decoration: none !important;
transition: background 0.12s, color 0.12s;
}
.cw-subnav a:hover { background: var(--cw-bg-3); color: var(--cw-fg); }
.cw-subnav a.active {
background: linear-gradient(135deg, var(--cw-accent), #3a72d8);
color: #fff;
box-shadow: 0 3px 12px rgba(79,143,255,0.30);
}
/* ===================================================================
BREAKPOINTS
=================================================================== */
@media (max-width: 720px) {
.cw-slots { grid-template-columns: 1fr; }
.cw-hero { grid-template-columns: 1fr; text-align: center; padding: 22px; }
.cw-hero-rating { margin: 0 auto; }
.cw-match-row { grid-template-columns: 80px 1fr; gap: 8px; }
.cw-match-row > div:nth-child(3),
.cw-match-row > div:nth-child(4) { grid-column: 1 / -1; text-align: left; }
.cw-prem-mmr-label { display: none; }
.cw-big-mmr { font-size: 34px; }
.cw-page-title { font-size: 16px; }
.cw-top-actions .cw-btn { padding: 5px 10px; }
}
/* ===================================================================
PHASE 2 -- Profile glow-up styles
Avatars, trust dot, MMR graph, map mastery, country strip, compare.
=================================================================== */
/* Avatars */
.cw-avatar {
display: inline-block;
vertical-align: middle;
border-radius: 50%;
object-fit: cover;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
flex-shrink: 0;
}
.cw-avatar-small { width: 22px; height: 22px; margin-right: 6px; }
.cw-avatar-medium { width: 32px; height: 32px; margin-right: 8px; }
.cw-avatar-large { width: 56px; height: 56px; }
.cw-avatar-hero {
width: 88px; height: 88px;
border-width: 2px;
border-color: var(--cw-accent);
box-shadow:
0 0 0 3px rgba(79,143,255,0.20),
0 8px 24px rgba(79,143,255,0.30);
}
/* Hero block: avatar + text side-by-side */
.cw-hero-id { display: flex; align-items: center; gap: 20px; }
.cw-hero-id-text { min-width: 0; flex: 1; }
.cw-hero-id-text h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
.cw-hero-id { flex-direction: column; text-align: center; }
}
/* Name + avatar cell in tables (used in ranks.php, lobby.php, match.php) */
.cw-name-cell {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cw-name-cell .cw-avatar { margin-right: 0; }
.cw-name-cell > div { /* steamId subline in ranks.php */
flex-basis: 100%;
}
/* Trust dot next to the rank chip */
.cw-trust-dot {
display: inline-block;
width: 9px; height: 9px;
border-radius: 50%;
vertical-align: middle;
margin: 0 0 0 4px;
cursor: help;
flex-shrink: 0;
}
/* MMR graph */
.cw-mmr-graph {
width: 100%;
height: auto;
display: block;
max-height: 220px;
}
.cw-mmr-graph-empty {
text-align: center;
color: var(--cw-fg-dim);
padding: 50px 20px;
font-style: italic;
}
/* Map mastery */
.cw-map-mastery td:first-child {
font-weight: 700; color: var(--cw-fg);
}
.cw-map-mastery td { font-variant-numeric: tabular-nums; }
.cw-map-mastery .cw-badge {
font-variant-numeric: tabular-nums;
padding: 3px 10px;
}
/* Country strip (top of /cw/ranks.php) */
.cw-country-strip {
display: flex; gap: 4px; flex-wrap: wrap;
margin-bottom: 14px;
padding: 5px;
background: var(--cw-bg-2);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
}
.cw-country-strip a {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
border-radius: var(--cw-radius-sm);
font-size: 12px; font-weight: 700;
color: var(--cw-fg-2);
text-decoration: none !important;
transition: background 0.12s, color 0.12s;
letter-spacing: 0.3px;
}
.cw-country-strip a:hover {
background: var(--cw-bg-3); color: var(--cw-fg);
}
.cw-country-strip a.active {
background: linear-gradient(135deg, var(--cw-accent), #3a72d8);
color: white;
box-shadow: 0 4px 12px rgba(79,143,255,0.30);
}
.cw-country-strip a img {
width: 20px; height: 14px;
border-radius: 2px;
vertical-align: middle;
}
.cw-country-strip a small {
color: var(--cw-fg-dim);
font-size: 10px;
font-weight: 600;
margin-left: 2px;
}
.cw-country-strip a.active small { color: rgba(255,255,255,0.75); }
.cw-country-globe { font-size: 14px; line-height: 1; }
/* ===================================================================
COMPARE PAGE
=================================================================== */
.cw-compare {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;
align-items: center;
padding: 28px;
background:
radial-gradient(500px 200px at 0 100%, rgba(79,143,255,0.18), transparent 60%),
radial-gradient(500px 200px at 100% 100%, rgba(168,85,247,0.18), transparent 60%),
linear-gradient(135deg, var(--cw-bg-2), var(--cw-bg));
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-lg);
margin-bottom: 18px;
text-align: center;
overflow: hidden;
}
.cw-compare-side {
display: flex; flex-direction: column;
align-items: center; gap: 12px;
padding: 12px;
border-radius: var(--cw-radius);
text-decoration: none !important;
color: var(--cw-fg);
transition: background 0.12s, transform 0.08s;
}
.cw-compare-side:hover {
background: rgba(255,255,255,0.02);
transform: translateY(-2px);
}
.cw-compare-side h2 {
margin: 0; font-size: 18px; font-weight: 800;
display: flex; align-items: center; gap: 8px;
}
.cw-compare-mid {
display: flex; flex-direction: column; align-items: center; gap: 8px;
min-width: 180px;
}
.cw-compare-vs {
font-size: 26px; font-weight: 900;
color: var(--cw-fg-dim);
letter-spacing: 4px;
}
.cw-h2h {
font-size: 32px; font-weight: 900;
background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: flex; align-items: baseline; gap: 6px;
}
.cw-h2h span {
font-size: 18px;
color: var(--cw-fg-dim);
-webkit-text-fill-color: var(--cw-fg-dim);
}
.cw-h2h small {
font-size: 11px;
color: var(--cw-fg-dim);
-webkit-text-fill-color: var(--cw-fg-dim);
margin-left: 4px;
}
.cw-h2h-label {
font-size: 10px; font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--cw-fg-dim);
}
.cw-h2h-empty {
font-size: 12px;
font-style: italic;
color: var(--cw-fg-dim);
}
.cw-h2h-together {
font-size: 12px;
color: var(--cw-fg-2);
padding: 4px 10px;
background: var(--cw-bg-3);
border-radius: 999px;
margin-top: 4px;
}
.cw-compare-table td {
text-align: center;
padding: 12px 10px;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.cw-compare-table .cw-cmp-label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
color: var(--cw-fg-dim);
letter-spacing: 1.4px;
width: 30%;
background: var(--cw-bg-3);
}
.cw-compare-table .cw-cmp-win {
color: var(--cw-good);
font-weight: 900;
background: rgba(52,211,153,0.06);
}
.cw-compare-graphs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 900px) {
.cw-compare { grid-template-columns: 1fr; }
.cw-compare-vs { font-size: 16px; letter-spacing: 2px; }
.cw-compare-graphs { grid-template-columns: 1fr; }
}
/* ===================================================================
PHASE 3 -- Match storytelling
Round-by-round timeline, kudos voting + tallies.
=================================================================== */
/* Round strip (30 round-cells across) */
.cw-round-strip {
display: flex; flex-wrap: wrap; gap: 4px;
padding: 6px 0 12px;
}
.cw-round {
position: relative;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
width: 30px; height: 38px;
border-radius: 5px;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
cursor: help;
transition: transform 0.10s, box-shadow 0.15s;
}
.cw-round:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.45); z-index: 1; }
.cw-round-t {
background: linear-gradient(180deg, rgba(249,115,22,0.28), rgba(249,115,22,0.10));
border-color: rgba(249,115,22,0.55);
}
.cw-round-ct {
background: linear-gradient(180deg, rgba(79,143,255,0.28), rgba(79,143,255,0.10));
border-color: rgba(79,143,255,0.55);
}
.cw-round-draw {
background: linear-gradient(180deg, rgba(251,191,36,0.20), rgba(251,191,36,0.08));
border-color: rgba(251,191,36,0.45);
}
.cw-round-num {
font-size: 9px; font-weight: 800;
letter-spacing: 0.2px;
color: var(--cw-fg-2);
margin-top: 2px;
}
.cw-round-ico {
font-size: 14px;
line-height: 1;
margin-top: 2px;
}
.cw-round-t .cw-round-num { color: #fb923c; }
.cw-round-ct .cw-round-num { color: #93bcff; }
.cw-round-strip-summary {
display: flex; gap: 16px; flex-wrap: wrap;
font-size: 12px; font-weight: 700;
color: var(--cw-fg-2);
letter-spacing: 0.5px;
}
.cw-round-strip-summary .t { color: var(--cw-t); }
.cw-round-strip-summary .ct { color: var(--cw-ct); }
.cw-round-strip-summary strong {
font-size: 16px;
margin-right: 4px;
font-variant-numeric: tabular-nums;
}
.cw-round-strip-empty {
text-align: center;
color: var(--cw-fg-dim);
font-style: italic;
padding: 24px 20px;
background: var(--cw-bg-3);
border-radius: var(--cw-radius-sm);
}
/* Kudos chips (inline next to a player name) */
.cw-kudo {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px;
font-size: 11px; font-weight: 800;
border-radius: 999px;
margin-left: 4px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.2px;
cursor: help;
}
.cw-kudo-mvp { background: rgba(251,191,36,0.16); color: #fbbf24; border: 1px solid rgba(251,191,36,0.40); }
.cw-kudo-clutch { background: rgba(168,85,247,0.16); color: #c084fc; border: 1px solid rgba(168,85,247,0.40); }
.cw-kudo-supporter { background: rgba(52,211,153,0.16); color: #34d399; border: 1px solid rgba(52,211,153,0.40); }
.cw-kudo-toxic { background: rgba(248,113,113,0.16); color: #f87171; border: 1px solid rgba(248,113,113,0.40); }
/* Kudos voting form */
.cw-kudos-vote {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
max-width: 480px;
}
.cw-kudos-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 10px;
align-items: center;
}
.cw-kudos-label {
font-size: 12px; font-weight: 800;
color: var(--cw-fg);
display: flex; align-items: center; gap: 8px;
}
.cw-kudos-glyph { font-size: 16px; line-height: 1; }
.cw-kudos-select {
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
color: var(--cw-fg);
border-radius: var(--cw-radius-sm);
padding: 8px 12px;
font: inherit;
}
.cw-kudos-select:focus { outline: none; border-color: var(--cw-accent); }
/* Kudos tally tiles (shown both per-match and per-profile) */
.cw-kudos-totals {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
}
.cw-kudos-tile {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
}
.cw-kudos-tile-name {
flex: 1; min-width: 0;
font-weight: 700; font-size: 13px;
color: var(--cw-fg);
text-decoration: none !important;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cw-kudos-tile-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cw-kudos-tile.big {
padding: 16px 20px;
flex-wrap: wrap;
justify-content: center;
}
.cw-kudos-tile.big .cw-kudos-tile-chips { font-size: 14px; }
.cw-kudos-tile.big .cw-kudo {
padding: 6px 14px; font-size: 14px;
}
.cw-kudos-tile-total {
font-size: 12px; color: var(--cw-fg-dim);
font-weight: 600;
flex-basis: 100%;
text-align: center;
}
.cw-kudos-tile-total strong { color: var(--cw-fg); font-size: 16px; }
/* ===================================================================
PHASE 4 -- Anti-smurf / flag review
=================================================================== */
/* Shield icon for the Flag review sidebar entry */
.cw-ico-shield {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Sidebar count pill (Flag review badge) */
.cw-side-pill {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 6px;
margin-left: auto;
font-size: 10px; font-weight: 900;
background: linear-gradient(135deg, var(--cw-bad), #d04646);
color: #fff;
border-radius: 999px;
box-shadow: 0 0 8px rgba(248,113,113,0.55);
letter-spacing: 0.3px;
}
/* Flag banner on profile.php (admins only) */
.cw-flag-banner {
background: linear-gradient(135deg, rgba(248,113,113,0.10), rgba(248,113,113,0.02));
border: 1px solid rgba(248,113,113,0.45);
border-radius: var(--cw-radius);
padding: 14px 18px;
margin-bottom: 18px;
}
.cw-flag-banner-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
color: var(--cw-bad);
font-size: 13px; letter-spacing: 0.5px;
}
.cw-flag-banner-list {
display: flex; flex-direction: column; gap: 6px;
font-size: 12px;
}
.cw-flag-banner-row {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
padding: 6px 10px;
background: rgba(0,0,0,0.30);
border-radius: var(--cw-radius-sm);
}
.cw-flag-banner-row code {
font-size: 11px;
padding: 2px 6px;
background: var(--cw-bg-3);
border-radius: 4px;
}
.cw-flag-banner-details {
flex: 1; min-width: 200px;
color: var(--cw-fg-2);
}
.cw-flag-banner-row small {
color: var(--cw-fg-dim);
font-size: 11px;
}
/* Admin flag-review table */
.cw-flag-details {
font-size: 12px;
color: var(--cw-fg-2);
max-width: 360px;
word-break: break-word;
}
.cw-flag-actions {
display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.cw-flag-sev-select {
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
color: var(--cw-fg);
border-radius: var(--cw-radius-sm);
padding: 4px 8px;
font: inherit; font-size: 12px;
}
.cw-row-resolved { opacity: 0.55; }
/* Manual-flag form */
.cw-manual-flag {
display: grid;
grid-template-columns: 140px 160px 1fr auto;
gap: 10px;
align-items: end;
}
.cw-manual-flag label {
display: flex; flex-direction: column; gap: 4px;
}
.cw-manual-flag label span {
font-size: 11px; font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--cw-fg-dim);
}
.cw-manual-flag input,
.cw-manual-flag select {
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
color: var(--cw-fg);
border-radius: var(--cw-radius-sm);
padding: 8px 12px;
font: inherit;
}
.cw-manual-flag-reason { grid-column: span 1; }
@media (max-width: 800px) {
.cw-manual-flag { grid-template-columns: 1fr; }
.cw-manual-flag-reason { grid-column: span 1; }
}
/* ===================================================================
PHASE 5 -- Clans + Achievements
=================================================================== */
/* Banner icon for the Clans sidebar entry */
.cw-ico-banner {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Clan tag chip -- inline before player names */
.cw-clan-tag {
--cw-clan-c: #4f8fff;
display: inline-block;
padding: 1px 7px;
margin-right: 4px;
font-weight: 900;
font-size: 11px;
letter-spacing: 0.6px;
border-radius: 4px;
text-decoration: none !important;
color: #fff !important;
background: linear-gradient(135deg,
color-mix(in srgb, var(--cw-clan-c) 85%, #fff),
var(--cw-clan-c) 55%,
color-mix(in srgb, var(--cw-clan-c) 60%, #000));
border: 1px solid rgba(255,255,255,0.20);
text-shadow: 0 1px 1px rgba(0,0,0,0.55);
box-shadow: 0 1px 4px color-mix(in srgb, var(--cw-clan-c) 45%, transparent),
inset 0 1px 0 rgba(255,255,255,0.30);
vertical-align: middle;
transition: transform 0.10s, filter 0.10s;
}
.cw-clan-tag:hover { transform: translateY(-1px); filter: brightness(1.10); text-decoration: none !important; }
.cw-clan-tag.big {
font-size: 16px;
padding: 4px 12px;
margin-right: 8px;
letter-spacing: 1px;
box-shadow: 0 4px 14px color-mix(in srgb, var(--cw-clan-c) 50%, transparent),
inset 0 1px 0 rgba(255,255,255,0.35);
}
/* Clans hero (banner colour bleeds through) */
.cw-clan-hero h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Clan invite list */
.cw-invite-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
margin-bottom: 8px;
}
.cw-invite-actions { display: flex; gap: 6px; }
@media (max-width: 720px) {
.cw-invite-row { grid-template-columns: 1fr; }
.cw-invite-actions { justify-content: flex-end; }
}
/* Create-clan form */
.cw-clan-form {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 12px;
align-items: end;
}
.cw-clan-form-desc { grid-column: 1 / -1; }
.cw-clan-form label { display: flex; flex-direction: column; gap: 4px; }
.cw-clan-form label > span {
font-size: 11px; font-weight: 800;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--cw-fg-dim);
}
.cw-clan-form input[type="text"] {
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
color: var(--cw-fg);
border-radius: var(--cw-radius-sm);
padding: 9px 12px;
font: inherit;
}
.cw-clan-form input[type="color"] {
height: 38px; width: 60px;
padding: 2px;
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
background: var(--cw-bg-3);
cursor: pointer;
}
@media (max-width: 720px) {
.cw-clan-form { grid-template-columns: 1fr; }
}
/* Achievements grid */
.cw-ach-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.cw-ach {
--cw-ach-c: #9aa3b8;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 6px;
padding: 14px 10px;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
cursor: help;
text-align: center;
position: relative;
transition: transform 0.10s, border-color 0.12s, box-shadow 0.12s;
}
.cw-ach:hover { transform: translateY(-2px); }
.cw-ach-icon {
font-size: 32px;
line-height: 1;
filter: grayscale(1) brightness(0.5);
transition: filter 0.15s;
}
.cw-ach-name {
font-size: 11px; font-weight: 700;
color: var(--cw-fg-2);
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.cw-ach.unlocked {
background: linear-gradient(180deg,
color-mix(in srgb, var(--cw-ach-c) 15%, var(--cw-bg-2)),
var(--cw-bg-2));
border-color: var(--cw-ach-c);
box-shadow: 0 4px 16px color-mix(in srgb, var(--cw-ach-c) 30%, transparent);
}
.cw-ach.unlocked .cw-ach-icon { filter: none; }
.cw-ach.unlocked .cw-ach-name { color: var(--cw-fg); }
.cw-ach.unlocked::after {
content: '';
position: absolute;
top: 6px; right: 6px;
width: 6px; height: 6px;
border-radius: 999px;
background: var(--cw-ach-c);
box-shadow: 0 0 8px var(--cw-ach-c);
}
.cw-ach.locked { opacity: 0.55; }
/* ===================================================================
PHASE 6 -- Hall of Fame, League, cup theming
=================================================================== */
/* New nav icons */
.cw-ico-medal {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.cw-ico-star {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Hall of Fame */
.cw-hof-hero {
position: relative;
padding: 60px 30px;
margin-bottom: 22px;
text-align: center;
border-radius: var(--cw-radius-lg);
border: 1px solid var(--cw-border);
overflow: hidden;
background: linear-gradient(135deg, #1a1024, #100a1a);
}
.cw-hof-hero-bg {
position: absolute; inset: 0;
background:
radial-gradient(800px 300px at 20% 0, rgba(251,191,36,0.30), transparent 60%),
radial-gradient(700px 300px at 80% 100%, rgba(168,85,247,0.25), transparent 60%),
radial-gradient(500px 200px at 50% 50%, rgba(79,143,255,0.15), transparent 60%);
pointer-events: none;
}
.cw-hof-hero-inner { position: relative; }
.cw-hof-crown {
font-size: 80px;
line-height: 1;
margin-bottom: 12px;
filter: drop-shadow(0 8px 24px rgba(251,191,36,0.45));
}
.cw-hof-hero h1 {
margin: 0 0 12px;
font-size: 40px; font-weight: 900;
letter-spacing: -0.5px;
background: linear-gradient(135deg, #fbbf24, #fde047, #fbbf24);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 30px rgba(251,191,36,0.30);
}
.cw-hof-hero p {
max-width: 60ch; margin: 0 auto;
color: var(--cw-fg-2);
}
.cw-hof-cups {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.cw-hof-cup {
--cw-cup-c: #a855f7;
position: relative;
display: flex; align-items: center; gap: 14px;
padding: 16px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--cw-cup-c) 12%, var(--cw-bg-2)),
var(--cw-bg-2));
border: 1px solid color-mix(in srgb, var(--cw-cup-c) 35%, var(--cw-border));
border-radius: var(--cw-radius);
text-decoration: none !important;
color: var(--cw-fg);
overflow: hidden;
transition: transform 0.10s, box-shadow 0.15s;
}
.cw-hof-cup:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px color-mix(in srgb, var(--cw-cup-c) 30%, transparent);
}
.cw-hof-cup-glow {
position: absolute; top: -40px; right: -40px;
width: 120px; height: 120px;
background: radial-gradient(circle, color-mix(in srgb, var(--cw-cup-c) 60%, transparent), transparent 70%);
pointer-events: none;
}
.cw-hof-cup-trophy {
font-size: 40px; line-height: 1;
filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--cw-cup-c) 60%, transparent));
}
.cw-hof-cup-meta { flex: 1; min-width: 0; }
.cw-hof-cup-name { font-weight: 800; font-size: 15px; }
.cw-hof-cup-tag {
font-size: 12px;
color: var(--cw-fg-2);
font-style: italic;
margin-top: 2px;
}
.cw-hof-cup-team {
margin-top: 6px;
font-size: 13px;
}
.cw-hof-cup-when {
margin-top: 4px;
font-size: 11px;
color: var(--cw-fg-dim);
letter-spacing: 0.3px;
}
.cw-hof-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 900px) { .cw-hof-split { grid-template-columns: 1fr; } }
.cw-hof-records {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.cw-hof-record {
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
padding: 16px;
text-align: center;
transition: border-color 0.15s, transform 0.10s;
}
.cw-hof-record:hover {
border-color: var(--cw-accent);
transform: translateY(-2px);
}
.cw-hof-record-icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.cw-hof-record-label {
font-size: 10px; font-weight: 800;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--cw-fg-dim);
}
.cw-hof-record-value {
font-size: 28px; font-weight: 900;
font-variant-numeric: tabular-nums;
margin: 4px 0;
background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.cw-hof-record-name {
display: block;
font-size: 12px; font-weight: 700;
color: var(--cw-fg);
text-decoration: none !important;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* League */
.cw-league-hero { background:
radial-gradient(500px 200px at 0 100%, rgba(168,85,247,0.20), transparent 60%),
radial-gradient(500px 200px at 100% 0, rgba(79,143,255,0.18), transparent 60%),
linear-gradient(135deg, var(--cw-bg-2), var(--cw-bg));
}
.cw-division .cw-card-h { background: linear-gradient(180deg, color-mix(in srgb, var(--cw-clan-c, var(--cw-accent)) 8%, transparent), transparent 90%); }
.cw-division .cw-card-h h2 {
font-size: 14px; text-transform: none; letter-spacing: 0;
color: var(--cw-fg);
display: flex; align-items: center; gap: 10px;
}
.cw-past-seasons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.cw-past-season {
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
padding: 10px 14px;
}
.cw-past-season strong { display: block; }
.cw-past-season small {
display: block;
color: var(--cw-fg-dim);
font-size: 11px;
margin-top: 4px;
}
/* Themed cup heroes */
.cw-cup-hero {
--cw-cup-c: #a855f7;
background:
radial-gradient(500px 200px at 0 0, color-mix(in srgb, var(--cw-cup-c) 25%, transparent), transparent 60%),
radial-gradient(600px 250px at 100% 100%, color-mix(in srgb, var(--cw-cup-c) 18%, transparent), transparent 60%),
linear-gradient(135deg, var(--cw-bg-2), var(--cw-bg));
}
.cw-cup-hero h1 {
background: linear-gradient(135deg,
color-mix(in srgb, var(--cw-cup-c) 80%, #fff),
var(--cw-cup-c));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.cw-cup-tagline {
font-size: 14px; font-style: italic;
color: var(--cw-fg-2);
margin: 4px 0 12px;
}
/* Theme presets just override --cw-cup-c with a palette. */
.cw-cup-theme-halloween { --cw-cup-c: #f97316; }
.cw-cup-theme-winter { --cw-cup-c: #38bdf8; }
.cw-cup-theme-summer { --cw-cup-c: #fbbf24; }
.cw-cup-theme-neon { --cw-cup-c: #ec4899; }
/* Cup creation form */
.cw-cup-create {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.cw-cup-create label { display: flex; flex-direction: column; gap: 4px; }
.cw-cup-create label > span {
font-size: 11px; font-weight: 800;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--cw-fg-dim);
}
.cw-cup-create input[type=text],
.cw-cup-create input[type=number],
.cw-cup-create select {
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
color: var(--cw-fg);
border-radius: var(--cw-radius-sm);
padding: 9px 12px; font: inherit;
}
.cw-cup-create input[type=color] {
height: 40px;
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
background: var(--cw-bg-3);
cursor: pointer;
}
.cw-cup-create-submit { grid-column: 1 / -1; text-align: right; }
@media (max-width: 720px) {
.cw-cup-create { grid-template-columns: 1fr; }
}
/* ===================================================================
PHASE 7 -- Twitch live indicator + bind page
=================================================================== */
/* Inline 🔴 LIVE pip rendered by CWTwitch::liveBadge() */
.cw-twitch-live {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px;
margin-left: 6px;
font-size: 11px; font-weight: 900;
letter-spacing: 0.6px;
text-transform: lowercase;
border-radius: 999px;
background: linear-gradient(135deg, #9146ff, #6d28d9);
color: #fff !important;
text-decoration: none !important;
vertical-align: middle;
box-shadow: 0 2px 10px rgba(145,70,255,0.45),
inset 0 1px 0 rgba(255,255,255,0.30);
transition: transform 0.10s, box-shadow 0.15s;
}
.cw-twitch-live:hover {
transform: translateY(-1px);
text-decoration: none !important;
box-shadow: 0 5px 16px rgba(145,70,255,0.55),
inset 0 1px 0 rgba(255,255,255,0.40);
}
.cw-twitch-dot {
width: 7px; height: 7px;
border-radius: 999px;
background: #f87171;
box-shadow: 0 0 8px #f87171;
animation: cw-twitch-blink 1.4s infinite;
flex-shrink: 0;
}
@keyframes cw-twitch-blink {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45;transform: scale(0.65); }
}
/* Bind page (twitch_link.php) */
.cw-twitch-form {
display: flex; flex-direction: column;
gap: 12px;
max-width: 480px;
}
.cw-twitch-form label {
display: flex; flex-direction: column; gap: 6px;
}
.cw-twitch-form label > span {
font-size: 11px; font-weight: 800;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--cw-fg-dim);
}
.cw-twitch-input {
display: flex; align-items: stretch;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s;
}
.cw-twitch-input:focus-within {
border-color: #9146ff;
box-shadow: 0 0 0 3px rgba(145,70,255,0.25);
}
.cw-twitch-prefix {
padding: 9px 12px;
background: rgba(145,70,255,0.15);
color: #c4a4ff;
font-weight: 700;
border-right: 1px solid var(--cw-border);
user-select: all;
}
.cw-twitch-input input {
flex: 1;
background: transparent;
border: 0;
color: var(--cw-fg);
padding: 9px 12px;
font: inherit;
outline: none;
}
.cw-twitch-actions { display: flex; gap: 8px; }
.cw-twitch-status {
margin-top: 16px;
padding: 12px 14px;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
display: flex; align-items: center; gap: 10px;
font-size: 13px;
}
.cw-twitch-status a {
color: #c4a4ff;
font-weight: 700;
}
/* ===================================================================
PHASE 8 -- light theme + theme toggle + map preferences + PWA touch
=================================================================== */
/* Sun / moon icons for the topbar toggle */
.cw-ico-moon {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.cw-ico-sun {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.cw-theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
border-radius: var(--cw-radius-sm);
border: 1px solid var(--cw-border);
background: var(--cw-bg-2);
color: var(--cw-fg-2);
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cw-theme-toggle:hover {
background: var(--cw-bg-3);
color: var(--cw-fg);
border-color: var(--cw-border-2);
}
.cw-theme-toggle .cw-ico { width: 16px; height: 16px; }
.cw-theme-toggle .cw-ico-sun { display: none; }
body[data-theme="light"] .cw-theme-toggle .cw-ico-moon { display: none; }
body[data-theme="light"] .cw-theme-toggle .cw-ico-sun { display: inline-block; }
/* ===== Light theme variable overrides =====
The whole stylesheet drives off CSS custom properties, so flipping
the palette here cascades through every component. */
body[data-theme="light"] {
--cw-bg: #f5f6fa;
--cw-bg-2: #ffffff;
--cw-bg-3: #f0f1f7;
--cw-bg-4: #e6e7ee;
--cw-bg-5: #dcdde6;
--cw-border: #d3d6de;
--cw-border-2: #b8bdc8;
--cw-fg: #11151f;
--cw-fg-2: #4a5468;
--cw-fg-dim: #8089a0;
}
body[data-theme="light"] {
/* Slightly different glow tints for a daylight feel. */
background-image:
radial-gradient(900px 600px at -200px -200px, rgba(79,143,255,0.10), transparent 60%),
radial-gradient(800px 500px at 110% -100px, rgba(168,85,247,0.08), transparent 60%);
}
/* Sidebar + topbar gradients need their own overrides (the originals
are hardcoded gradients, not variable-driven). */
body[data-theme="light"] .cw-side {
background: linear-gradient(180deg, #ffffff, #f5f6fa 80%);
border-right-color: var(--cw-border);
box-shadow: 1px 0 0 rgba(0,0,0,0.04);
}
body[data-theme="light"] .cw-topbar {
background: rgba(255,255,255,0.82);
border-bottom-color: var(--cw-border);
}
/* The hero radial gradients reuse blue/purple alphas that work in
both themes, but their `linear-gradient(135deg, --cw-bg-2, --cw-bg)`
fallback now resolves to white-on-cream automatically. */
/* Light-mode tweak: progress bar background becomes a bit darker so
it remains visible on white cards. */
body[data-theme="light"] .cw-progress { background: var(--cw-bg-4); }
/* ===== Map preferences (profile.php) -- compact list ===== */
.cw-map-prefs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 6px;
margin-bottom: 12px;
}
.cw-map-pref {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px 5px 10px;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
font-size: 12px;
}
.cw-map-pref-name {
flex: 1; min-width: 0;
font-weight: 700;
font-size: 12px;
color: var(--cw-fg);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: monospace;
letter-spacing: 0.2px;
}
.cw-map-pref-toggles {
display: inline-flex; gap: 2px;
background: var(--cw-bg);
border: 1px solid var(--cw-border);
border-radius: 999px;
padding: 2px;
}
.cw-map-pref-opt {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 22px;
border-radius: 999px;
font-size: 11px; font-weight: 800;
color: var(--cw-fg-dim);
cursor: pointer;
transition: background 0.10s, color 0.10s;
user-select: none;
}
.cw-map-pref-opt input { display: none; }
.cw-map-pref-opt > span { font-size: 13px; line-height: 1; }
.cw-map-pref-opt:hover { background: var(--cw-bg-3); color: var(--cw-fg); }
.cw-map-pref-opt.active.like {
background: rgba(52,211,153,0.25); color: var(--cw-good);
}
.cw-map-pref-opt.active.neutral {
background: var(--cw-bg-4); color: var(--cw-fg);
}
.cw-map-pref-opt.active.avoid {
background: rgba(248,113,113,0.25); color: var(--cw-bad);
}
/* ===================================================================
PHASE A -- HLstatsX <-> CW bridge
=================================================================== */
/* Link icon for the ID-conflicts sidebar entry */
.cw-ico-link {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Steam ID conflicts table */
.cw-dupe {
border-top: 1px solid var(--cw-border);
padding: 14px 18px;
}
.cw-dupe:first-child { border-top: 0; }
.cw-dupe-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-bottom: 10px;
}
.cw-dupe-sid {
font-size: 14px; font-weight: 700;
padding: 4px 10px;
background: var(--cw-bg-3);
border-radius: var(--cw-radius-sm);
border: 1px solid var(--cw-border);
}
.cw-dupe-table tr.cw-dupe-leader {
background: rgba(52,211,153,0.05);
}
.cw-dupe-table tr.cw-dupe-leader td:first-child code {
color: var(--cw-good);
}
/* ===================================================================
PHASE B -- Profile deep-data (insights.php)
=================================================================== */
.cw-insights-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 18px;
}
@media (max-width: 1000px) { .cw-insights-split { grid-template-columns: 1fr; } }
/* ===== Session calendar (GitHub-style) ===== */
.cw-cal-wrap {
display: flex; flex-direction: column; gap: 10px;
overflow-x: auto;
}
.cw-cal {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(7, 12px);
gap: 2px;
width: max-content;
}
.cw-cal-cell {
width: 12px; height: 12px; border-radius: 2px;
background: var(--cw-bg-3);
}
.cw-cal-cell.empty { background: transparent; }
.cw-cal-cell.lvl1 { background: rgba(79,143,255,0.30); }
.cw-cal-cell.lvl2 { background: rgba(79,143,255,0.55); }
.cw-cal-cell.lvl3 { background: rgba(79,143,255,0.80); }
.cw-cal-cell.lvl4 { background: linear-gradient(135deg, #4f8fff, #a855f7); }
.cw-cal-legend {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--cw-fg-dim);
letter-spacing: 0.5px;
}
.cw-cal-legend .cw-cal-cell { width: 11px; height: 11px; }
/* ===== Time of day heatmap ===== */
.cw-tod {
display: grid;
grid-template-columns: repeat(24, 1fr);
gap: 4px;
}
.cw-tod-cell {
--cw-tod-vol: 0;
--cw-tod-h: 200;
position: relative;
height: 56px;
border-radius: 5px;
background: hsla(var(--cw-tod-h), 70%, 55%, calc(0.15 + var(--cw-tod-vol) * 0.65));
border: 1px solid var(--cw-border);
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: 4px;
cursor: help;
transition: transform 0.10s;
}
.cw-tod-cell:hover { transform: translateY(-2px); }
.cw-tod-hour {
font-size: 9px; font-weight: 800;
color: var(--cw-fg);
letter-spacing: 0.4px;
font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
.cw-tod { grid-template-columns: repeat(12, 1fr); }
.cw-tod-cell { height: 42px; }
}
/* ===== Rivalries ===== */
.cw-rivals {
display: flex; flex-direction: column;
border-top: 1px solid var(--cw-border);
}
.cw-rival {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px; align-items: center;
padding: 12px 18px;
border-bottom: 1px solid var(--cw-border);
text-decoration: none !important;
color: var(--cw-fg);
transition: background 0.12s;
}
.cw-rival:hover { background: var(--cw-bg-3); }
.cw-rival:last-child { border-bottom: 0; }
.cw-rival-meta strong { display: block; font-weight: 700; font-size: 14px; }
.cw-rival-meta strong img { vertical-align: middle; margin-right: 4px; }
.cw-rival-score {
display: inline-flex; gap: 4px;
font-family: 'Inter', sans-serif;
font-size: 18px; font-weight: 900;
font-variant-numeric: tabular-nums;
letter-spacing: -0.5px;
margin-top: 2px;
}
.cw-rival-score .me { color: var(--cw-good); }
.cw-rival-score .them { color: var(--cw-bad); }
.cw-rival-score .sep { color: var(--cw-fg-dim); font-weight: 500; }
.cw-rival.losing .me { color: var(--cw-bad); }
.cw-rival.losing .them { color: var(--cw-good); }
.cw-rival-meta-sub {
display: block;
font-size: 11px; color: var(--cw-fg-dim);
letter-spacing: 0.3px;
margin-top: 2px;
}
/* ===== Weapon mastery ===== */
.cw-weapon-name {
background: var(--cw-bg-3);
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
}
.cw-weapon-bar-cell { width: 30%; }
.cw-weapon-bar {
--w: 0%;
height: 8px;
width: 100%;
background: var(--cw-bg-3);
border-radius: 999px;
position: relative;
overflow: hidden;
}
.cw-weapon-bar::after {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: var(--w);
background: linear-gradient(90deg, var(--cw-accent), var(--cw-accent-2));
border-radius: 999px;
}
/* ===== Kill position scatter ===== */
.cw-scatter {
width: 100%; height: auto;
display: block;
border-radius: var(--cw-radius);
background: #0a0c13;
}
.cw-scatter-legend {
margin-top: 10px;
font-size: 12px;
color: var(--cw-fg-2);
}
.cw-scatter-dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 999px;
vertical-align: middle;
margin-right: 4px;
}
.cw-scatter-dot.good { background: var(--cw-good); }
.cw-scatter-dot.bad { background: var(--cw-bad); }
/* ===================================================================
HEATMAP (multi-map overview + per-map single view)
=================================================================== */
.cw-heat-svg {
display: block;
width: 100%; height: auto;
border-radius: 6px;
background: #0a0c13;
}
.cw-heat-full { max-width: 760px; margin: 0 auto; }
.cw-heat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
margin-bottom: 18px;
}
.cw-heat-card {
display: flex; flex-direction: column;
gap: 8px;
padding: 12px;
background: var(--cw-bg-2);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
text-decoration: none !important;
color: var(--cw-fg);
transition: border-color 0.15s, transform 0.10s;
}
.cw-heat-card:hover {
border-color: var(--cw-accent);
transform: translateY(-2px);
}
.cw-heat-card-head {
display: flex; align-items: center; justify-content: space-between;
font-size: 14px;
}
.cw-heat-card-stats {
font-size: 13px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.cw-heat-card-stats .good { color: var(--cw-good); }
.cw-heat-card-stats .bad { color: var(--cw-bad); }
.cw-heat-card-stats .sep { color: var(--cw-fg-dim); margin: 0 4px; font-weight: 500; }
.cw-heat-card-foot {
font-size: 11px;
color: var(--cw-fg-dim);
letter-spacing: 0.3px;
}
/* ===================================================================
PHASE C -- live / realtime
=================================================================== */
/* New sidebar icons */
.cw-ico-antenna {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Server browser grid */
.cw-server-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.cw-server {
display: flex; flex-direction: column;
gap: 8px;
padding: 14px 16px;
background: var(--cw-bg-2);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
text-decoration: none !important;
color: var(--cw-fg);
transition: border-color 0.12s, transform 0.10s, box-shadow 0.15s;
}
.cw-server:hover {
border-color: var(--cw-accent);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.40);
}
.cw-server-active { border-left: 3px solid var(--cw-good); }
.cw-server-idle { opacity: 0.78; }
.cw-server-cw { box-shadow: inset 3px 0 0 var(--cw-accent-2); }
.cw-server-head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.cw-server-head strong {
font-weight: 800; font-size: 14px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 1;
}
.cw-server-stats {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 13px;
}
.cw-server-count strong {
font-size: 22px; font-weight: 900;
color: var(--cw-good);
font-variant-numeric: tabular-nums;
}
.cw-server-count span { color: var(--cw-fg-dim); font-weight: 500; font-size: 13px; }
.cw-server-idle .cw-server-count strong { color: var(--cw-fg-dim); }
.cw-server-map {
color: var(--cw-fg-2);
font-size: 12px;
text-align: right;
font-weight: 600;
}
.cw-server-map small {
display: block;
color: var(--cw-fg-dim);
font-weight: 500;
font-size: 10px;
margin-top: 2px;
}
.cw-server-bar {
height: 4px;
background: var(--cw-bg-3);
border-radius: 999px;
overflow: hidden;
}
.cw-server-bar span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--cw-good), #1fb985);
border-radius: 999px;
transition: width 0.4s ease;
}
.cw-server-addr {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-top: 4px;
font-size: 11px;
color: var(--cw-fg-dim);
}
.cw-server-addr code {
background: var(--cw-bg-3);
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
}
.cw-server-cta {
font-weight: 800;
color: var(--cw-accent);
letter-spacing: 0.4px;
}
/* Friend "online" indicator */
.cw-online {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700;
color: var(--cw-good);
background: rgba(52,211,153,0.10);
border: 1px solid rgba(52,211,153,0.35);
padding: 2px 8px;
border-radius: 999px;
}
.cw-online-dot {
width: 7px; height: 7px;
border-radius: 999px;
background: var(--cw-good);
box-shadow: 0 0 8px var(--cw-good);
animation: cw-pulse 1.4s ease-in-out infinite;
}
/* Live frag feed */
.cw-feed {
display: flex; flex-direction: column;
}
.cw-feed-row {
display: grid;
grid-template-columns: 50px 1.4fr auto 1.4fr 1fr;
gap: 10px;
align-items: center;
padding: 8px 14px;
border-top: 1px solid var(--cw-border);
font-size: 13px;
}
.cw-feed-row:first-child { border-top: 0; }
.cw-feed-row:hover { background: var(--cw-bg-3); }
.cw-feed-time {
color: var(--cw-fg-dim);
font-variant-numeric: tabular-nums;
font-size: 11px;
letter-spacing: 0.3px;
text-align: right;
}
.cw-feed-killer, .cw-feed-victim {
display: flex; align-items: center; gap: 6px;
min-width: 0;
}
.cw-feed-killer a { color: var(--cw-good); font-weight: 700; }
.cw-feed-victim a { color: var(--cw-bad); font-weight: 700; }
.cw-feed-weapon {
text-align: center;
font-size: 11px;
white-space: nowrap;
}
.cw-feed-weapon code {
background: var(--cw-bg-3);
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
}
.cw-feed-hs {
color: var(--cw-warn);
text-shadow: 0 0 6px var(--cw-warn);
font-size: 14px;
vertical-align: middle;
margin-left: 4px;
}
.cw-feed-map {
text-align: right;
color: var(--cw-fg-2);
font-size: 12px;
font-weight: 600;
}
.cw-feed-map small {
display: block;
font-size: 10px;
color: var(--cw-fg-dim);
font-weight: 500;
margin-top: 2px;
}
@keyframes cw-feed-pop {
from { background: rgba(79,143,255,0.18); }
to { background: transparent; }
}
.cw-feed-fresh { animation: cw-feed-pop 4s ease-out; }
@media (max-width: 720px) {
.cw-feed-row {
grid-template-columns: 40px 1fr 1fr;
grid-template-rows: auto auto;
row-gap: 4px;
}
.cw-feed-weapon { grid-column: 2 / 4; text-align: left; }
.cw-feed-map { grid-column: 1 / 4; text-align: left; }
}
/* ===================================================================
PHASE D -- daily missions + login streak + Player of the Week
=================================================================== */
/* Mission list (profile.php, self-only) */
.cw-mission-list {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.cw-mission {
padding: 12px 14px;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
transition: border-color 0.12s;
}
.cw-mission:hover { border-color: var(--cw-border-2); }
.cw-mission.done {
background: linear-gradient(135deg, rgba(52,211,153,0.10), var(--cw-bg-3));
border-color: rgba(52,211,153,0.45);
}
.cw-mission-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 8px;
}
.cw-mission-head strong {
font-size: 14px;
color: var(--cw-fg);
}
.cw-mission-xp {
font-size: 11px; font-weight: 800;
letter-spacing: 1.2px;
color: var(--cw-warn);
padding: 2px 8px;
background: rgba(251,191,36,0.15);
border-radius: 999px;
border: 1px solid rgba(251,191,36,0.40);
}
.cw-mission.done .cw-mission-xp {
color: var(--cw-good);
background: rgba(52,211,153,0.15);
border-color: rgba(52,211,153,0.45);
}
.cw-mission-bar {
height: 8px;
background: var(--cw-bg-2);
border-radius: 999px;
overflow: hidden;
margin-bottom: 6px;
}
.cw-mission-bar span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--cw-accent), var(--cw-accent-2));
border-radius: 999px;
transition: width 0.5s ease;
}
.cw-mission.done .cw-mission-bar span {
background: linear-gradient(90deg, var(--cw-good), #1fb985);
}
.cw-mission-foot {
display: flex; align-items: center; justify-content: space-between;
font-size: 12px;
color: var(--cw-fg-dim);
font-variant-numeric: tabular-nums;
}
/* Player of the Week banner (ranks.php top) */
.cw-potw {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
align-items: center;
padding: 20px 24px;
margin-bottom: 18px;
background: linear-gradient(135deg, #1a1326, #0d0a16);
border: 1px solid rgba(251,191,36,0.45);
border-radius: var(--cw-radius-lg);
text-decoration: none !important;
color: var(--cw-fg);
overflow: hidden;
transition: transform 0.10s, box-shadow 0.15s;
}
.cw-potw:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(251,191,36,0.25);
}
.cw-potw-bg {
position: absolute; inset: 0;
background:
radial-gradient(500px 200px at 0 0, rgba(251,191,36,0.20), transparent 60%),
radial-gradient(500px 200px at 100% 100%, rgba(168,85,247,0.18), transparent 60%);
pointer-events: none;
}
.cw-potw-icon {
position: relative;
font-size: 48px;
line-height: 1;
filter: drop-shadow(0 4px 16px rgba(251,191,36,0.55));
}
.cw-potw-body { position: relative; min-width: 0; }
.cw-potw-kicker {
font-size: 10px; font-weight: 900;
letter-spacing: 2px;
color: #fbbf24;
margin-bottom: 4px;
}
.cw-potw-name {
font-size: 24px; font-weight: 900;
letter-spacing: -0.4px;
display: flex; align-items: center; gap: 8px;
background: linear-gradient(135deg, #fbbf24, #fde047);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.cw-potw-name img { vertical-align: middle; -webkit-text-fill-color: initial; }
.cw-potw-stats {
margin-top: 6px;
font-size: 13px;
color: var(--cw-fg-2);
font-variant-numeric: tabular-nums;
}
.cw-potw-stats strong { color: var(--cw-fg); }
.cw-potw-avatar { position: relative; }
@media (max-width: 720px) {
.cw-potw { grid-template-columns: auto 1fr; }
.cw-potw-avatar { display: none; }
.cw-potw-name { font-size: 18px; }
}
/* ===================================================================
PHASE E -- admin notes + MOTD
=================================================================== */
/* Broadcast / megaphone icon for sidebar */
.cw-ico-broadcast {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Admin notes panel on profile.php */
.cw-notes-card { border-color: rgba(168,85,247,0.40); }
.cw-notes-card .cw-card-h h2 { color: var(--cw-accent-2); }
.cw-note-form {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
align-items: start;
margin-bottom: 14px;
}
.cw-note-form textarea {
grid-column: 1 / -1;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
color: var(--cw-fg);
border-radius: var(--cw-radius-sm);
padding: 9px 12px;
font: inherit; font-size: 13px;
resize: vertical;
min-height: 56px;
}
.cw-note-form textarea:focus { outline: none; border-color: var(--cw-accent-2); }
.cw-note-pin {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--cw-fg-2);
}
.cw-note-list {
display: flex; flex-direction: column; gap: 8px;
}
.cw-note {
padding: 10px 12px;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
}
.cw-note.pinned {
border-left: 3px solid var(--cw-warn);
background: linear-gradient(135deg, rgba(251,191,36,0.05), var(--cw-bg-3));
}
.cw-note-body {
font-size: 13px;
color: var(--cw-fg);
line-height: 1.45;
white-space: pre-wrap;
}
.cw-note-meta {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 8px;
font-size: 11px; color: var(--cw-fg-dim);
}
.cw-note-actions { display: inline-flex; gap: 4px; }
/* MOTD broadcast form */
.cw-motd-form {
display: grid;
grid-template-columns: 280px 220px 1fr auto;
gap: 10px;
align-items: end;
}
.cw-motd-form label { display: flex; flex-direction: column; gap: 4px; }
.cw-motd-form label > span {
font-size: 11px; font-weight: 800;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--cw-fg-dim);
}
.cw-motd-form input,
.cw-motd-form select {
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
color: var(--cw-fg);
border-radius: var(--cw-radius-sm);
padding: 9px 12px; font: inherit;
}
.cw-motd-body-wrap { grid-column: 1 / -1; }
@media (max-width: 720px) {
.cw-motd-form { grid-template-columns: 1fr; }
}
/* ===================================================================
PHASE E.2 -- live RCON broadcast console
=================================================================== */
.cw-ico-terminal {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.cw-rcon-form {
display: flex; flex-direction: column;
gap: 10px;
}
.cw-rcon-form label { display: flex; flex-direction: column; gap: 4px; }
.cw-rcon-form label > span {
font-size: 11px; font-weight: 800;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--cw-fg-dim);
}
.cw-rcon-form input,
.cw-rcon-form select {
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
color: var(--cw-fg);
border-radius: var(--cw-radius-sm);
padding: 9px 12px; font: inherit;
}
/* ===================================================================
PHASE F -- evidence vault + map rotation + API docs
=================================================================== */
/* Sidebar icons */
.cw-ico-archive {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.cw-ico-mapgrid {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Evidence viewer */
.cw-ev-block {
background: var(--cw-bg);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
padding: 12px;
overflow: auto;
max-height: 380px;
font: 11px/1.45 'JetBrains Mono', 'Consolas', monospace;
color: var(--cw-fg-2);
white-space: pre-wrap;
word-break: break-word;
}
.cw-ev-chat {
background: var(--cw-bg);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
max-height: 320px;
overflow: auto;
}
.cw-ev-chat-row {
display: grid; grid-template-columns: 140px 1fr;
gap: 10px;
padding: 6px 12px;
border-bottom: 1px solid var(--cw-border);
font-size: 12px;
}
.cw-ev-chat-row:last-child { border-bottom: 0; }
.cw-ev-chat-time { color: var(--cw-fg-dim); font-family: monospace; }
.cw-ev-chat-msg { color: var(--cw-fg); }
/* Map rotation form */
.cw-maprot-form {
display: flex; flex-direction: column; gap: 8px;
}
.cw-maprot-form label { display: flex; flex-direction: column; gap: 6px; }
.cw-maprot-form label > span {
font-size: 11px; font-weight: 800;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--cw-fg-dim);
}
.cw-maprot-form textarea {
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
color: var(--cw-fg);
border-radius: var(--cw-radius-sm);
padding: 10px 14px;
font: 13px/1.55 'JetBrains Mono', monospace;
resize: vertical;
min-height: 100px;
}
.cw-maprot-form textarea:focus { outline: none; border-color: var(--cw-accent); }
/* API docs table */
.cw-api-docs td:first-child { width: 35%; }
.cw-api-docs td code { font-size: 12px; font-weight: 600; }
/* ===================================================================
PHASE H + I + F.1 -- highlights, supporters, Steam group prompt
=================================================================== */
/* Sparkle icon for the Supporters sidebar entry */
.cw-ico-sparkle {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Supporter inline badge -- sits next to player name everywhere */
.cw-sup {
--cw-sup-c: #fbbf24;
display: inline-flex; align-items: center; gap: 2px;
padding: 1px 7px;
margin: 0 4px;
font-size: 11px; font-weight: 800;
letter-spacing: 0.4px;
border-radius: 999px;
background: color-mix(in srgb, var(--cw-sup-c) 18%, var(--cw-bg-3));
color: var(--cw-sup-c) !important;
border: 1px solid color-mix(in srgb, var(--cw-sup-c) 45%, transparent);
text-decoration: none !important;
vertical-align: middle;
cursor: help;
text-shadow: 0 0 8px color-mix(in srgb, var(--cw-sup-c) 60%, transparent);
}
.cw-sup-lifetime {
background: linear-gradient(135deg,
color-mix(in srgb, var(--cw-sup-c) 25%, var(--cw-bg-3)),
color-mix(in srgb, #4f8fff 25%, var(--cw-bg-3)));
border-color: color-mix(in srgb, var(--cw-sup-c) 60%, transparent);
animation: cw-sup-shimmer 4s ease-in-out infinite;
}
@keyframes cw-sup-shimmer {
0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cw-sup-c) 40%, transparent); }
50% { box-shadow: 0 0 12px 1px color-mix(in srgb, var(--cw-sup-c) 60%, transparent); }
}
/* Supporter admin form */
.cw-sup-form {
display: grid;
grid-template-columns: 140px 140px 140px 1fr;
gap: 10px;
align-items: end;
}
.cw-sup-form label { display: flex; flex-direction: column; gap: 4px; }
.cw-sup-form label > span {
font-size: 11px; font-weight: 800;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--cw-fg-dim);
}
.cw-sup-form input,
.cw-sup-form select {
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
color: var(--cw-fg);
border-radius: var(--cw-radius-sm);
padding: 9px 12px; font: inherit;
}
.cw-sup-form input[type="color"] { height: 40px; padding: 2px; cursor: pointer; }
.cw-sup-form-note { grid-column: 1 / -1; }
@media (max-width: 720px) { .cw-sup-form { grid-template-columns: 1fr; } }
/* Highlights -- list rows used on profile + match */
.cw-hl-list {
display: flex; flex-direction: column;
gap: 6px;
}
.cw-hl-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-left: 3px solid var(--cw-warn);
border-radius: var(--cw-radius-sm);
text-decoration: none !important;
color: var(--cw-fg);
transition: transform 0.10s, background 0.12s;
}
.cw-hl-row:hover {
transform: translateY(-1px);
background: var(--cw-bg-4);
}
.cw-hl-row-ace { border-left-color: var(--cw-bad); }
.cw-hl-row-1v5 { border-left-color: var(--cw-accent-2); }
.cw-hl-row-1v4 { border-left-color: var(--cw-accent); }
.cw-hl-row-1v3 { border-left-color: var(--cw-good); }
.cw-hl-row-4k { border-left-color: var(--cw-warn); }
.cw-hl-row-defuse { border-left-color: #38bdf8; }
.cw-hl-glyph {
font-size: 22px; line-height: 1; flex-shrink: 0;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.cw-hl-label {
flex: 1; min-width: 0;
font-weight: 700; font-size: 13px;
}
.cw-hl-label small {
display: block;
font-size: 11px; font-weight: 500;
color: var(--cw-fg-dim);
margin-top: 2px;
}
.cw-hl-player {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 700; color: var(--cw-fg);
text-decoration: none !important;
white-space: nowrap;
}
.cw-hl-when {
font-size: 11px; color: var(--cw-fg-dim);
white-space: nowrap;
}
/* Inline chip variant (smaller, for narrow rows) */
.cw-hl {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px;
margin-left: 4px;
font-size: 11px; font-weight: 800;
border-radius: 999px;
background: rgba(251,191,36,0.15);
border: 1px solid rgba(251,191,36,0.40);
color: var(--cw-warn);
}
.cw-hl-ace { background: rgba(248,113,113,0.16); border-color: rgba(248,113,113,0.4); color: var(--cw-bad); }
.cw-hl-1v5 { background: rgba(168,85,247,0.16); border-color: rgba(168,85,247,0.4); color: var(--cw-accent-2); }
.cw-hl-defuse { background: rgba(56,189,248,0.16); border-color: rgba(56,189,248,0.4); color: #38bdf8; }
.cw-hl small { font-weight: 600; opacity: 0.8; }
/* Steam group nudge banner */
.cw-steam-prompt {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
padding: 14px 18px;
margin-bottom: 18px;
background: linear-gradient(135deg, #11151f, #1c2333);
border: 1px solid var(--cw-border-2);
border-left: 4px solid #66c0f4;
border-radius: var(--cw-radius);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.cw-steam-prompt-icon {
font-size: 32px; line-height: 1;
color: #66c0f4;
filter: drop-shadow(0 2px 6px rgba(102,192,244,0.45));
}
.cw-steam-prompt-body strong {
display: block;
font-size: 14px;
color: var(--cw-fg);
}
.cw-steam-prompt-body p {
margin: 4px 0 0;
font-size: 12px;
color: var(--cw-fg-2);
}
.cw-steam-prompt-actions {
display: flex; gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width: 600px) {
.cw-steam-prompt { grid-template-columns: 1fr; text-align: center; }
.cw-steam-prompt-actions { justify-content: center; }
}
/* ===================================================================
CW polish + Skin & Branding admin form
=================================================================== */
/* Warmer sidebar gradient + brighter brand chip + glow */
.cw-side {
background: linear-gradient(180deg,
#1a1326 0%,
#11151f 35%,
#0d1119 100%) !important;
}
.cw-brand-icon {
box-shadow:
0 6px 22px rgba(168,85,247,0.45),
0 2px 8px rgba(79,143,255,0.30),
inset 0 1px 0 rgba(255,255,255,0.35);
}
.cw-side-link.active {
background: linear-gradient(90deg,
rgba(79,143,255,0.28),
rgba(168,85,247,0.10) 80%) !important;
}
.cw-side-link.active::before {
background: linear-gradient(180deg, #4f8fff 0%, #a855f7 60%, #ec4899 100%) !important;
box-shadow: 0 0 12px rgba(168,85,247,0.65) !important;
}
/* Card top-bar accent line (mirrors HLstatsX side) */
.cw-card-h {
position: relative;
}
.cw-card-h::after {
content: '';
position: absolute; left: 0; right: 0; bottom: -1px;
height: 1px;
background: linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--cw-accent) 60%, transparent),
transparent);
pointer-events: none;
}
/* Leaderboard rank top-3 chips get more pop */
.cw-pos.gold {
background: linear-gradient(135deg, rgba(251,191,36,0.35), rgba(251,191,36,0.10));
border-radius: 6px;
padding: 4px 8px;
}
.cw-pos.silver {
background: linear-gradient(135deg, rgba(192,197,208,0.30), rgba(192,197,208,0.08));
border-radius: 6px;
padding: 4px 8px;
}
.cw-pos.bronze {
background: linear-gradient(135deg, rgba(217,119,85,0.30), rgba(217,119,85,0.08));
border-radius: 6px;
padding: 4px 8px;
}
/* Hero block warmer multi-tone */
.cw-hero {
background:
radial-gradient(700px 240px at 100% 0, rgba(168,85,247,0.22), transparent 55%),
radial-gradient(600px 240px at 0 100%, rgba(79,143,255,0.20), transparent 55%),
radial-gradient(400px 200px at 50% 50%, rgba(236,72,153,0.10), transparent 65%),
linear-gradient(135deg, var(--cw-bg-2), var(--cw-bg)) !important;
}
/* Skin & branding form (admin.php) */
.cw-skin-form {
display: flex; flex-direction: column;
gap: 12px;
}
.cw-skin-row {
display: grid;
grid-template-columns: 220px 1fr auto;
gap: 12px;
align-items: center;
padding: 8px 10px;
background: var(--cw-bg-3);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
}
.cw-skin-row > span {
font-size: 12px; font-weight: 700;
color: var(--cw-fg-2);
}
.cw-skin-row input[type="text"],
.cw-skin-row select {
background: var(--cw-bg-2);
border: 1px solid var(--cw-border);
color: var(--cw-fg);
border-radius: var(--cw-radius-sm);
padding: 7px 10px;
font: inherit;
}
.cw-skin-row input[type="color"] {
height: 32px; width: 60px;
padding: 2px;
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
background: var(--cw-bg-2);
cursor: pointer;
}
.cw-skin-row code {
font-size: 11px;
color: var(--cw-fg-dim);
font-family: monospace;
text-align: right;
}
.cw-skin-row-color {
grid-template-columns: 140px 60px 1fr;
}
.cw-skin-fs {
padding: 14px 14px 4px;
margin: 6px 0;
background: var(--cw-bg);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-sm);
}
.cw-skin-fs legend {
font-size: 11px; font-weight: 800;
letter-spacing: 1.4px; text-transform: uppercase;
color: var(--cw-accent);
padding: 0 6px;
}
@media (max-width: 720px) {
.cw-skin-row { grid-template-columns: 1fr; }
.cw-skin-row-color { grid-template-columns: 1fr; }
}
/* ===================================================================
"Sign in with Steam" button
=================================================================== */
.cw-btn-steam {
display: inline-flex; align-items: center; gap: 12px;
padding: 12px 22px;
background: linear-gradient(180deg, #1b6dff 0%, #0f4ec1 100%);
border: 1px solid rgba(255,255,255,0.18);
color: #fff !important;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.3px;
border-radius: 8px;
box-shadow:
0 6px 18px rgba(27,109,255,0.45),
inset 0 1px 0 rgba(255,255,255,0.30);
transition: transform 0.10s, box-shadow 0.15s, filter 0.15s;
text-decoration: none !important;
}
.cw-btn-steam:hover {
transform: translateY(-1px);
filter: brightness(1.10);
box-shadow:
0 10px 26px rgba(27,109,255,0.55),
inset 0 1px 0 rgba(255,255,255,0.40);
}
.cw-btn-steam:active { transform: translateY(0); }
/* Inline steam logo (the white "S" lettermark) -- SVG mask so it
inherits currentColor. */
.cw-steam-logo {
display: inline-block;
width: 22px; height: 22px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
flex-shrink: 0;
}
.cw-steam-logo-sm { width: 16px; height: 16px; }
/* Sign-in pill in the sidebar foot -- override the generic gradient
so it reads as "Steam blue" specifically. */
.cw-side-signin {
background: linear-gradient(180deg, #1b6dff, #0f4ec1) !important;
box-shadow: 0 6px 16px rgba(27,109,255,0.40) !important;
}
.cw-side-signin:hover {
box-shadow: 0 8px 22px rgba(27,109,255,0.55) !important;
}
/* Legacy alias kept so old call sites that emit class="cw-rank" don't
collapse into block-level rendering. */
.cw-rank { display: inline-flex; align-items: center; gap: 8px; }