/* =====================================================================
   ClanWar — "MINIMAL PREMIUM" redesign layer  (Linear / Vercel vibe)
   Loaded AFTER cw.css. Flat near-black canvas, General Sans, generous
   space, hairline borders, ONE soft shadow, crimson as a single sharp
   accent. No grid, no grain, no brackets, no glows. Restraint > decoration.
   Built on the --cw-* tokens so the light/dark toggle keeps working.
   ===================================================================== */

:root {
  /* --- Type: one clean grotesque does everything ------------------- */
  --cw-font-display: 'General Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cw-font-body:    'General Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cw-font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', monospace;

  /* --- Refined NEUTRAL near-black palette (overrides cw.css) -------- */
  --cw-bg:        #0a0a0b;
  --cw-bg-2:      #101012;
  --cw-bg-3:      #161618;
  --cw-bg-4:      #1d1d20;
  --cw-bg-5:      #26262b;
  --cw-border:    rgba(255,255,255,.07);
  --cw-border-2:  rgba(255,255,255,.12);
  --cw-fg:        #f4f4f5;
  --cw-fg-2:      #a1a1aa;
  --cw-fg-dim:    #71717a;
  --cw-accent:    #e23744;   /* refined crimson, used sparingly */
  --cw-accent-2:  #c81e2a;

  --cw-radius:    12px;
  --cw-radius-sm: 8px;
  --cw-radius-lg: 16px;

  /* one calm, deep shadow — the only elevation cue */
  --cw-shadow:    0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.7);
}

/* ===================================================================
   CANVAS — flat. Kill cw.css's radial glows + any grain/grid.
   =================================================================== */
body.cw-body {
  font-family: var(--cw-font-body);
  background: var(--cw-bg);
  background-image: none !important;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.cw-body::after, body.cw-body::before { display: none !important; }

/* ===================================================================
   TYPOGRAPHY — sentence case, tight tracking, refined weights.
   The ONE uppercase pattern: tiny tracked section labels.
   =================================================================== */
h1, h2, h3, h4, h5,
.cw-page-title, .cw-hero h1, .cw-card-h h2, .cw-card-h h3 {
  font-family: var(--cw-font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: none;
}
.cw-page-title { font-size: 18px; font-weight: 600; }
.cw-hero h1   { font-weight: 600; letter-spacing: -.03em; text-shadow: none; }
.cw-card-h h2, .cw-card-h h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.cw-hero p, .cw-card-b p { color: var(--cw-fg-2); }

.cw-side-sec-h {
  font-family: var(--cw-font-body);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: 10px; font-weight: 600; color: var(--cw-fg-dim);
}

/* numbers: clean tabular, no glow */
.cw-big-mmr, .cw-mmr, .cw-rating, .cw-stat-num, .cw-score, .cw-num,
.cw-hero-rating, .cw-prem-mmr, .cw-team-seed, .cw-stat-big, .cw-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
}
.cw-big-mmr { font-weight: 600; text-shadow: none !important; }

a { color: var(--cw-fg); }
a:hover { color: var(--cw-accent); text-decoration: none; }

/* ===================================================================
   SIDEBAR — flat, quiet, one accent on the active item
   =================================================================== */
.cw-side {
  background: var(--cw-bg-2) !important;
  border-right: 1px solid var(--cw-border);
  box-shadow: none !important;
}
.cw-brand { border-bottom: 1px solid var(--cw-border); }
.cw-brand-icon {
  background: var(--cw-accent) !important;
  border-radius: 9px;
  box-shadow: none !important;
  font-weight: 600; letter-spacing: .04em;
}
.cw-brand-text strong { font-weight: 600; letter-spacing: -.01em; font-size: 15px; }
.cw-side-link {
  border-radius: 8px; font-weight: 500; color: var(--cw-fg-2);
  transition: background .14s, color .14s;
}
.cw-side-link:hover { background: rgba(255,255,255,.04); color: var(--cw-fg); }
.cw-side-link.active {
  background: rgba(255,255,255,.06) !important;
  color: var(--cw-fg) !important;
}
.cw-side-link.active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--cw-accent); box-shadow: none;
}
.cw-side-link.active .cw-ico { background-color: var(--cw-accent); }

/* ===================================================================
   TOPBAR
   =================================================================== */
.cw-topbar {
  background: color-mix(in srgb, var(--cw-bg) 72%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--cw-border);
}

/* ===================================================================
   CARDS — flat panel, hairline border, ONE soft shadow.
   Strip cw.css gradients / crimson edges / brackets.
   =================================================================== */
.cw-card, .cw-stat-card, .cw-cup-card, .cw-bout, .cw-hl,
.cw-server-card, .cw-hof-cup, .cw-clan-card {
  background: var(--cw-bg-2) !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: var(--cw-radius);
  box-shadow: var(--cw-shadow);
  transition: border-color .16s, transform .12s, box-shadow .16s;
}
.cw-card:hover, .cw-cup-card:hover, .cw-stat-card:hover {
  border-color: var(--cw-border-2) !important;
  transform: none;
}
.cw-card > .cw-card-h::before,
.cw-cup-card::before { display: none !important; content: none !important; }
.cw-card-h { border-bottom: 1px solid var(--cw-border); text-transform: none; }
.cw-card-h small { color: var(--cw-fg-dim); font-variant-numeric: tabular-nums; }

/* ===================================================================
   HERO — calm, spacious. No scanlines, brackets, or heavy gradient.
   A single hairline + the faintest crimson wash, that's it.
   =================================================================== */
.cw-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(226,55,68,.06), transparent 42%),
    var(--cw-bg-2) !important;
  border: 1px solid var(--cw-border) !important;
  box-shadow: var(--cw-shadow);
}
.cw-hero::before, .cw-hero::after { display: none !important; content: none !important; }
.cw-hero .cw-kicker, .cw-hero-kicker {
  text-transform: uppercase; letter-spacing: .16em; font-size: 11px;
  font-weight: 600; color: var(--cw-accent);
}

/* ===================================================================
   BUTTONS — clean. Solid crimson primary, quiet ghost. No uppercase.
   =================================================================== */
.cw-btn {
  font-family: var(--cw-font-body);
  text-transform: none; letter-spacing: -.01em; font-weight: 600;
  border-radius: 9px;
  transition: background .14s, border-color .14s, transform .08s, color .14s;
  box-shadow: none !important;
}
.cw-btn:not(.ghost) {
  background: var(--cw-accent) !important;
  border: 1px solid var(--cw-accent) !important;
  color: #fff !important;
}
.cw-btn:not(.ghost):hover {
  background: color-mix(in srgb, var(--cw-accent) 88%, #fff) !important;
  transform: translateY(-1px);
}
.cw-btn.ghost {
  background: transparent !important;
  border: 1px solid var(--cw-border-2) !important;
  color: var(--cw-fg) !important;
}
.cw-btn.ghost:hover { background: rgba(255,255,255,.04) !important; border-color: var(--cw-fg-dim) !important; }

/* ===================================================================
   TABLES — spacious, hairline dividers, tabular numerics, quiet hover
   =================================================================== */
.cw-table thead th {
  font-family: var(--cw-font-body);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  font-size: 11px; color: var(--cw-fg-dim);
  border-bottom: 1px solid var(--cw-border) !important;
  background: transparent !important;
  padding-top: 12px; padding-bottom: 12px;
}
.cw-table tbody td { border-bottom: 1px solid var(--cw-border) !important; padding-top: 13px; padding-bottom: 13px; }
.cw-table tbody tr { transition: background .12s; }
.cw-table tbody tr:hover { background: rgba(255,255,255,.025) !important; }
.cw-table tbody tr:hover td:first-child { box-shadow: none !important; }
.cw-table td:where(.num,.cw-num,[data-num]) { font-variant-numeric: tabular-nums; }

/* ===================================================================
   BADGES / PILLS — quiet, hairline
   =================================================================== */
.cw-badge {
  font-family: var(--cw-font-body); font-weight: 500; letter-spacing: -.01em;
  border-radius: 7px; border: 1px solid var(--cw-border);
  background: var(--cw-bg-3);
}
.cw-pill, .cw-side-pill { font-family: var(--cw-font-body); font-weight: 600; }
.cw-live-dot { box-shadow: none; }

/* ===================================================================
   MOTION — a single, gentle fade-rise. Subtle.
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .cw-card, .cw-hero { animation: cw-fade .42s cubic-bezier(.22,.7,.25,1) both; }
  .cw-content > *:nth-child(2) { animation-delay: .05s; }
  .cw-content > *:nth-child(3) { animation-delay: .10s; }
  .cw-content > *:nth-child(4) { animation-delay: .14s; }
}
@keyframes cw-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===================================================================
   DETAILS — selection, focus ring, hairline scrollbar
   =================================================================== */
::selection { background: rgba(226,55,68,.28); color: #fff; }
:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 2px; }
* { scrollbar-color: var(--cw-border-2) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--cw-border-2); border-radius: 9px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--cw-fg-dim); background-clip: content-box; }

/* ===================================================================
   LIGHT THEME — keep it crisp if toggled (cw.css handles the flip;
   just make sure our hairlines read on light).
   =================================================================== */
[data-theme="light"] {
  --cw-bg: #fbfbfc; --cw-bg-2: #ffffff; --cw-bg-3: #f4f4f5; --cw-bg-4: #ececee;
  --cw-border: rgba(10,10,11,.09); --cw-border-2: rgba(10,10,11,.14);
  --cw-fg: #18181b; --cw-fg-2: #52525b; --cw-fg-dim: #8a8a93;
  --cw-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 28px -16px rgba(0,0,0,.18);
}
[data-theme="light"] body.cw-body { background: var(--cw-bg); background-image: none !important; }
[data-theme="light"] .cw-side { background: #ffffff !important; }
[data-theme="light"] .cw-topbar { background: color-mix(in srgb, #ffffff 78%, transparent); }
[data-theme="light"] .cw-btn:not(.ghost) { color: #fff !important; }

/* ===================================================================
   RESPONSIVE — gentle scaling + breathing room on small screens.
   (cw.css already provides the mobile sidebar drawer; this refines type
   + density so the minimal look holds on phones.)
   =================================================================== */
@media (max-width: 1100px) {
  .cw-hero h1 { font-size: clamp(26px, 4.2vw, 40px); }
}
@media (max-width: 900px) {
  .cw-content { padding: 16px !important; }
  .cw-hero { padding: 22px 18px !important; }
  .cw-page-title { font-size: 16px; }
  /* any 2-up / 3-up grids collapse gracefully */
  .cw-grid-2, .cw-grid-3, .cw-stat-grid, .cw-cup-grid { grid-template-columns: 1fr !important; }
  .cw-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 560px) {
  .cw-hero h1 { font-size: 24px; letter-spacing: -.02em; }
  .cw-hero p { font-size: 13.5px; }
  .cw-card-b.padded { padding: 16px; }
  .cw-card-h { padding: 13px 16px; }
  .cw-table { font-size: 13px; }
  .cw-table thead th, .cw-table tbody td { padding-left: 9px; padding-right: 9px; }
  .cw-big-mmr { font-size: clamp(34px, 11vw, 48px); }
  .cw-top-actions .cw-btn.sm { padding: 6px 10px; }
}