/* =====================================================================
   cw-elite.css — site-wide "elite" polish layer. Loaded LAST (after
   cw.css / cw-shell.css / cw-skin.css) so it refines the shared
   components everywhere without touching page markup. Dark-only,
   additive, token-driven. No opacity:0 entrance anims (the match page
   live-swaps its DOM), only interaction + decorative motion.
   ===================================================================== */

:root{
  --cw-glow: 0 0 0 1px rgba(255,85,0,.35), 0 8px 26px -8px rgba(255,85,0,.5);
  --cw-ring: var(--cw-accent);
  --cw-hair: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 40%);
}

/* ---- Cards: gradient hairline top edge + deeper depth + smooth hover ---- */
.cw-card{
  position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 44px -22px rgba(0,0,0,.85);
  transition:border-color .18s ease, box-shadow .22s ease, transform .22s ease;
}
.cw-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:var(--cw-hair);border-radius:inherit;opacity:.8;
}
a.cw-card, .cw-card[href], .cw-card[onclick]{ cursor:pointer; }
a.cw-card:hover, .cw-card[href]:hover{
  /* No translateY here: cw-skin.css sets `.cw-card:hover{transform:none!important}`
     (site-wide "no pop" rule) which always wins, so a lift never fired anyway. */
  border-color:var(--cw-border-2);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 26px 60px -24px rgba(0,0,0,.95);
}

/* ---- Section headers: crisper accent bar with a soft glow ---- */
.cw-card-h h2{ letter-spacing:.2px; }
.cw-card-h > h2::before, .cw-card-h::before{ box-shadow:0 0 12px -2px var(--cw-accent); }

/* ---- Primary buttons: gradient + inner light + glow + sheen on hover ---- */
.cw-btn:not(.ghost):not(.sm.ghost):not(.cw-btn-steam):not(.danger){
  background:linear-gradient(180deg, #ff6a1a, var(--cw-accent) 55%, var(--cw-accent-2));
  border:1px solid rgba(255,120,40,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 10px 24px -10px rgba(255,85,0,.7);
  position:relative;overflow:hidden;transition:transform .14s ease, box-shadow .2s ease, filter .2s ease;
}
.cw-btn:not(.ghost):not(.sm.ghost):not(.cw-btn-steam):not(.danger)::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transition:transform .6s ease;
}
.cw-btn:not(.ghost):not(.sm.ghost):not(.cw-btn-steam):not(.danger):hover{ filter:brightness(1.06); transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset, 0 14px 30px -10px rgba(255,85,0,.85); }
.cw-btn:not(.ghost):not(.sm.ghost):not(.cw-btn-steam):not(.danger):hover::after{ transform:translateX(120%); }
.cw-btn:active{ transform:translateY(0) scale(.985); }

/* Ghost buttons: crisper, subtle hover fill */
.cw-btn.ghost{ transition:border-color .16s ease, background .16s ease, color .16s ease, transform .14s ease; }
.cw-btn.ghost:hover{ border-color:var(--cw-accent); color:#fff; transform:translateY(-1px); }

/* ---- Buttons: in-flight / loading state — pages opt in by toggling .is-loading ---- */
.cw-btn.is-loading{ position:relative; pointer-events:none; color:transparent !important; }
.cw-btn.is-loading::before{
  content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:cwBtnSpin .6s linear infinite;
}
@keyframes cwBtnSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .cw-btn.is-loading::before{ animation:none; opacity:.6; border-top-color:rgba(255,255,255,.35); }
}

/* ---- Sidebar nav: hover glow + refined active rail ---- */
.cw-side-link{ transition:background .15s ease, color .15s ease, box-shadow .15s ease; border-radius:9px; }
.cw-side-link:hover{ background:rgba(255,255,255,.045); }
.cw-side-link.active{ box-shadow:0 0 0 1px rgba(255,85,0,.18) inset; }
.cw-side-link.active::before{ box-shadow:0 0 10px -1px var(--cw-accent); }
.cw-side-play{ box-shadow:0 10px 28px -12px rgba(255,85,0,.75); }
.cw-side-play:hover{ filter:brightness(1.05); }

/* ---- Badges / pills: crisper edges ---- */
.cw-badge, .cw-pill, .cw-side-pill{ box-shadow:0 1px 0 rgba(255,255,255,.05) inset; }

/* ---- Avatars: subtle ring so faces sit cleaner on any bg ---- */
.cw-avatar{ box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 2px 6px -2px rgba(0,0,0,.6); }

/* ---- TABLES: premium rows (scoped to content so it never hits embeds) ---- */
.cw-content table{ border-collapse:separate; border-spacing:0; width:100%; }
.cw-content table th{
  text-transform:uppercase; letter-spacing:.6px; font-size:11px; font-weight:800;
  color:var(--cw-fg-dim); padding:11px 14px; border-bottom:1px solid var(--cw-border-2);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.cw-content table td{ padding:12px 14px; border-bottom:1px solid var(--cw-border); }
.cw-content table tbody tr{ transition:background .14s ease; }
.cw-content table tbody tr:hover{ background:rgba(255,120,40,.06); }
.cw-content table tbody tr:hover td:first-child{ box-shadow:inset 3px 0 0 var(--cw-accent); }
.cw-content table tbody tr:last-child td{ border-bottom:none; }

/* ---- Forms: focus glow + tidy fills ---- */
.cw-content input[type=text], .cw-content input[type=search], .cw-content input[type=email],
.cw-content input[type=number], .cw-content input[type=password], .cw-content select, .cw-content textarea{
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cw-content input:focus, .cw-content select:focus, .cw-content textarea:focus,
.cw-search input:focus{
  outline:none; border-color:var(--cw-accent);
  box-shadow:0 0 0 3px rgba(255,85,0,.16);
}

/* ---- Big numbers (MMR / stat tiles): tighter, glowing ---- */
.cw-big-mmr, .cw-hero-rating .cw-big-mmr{ font-variant-numeric:tabular-nums; letter-spacing:-1px;
  text-shadow:0 0 26px rgba(255,85,0,.28); }

/* ---- Hero: a touch more depth on the top edge ---- */
.cw-hero::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--cw-hair);opacity:.5; }
.cw-hero{ position:relative; }

/* ---- Themed scrollbars site-wide ---- */
*{ scrollbar-width:thin; scrollbar-color:var(--cw-bg-5) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--cw-bg-4); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--cw-bg-5); }

/* ---- SVG emblems: gentle live glow on the featured/rank marks ---- */
.cw-rank-emblem svg, .cw-emblem svg, .cw-tier-ico svg{ filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }

/* ---- Live dots everywhere: crisper pulse ---- */
.cw-live-dot{ box-shadow:0 0 10px -1px currentColor; }

/* ---- Focus-visible accessibility ring for keyboard users ---- */
a:focus-visible, button:focus-visible{ outline:2px solid var(--cw-ring); outline-offset:2px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  .cw-card, .cw-btn, .cw-side-link{ transition:none !important; }
  .cw-btn:not(.ghost)::after{ display:none; }
}

/* =====================================================================
   2026-07-12 — RESPONSIVE TABLES. Goal: tables fit the content column and
   NEVER scroll left/right. Wide tables get tighter cells + wrapping on the
   desktop→tablet range; on phones each row becomes a labelled card (the
   data-label is injected by initTableLabels() in cw.js from each <th>).
   ===================================================================== */
.cw-table{ width:100%; table-layout:auto; }
.cw-table thead th{ white-space:normal; }                 /* let long headers wrap instead of forcing width */
.cw-table tbody td{ overflow-wrap:anywhere; word-break:break-word; }
.cw-table .cw-name-cell{ max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.cw-table code{ overflow-wrap:anywhere; }                 /* connect strings / codes wrap, don't push width */

/* tablet: shrink the cell rhythm so column-heavy tables (league, admin) fit */
@media (max-width:1100px){
  .cw-table thead th{ padding:9px 9px; font-size:9.5px; letter-spacing:1px; }
  .cw-table tbody td{ padding:8px 9px; font-size:13px; }
  .cw-table .cw-name-cell{ max-width:190px; }
}

/* phones/small: STACK each row into a card — zero horizontal scroll */
@media (max-width:720px){
  .cw-table-wrap{ overflow-x:visible; }
  .cw-table, .cw-table > tbody, .cw-table > tbody > tr, .cw-table > tbody > td, .cw-table td{ display:block; width:100%; }
  .cw-table thead{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; }
  .cw-table tbody tr{ margin:0 0 10px; background:var(--cw-bg-2); border:1px solid var(--cw-border); border-radius:12px; overflow:hidden; }
  .cw-table tbody td{ display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:9px 13px; text-align:right; min-height:38px; border-bottom:1px solid var(--cw-border); font-size:13.5px; }
  .cw-table tbody td:last-child{ border-bottom:0; }
  .cw-table tbody td::before{ content:attr(data-label); flex:0 0 auto; max-width:46%; font-weight:800; font-size:10px;
    text-transform:uppercase; letter-spacing:.8px; color:var(--cw-fg-dim); text-align:left; }
  .cw-table tbody td[data-label=""]::before, .cw-table tbody td:not([data-label])::before{ content:""; }
  /* the player/name cell reads as the card title — left aligned, no label */
  .cw-table .cw-name-cell{ justify-content:flex-start; max-width:none; font-weight:800; font-size:15px; }
  .cw-table .cw-name-cell::before{ display:none; }
  /* action cells (buttons/forms) fill the row */
  .cw-table td form, .cw-table td .cw-btn{ margin-left:auto; }
}

/* =====================================================================
   FIT OVERRIDE (2026-07-12) — the base sheet (cw.css ~4511) forces
   `.cw-card-b > .cw-table-wrap > .cw-table { min-width:760px }` and every
   tbody td to `white-space:nowrap`, which makes column-heavy tables overflow
   the content column and scroll sideways. THIS was why tables "didn't fit".
   Override it (loaded last + !important) so cells WRAP and the table shrinks
   to 100% of the content column — no left/right scroll, any column count.
   ===================================================================== */
.cw-table{ min-width:0 !important; width:100%; }
.cw-card-b > .cw-table-wrap > .cw-table{ min-width:0 !important; }

/* FIT OVERRIDE v2 — the earlier version wrapped EVERY cell, which made
   leaderboard names break mid-word and numbers wrap (ugly). Correct approach:
   on desktop keep each cell on ONE line (numbers stay clean) and let the
   flexible player/name column TRUNCATE with … instead of wrapping. text-overflow
   ellipsis only works with white-space:nowrap, so the earlier `normal` killed it. */
@media (min-width:721px){
  .cw-table thead th,
  .cw-table tbody td,
  .cw-card-b > .cw-table-wrap > .cw-table tbody td{ white-space:nowrap !important; overflow-wrap:normal; word-break:normal; }
  .cw-table tbody td{ font-variant-numeric:tabular-nums; }
  /* the player column soaks up leftover width and clips long names cleanly */
  .cw-table td.cw-name-cell, .cw-table td.cw-name{ max-width:230px; min-width:0; }
  .cw-table td.cw-name-cell a,
  .cw-table td.cw-name-cell .cw-name,
  .cw-table td.cw-name-cell > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
}
/* laptops: tighten + DROP the 3 lowest-value leaderboard columns so the core
   (rank / rating / W-L / win% / K-D) breathes and names get room. */
@media (min-width:721px) and (max-width:1120px){
  .cw-table thead th{ padding:8px 9px; font-size:9.5px; letter-spacing:.7px; }
  .cw-table tbody td{ padding:8px 9px; font-size:12.5px; }
  .cw-table td.cw-name-cell, .cw-table td.cw-name{ max-width:160px; }
  /* ranks.php .cw-lbt: hide Form(5), HS%(9), Last match(10) */
  .cw-lbt th:nth-child(5),  .cw-lbt td:nth-child(5),
  .cw-lbt th:nth-child(9),  .cw-lbt td:nth-child(9),
  .cw-lbt th:nth-child(10), .cw-lbt td:nth-child(10),
  /* league.php .cw-season-table: hide HS%(8), Streak(9), Last match(10) */
  .cw-season-table th:nth-child(8),  .cw-season-table td:nth-child(8),
  .cw-season-table th:nth-child(9),  .cw-season-table td:nth-child(9),
  .cw-season-table th:nth-child(10), .cw-season-table td:nth-child(10){ display:none; }
}

/* =====================================================================
   LEADERBOARD even column spread (2026-07-12) — width:100% + a single
   greedy Player column dumped ALL the slack into one cell → a big empty
   gap mid-row and the stats bunched hard right. Fixed layout + a defined
   Player share spreads the remaining columns EVENLY across the full width
   and centres the numbers; the name truncates within its share.
   ===================================================================== */
@media (min-width:721px){
  .cw-lbt, .cw-season-table{ table-layout:fixed; width:100%; }
  .cw-lbt td.cw-pos, .cw-lbt th:first-child,
  .cw-season-table td.cw-pos, .cw-season-table th:first-child{ width:44px; }
  .cw-lbt td.cw-name-cell, .cw-lbt th:nth-child(2),
  .cw-season-table td.cw-name-cell, .cw-season-table th:nth-child(2){ width:24%; max-width:none; }
  /* every stat column (3rd onward): centre header + value so the even
     columns read tidy instead of jammed left */
  .cw-lbt thead th:nth-child(n+3), .cw-lbt tbody td:nth-child(n+3),
  .cw-season-table thead th:nth-child(n+3), .cw-season-table tbody td:nth-child(n+3){ text-align:center; }
  /* name cell truncates cleanly inside its 24% share */
  .cw-lbt td.cw-name-cell, .cw-season-table td.cw-name-cell{ text-align:left; overflow:hidden; }
  .cw-lbt .cw-lb-pinfo, .cw-lbt .cw-lb-pname,
  .cw-season-table .cw-szn-standing-main, .cw-season-table .cw-szn-standing-name{
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}