/* ================= EsportSettings design system ================= */
/* ============================================================
   🎨 THEME / LOOK & FEEL  —  edit ONLY the values below to
   restyle the whole site. You do NOT need to touch anything
   else in this file. Change the colour after the colon, save,
   and it applies everywhere. (Colours are hex: #rrggbb.)
   ------------------------------------------------------------
   • --accent        → the brand "lime" (buttons, highlights, G tile)
   • --bg/--surface  → page & card backgrounds (dark theme)
   • --text/--muted  → main text / secondary text
   • --radius        → how rounded corners are (bigger = rounder)
   • --font          → the typeface used across the site
   Want a LIGHT theme? Set --bg:#ffffff; --surface:#f4f6fa;
   --text:#11151f; --muted:#556; --accent-ink:#0c0f08;
   ============================================================ */
:root{
  --bg:#0a0d13; --bg2:#0e1219; --surface:#141925; --surface2:#1b2231;
  --border:#232c3d; --border2:#2e3a50;
  --text:#e8edf6; --muted:#8b97ab; --faint:#5b6778;
  --accent:#b8f53a; --accent-dim:#8fc42c; --accent-ink:#0c0f08;
  --cyan:#4dd8ff; --violet:#a78bfa; --red:#ff5d6c; --amber:#ffc24b; --green:#4ade80;
  --radius:14px; --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 500px at 80% -10%, rgba(184,245,58,.07), transparent 60%),
                   radial-gradient(900px 500px at -10% 10%, rgba(77,216,255,.05), transparent 60%);
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
.container{max-width:1240px;margin:0 auto;padding:0 20px}

/* ---------- header / nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(10,13,19,.85);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;gap:22px;height:62px}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.02em;
  white-space:nowrap;color:var(--text)}
.logo-mark{width:30px;height:30px;border-radius:8px;background:var(--accent);flex:0 0 auto;
  display:grid;place-items:center;color:var(--accent-ink);font-weight:900;font-size:16px;
  box-shadow:0 0 18px rgba(184,245,58,.35)}
/* "EsportSettings" wordmark next to the E tile */
.logo-word{color:var(--text);font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.logo-word-accent{color:var(--accent)}
.nav-links{display:flex;gap:4px;margin-left:8px}
.nav-links a{padding:7px 12px;border-radius:8px;color:var(--muted);font-size:14px;font-weight:500;transition:.15s}
.nav-links a:hover{color:var(--text);background:var(--surface)}
.nav-links a.active{color:var(--accent);background:rgba(184,245,58,.1)}
.nav-search{margin-left:auto;position:relative;flex:1 1 150px;min-width:0;max-width:250px}
.nav-search input{width:100%;max-width:250px;padding:9px 14px 9px 36px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:13.5px;outline:none;transition:.15s}
.nav-search input:focus{border-color:var(--accent-dim)}
#curToggle{flex:none;margin-left:10px}
.nav-search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px}
.search-results{position:absolute;top:44px;right:0;width:340px;background:var(--surface2);
  border:1px solid var(--border2);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:none}
.search-results.open{display:block}
.search-results a{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border)}
.search-results a:hover{background:var(--surface)}
.search-results .cat-tag{margin-left:auto;font-size:11px;color:var(--muted)}
.search-results .sr-name{font-size:14px;font-weight:600}
.search-results .sr-brand{font-size:12px;color:var(--muted)}
.search-empty{padding:16px;color:var(--muted);font-size:13px;text-align:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:11px;
  font-weight:700;font-size:14.5px;border:1px solid transparent;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:#d0ff5a;transform:translateY(-1px);box-shadow:0 6px 20px rgba(184,245,58,.3)}
.btn-ghost{background:var(--surface2);color:var(--text);border-color:var(--border2)}
.btn-ghost:hover{border-color:var(--accent-dim);color:var(--accent)}
.btn-sm{padding:7px 13px;font-size:13px;border-radius:9px}
.btn-block{width:100%;justify-content:center}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- hero ---------- */
.hero{padding:72px 0 48px;text-align:center;position:relative}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:850;letter-spacing:-.03em;line-height:1.08}
.hero h1 em{font-style:normal;color:var(--accent);
  text-shadow:0 0 40px rgba(184,245,58,.35)}
.hero p{margin:18px auto 30px;max-width:600px;color:var(--muted);font-size:17.5px}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:38px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.hero-stat b{display:block;font-size:28px;font-weight:850;color:var(--text)}
.hero-stat span{font-size:13px;color:var(--muted)}
.hero-search{max-width:560px;margin:0 auto 8px;position:relative}
.hero-search input{width:100%;padding:16px 20px;border-radius:14px;border:1px solid var(--border2);
  background:var(--surface);font-size:16px;color:var(--text);outline:none}
.hero-search input:focus{border-color:var(--accent-dim);box-shadow:0 0 0 4px rgba(184,245,58,.1)}

/* ---------- sections ---------- */
section{padding:44px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.section-head h2{font-size:26px;font-weight:800;letter-spacing:-.02em}
.section-head p{color:var(--muted);font-size:14.5px;margin-top:4px}
.section-head a{color:var(--accent);font-weight:600;font-size:14px}

/* category cards */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 18px;transition:.18s;cursor:pointer}
.cat-card:hover{border-color:var(--accent-dim);transform:translateY(-3px);background:var(--surface2)}
.cat-card .ico{font-size:30px;margin-bottom:12px}
.cat-card h3{font-size:16px;font-weight:750}
.cat-card p{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.cat-card .n{margin-top:12px;font-size:12px;color:var(--accent);font-weight:700}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(255px,100%),1fr));gap:16px;min-width:0}
.grid,.pro-grid,.game-gear-grid,.teammate-grid,.team-grid,.dim-grid{min-width:0}
.pcard{min-width:0}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;transition:.18s;position:relative;display:flex;flex-direction:column;gap:10px}
.pcard:hover{border-color:var(--border2);transform:translateY(-3px);box-shadow:var(--shadow)}
.pcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pcard-brand{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pcard-rating{font-size:12.5px;color:var(--violet);font-weight:700;white-space:nowrap}
.pcard h3{font-size:16px;font-weight:750;line-height:1.3;letter-spacing:-.01em}
.pcard h3 a:hover{color:var(--accent)}
.pcard-shape{height:96px;display:grid;place-items:center;background:var(--bg2);
  border-radius:var(--radius-sm);border:1px solid var(--border);margin:2px 0}
.pcard-shape svg{height:82px;width:auto;max-width:100%}
.pcard-specs{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11.5px;padding:3px 9px;border-radius:99px;background:var(--surface2);
  border:1px solid var(--border);color:var(--muted);font-weight:600}
.chip.accent{color:var(--accent);border-color:rgba(184,245,58,.35);background:rgba(184,245,58,.08)}
.chip.cyan{color:var(--cyan);border-color:rgba(77,216,255,.3);background:rgba(77,216,255,.07)}
.chip.violet{color:var(--violet);border-color:rgba(167,139,250,.3);background:rgba(167,139,250,.08)}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;
  border-top:1px solid var(--border)}
.price{font-size:18px;font-weight:850}
.price small{font-size:12px;color:var(--muted);font-weight:500}
.pro-badge{position:absolute;top:12px;right:-4px;background:var(--violet);color:#120c22;
  font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:6px 0 0 6px;letter-spacing:.03em}
.compare-toggle{position:absolute;top:12px;left:12px;width:26px;height:26px;border-radius:8px;
  border:1px solid var(--border2);background:var(--surface2);color:var(--muted);font-size:14px;
  display:grid;place-items:center;z-index:2}
.compare-toggle:hover{border-color:var(--accent-dim);color:var(--accent)}
.compare-toggle.in{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---------- database layout ---------- */
.db-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;padding:34px 0}
/* the right-hand column holds the card grid; it must be allowed to shrink below
   the grid's intrinsic min-content width, else the inner auto-fill grid blows
   the column out and the cards collapse into one full-width "bugged" list */
.db-layout > *{min-width:0}
.filters{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;align-self:start;position:sticky;top:80px;max-height:calc(100vh - 100px);overflow:auto}
.filters h4{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  margin:16px 0 9px;font-weight:800}
.filters h4:first-child{margin-top:0}
.filter-opt{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px;color:var(--text);cursor:pointer}
.filter-opt input{accent-color:var(--accent);width:15px;height:15px}
.filter-opt .count{margin-left:auto;color:var(--faint);font-size:11.5px}
.range-row{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.range-row input[type=number]{width:70px;background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;color:var(--text);padding:6px 8px;font-size:13px}
.db-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.db-toolbar .result-count{color:var(--muted);font-size:13.5px;margin-right:auto}
/* pros page: labelled filter dropdowns */
.pro-filter{display:inline-flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.pro-filter select{min-width:170px;text-transform:none;letter-spacing:normal;font-weight:600;font-size:14px}
select,.select{background:var(--surface);border:1px solid var(--border2);color:var(--text);
  padding:9px 12px;border-radius:10px;font-size:13.5px;font-weight:600;outline:none}
.db-search{flex:1;min-width:200px;background:var(--surface);border:1px solid var(--border2);
  border-radius:10px;padding:10px 14px;color:var(--text);font-size:14px;outline:none}
.db-search:focus{border-color:var(--accent-dim)}
.clear-btn{background:none;border:none;color:var(--muted);font-size:12.5px;text-decoration:underline;margin-top:12px}

/* ---------- product detail ---------- */
.crumbs{font-size:13px;color:var(--muted);padding:22px 0 0}
.crumbs a:hover{color:var(--accent)}
.detail{display:grid;grid-template-columns:440px minmax(0,1fr);gap:38px;padding:22px 0 50px}
.detail > *{min-width:0}
.detail-gallery{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;gap:16px;align-self:start;position:sticky;top:82px}
.dim-label{font-size:12px;color:var(--muted);text-align:center}
.detail h1{font-size:30px;font-weight:850;letter-spacing:-.02em;line-height:1.15}
.detail .brand-line{color:var(--muted);font-size:15px;margin:6px 0 14px}
.rating-line{display:flex;gap:14px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.buy-box{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);
  padding:20px;margin:18px 0}
.buy-box .price-big{font-size:32px;font-weight:850}
.buy-box .row{display:flex;gap:10px;margin-top:14px}
.aff-note{font-size:11.5px;color:var(--faint);margin-top:10px;line-height:1.5}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.pc-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}
.pc-box h4{font-size:13px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;font-weight:800}
.pc-box.pros h4{color:var(--green)} .pc-box.cons h4{color:var(--red)}
.pc-box li{list-style:none;font-size:14px;padding:5px 0 5px 22px;position:relative;color:var(--text)}
.pc-box.pros li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:800}
.pc-box.cons li::before{content:'—';position:absolute;left:0;color:var(--red);font-weight:800}
.spec-table{width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.spec-table th,.spec-table td{padding:12px 16px;text-align:left;font-size:14px;border-bottom:1px solid var(--border)}
.spec-table tr:last-child td{border-bottom:none}
.spec-table th{width:38%;color:var(--muted);font-weight:600;background:var(--bg2)}
.detail h2{font-size:19px;font-weight:800;margin:28px 0 14px}
.pro-using{display:flex;flex-wrap:wrap;gap:10px}
.pro-pill{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);
  border-radius:99px;padding:6px 14px 6px 8px;font-size:13.5px;font-weight:600}
.pro-pill:hover{border-color:var(--violet)}
.pro-avatar{width:26px;height:26px;border-radius:50%;background:var(--violet);color:#120c22;
  display:grid;place-items:center;font-weight:800;font-size:12px}
/* Player headshot / team logo image wrappers */
.pro-avatar-wrap{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  display:grid;place-items:center;font-weight:800;font-size:12px;background:var(--surface2);color:#fff}
.pro-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.pro-avatar-wrap.avatar-fallback{display:grid;place-items:center;font-weight:800}
.pro-avatar-wrap.lg{width:46px;height:46px;font-size:18px}
.team-logo-wrap{width:28px;height:28px;border-radius:7px;overflow:hidden;flex:0 0 auto;display:grid;
  place-items:center;font-weight:800;font-size:14px;background:var(--surface2);color:#fff}
.team-logo-img{width:100%;height:100%;object-fit:contain;padding:3px;display:block}
.team-logo-wrap.lg{width:64px;height:64px;border-radius:14px}
.team-logo-wrap.avatar-fallback{display:grid;place-items:center;font-weight:800}
/* Brand-logo placeholder media (products without an official photo) */
.brand-media{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:18px;
  background:
    radial-gradient(120% 90% at 50% 0%, hsla(var(--b-hue,140),55%,45%,.16), transparent 60%),
    linear-gradient(160deg, hsl(var(--b-hue,140),26%,14%), hsl(calc(var(--b-hue,140) + 40),22%,9%));}
.brand-media .brand-logo-img{width:min(150px,64%);height:auto;max-height:58%;object-fit:contain;
  display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));opacity:.95}
.brand-media-name{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:hsla(var(--b-hue,140),60%,72%,.92)}
/* brand initial fallback when the logo file is missing */
.brand-media.no-brand-logo::before{content:attr(data-b-init);position:absolute;top:50%;left:50%;
  transform:translate(-50%,-62%);font-size:52px;font-weight:800;font-family:Arial,sans-serif;
  color:hsla(var(--b-hue,140),60%,62%,.5)}
.brand-media.no-brand-logo .brand-logo-img{display:none}
.pro-pill .team{color:var(--muted);font-weight:500;font-size:12px}

/* ---------- compare ---------- */
.compare-bar{position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--surface2);
  border-top:1px solid var(--border2);padding:12px 20px;display:none;
  box-shadow:0 -8px 30px rgba(0,0,0,.5)}
.compare-bar.open{display:block}
.compare-bar-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:12px}
.compare-items{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.cb-item{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border2);
  border-radius:9px;padding:6px 10px;font-size:13px;font-weight:600}
.cb-item button{background:none;border:none;color:var(--muted);font-size:15px;line-height:1}
.cb-item button:hover{color:var(--red)}
.compare-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.cmp-table{border-collapse:collapse;width:100%;min-width:700px}
.cmp-table th,.cmp-table td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);font-size:14px;vertical-align:middle}
.cmp-table th:last-child,.cmp-table td:last-child{border-right:none}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table .row-label{text-align:left;font-weight:700;color:var(--muted);background:var(--bg2);
  white-space:nowrap;width:170px}
.cmp-table th{background:var(--bg2);min-width:180px}
.cmp-table .cmp-name{font-weight:750;font-size:15px}
.cmp-table .cmp-shape-cell svg{height:118px;width:auto;margin:4px auto 0}
.btn-ghost.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.cmp-table .cmp-brand{font-size:12px;color:var(--muted)}
.cmp-best{color:var(--accent);font-weight:800;position:relative}
.cmp-best::after{content:' ★';font-size:10px}
.cmp-diff{background:rgba(184,245,58,.05)}
.cmp-shape-cell{padding:10px}
.cmp-empty{padding:60px;text-align:center;color:var(--muted)}
.cmp-empty .big{font-size:44px;margin-bottom:14px}

/* ---------- finder quiz ---------- */
.finder-wrap{max-width:760px;margin:0 auto;padding:40px 20px 70px}
.finder-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:34px}
.finder-progress{display:flex;gap:6px;margin-bottom:28px}
.finder-progress .seg{height:5px;flex:1;border-radius:99px;background:var(--border)}
.finder-progress .seg.done{background:var(--accent)}
.finder-q{font-size:24px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.finder-sub{color:var(--muted);font-size:14.5px;margin-bottom:24px}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt-grid.three{grid-template-columns:repeat(3,1fr)}
.opt-card{background:var(--bg2);border:1.5px solid var(--border2);border-radius:14px;padding:18px;
  text-align:left;transition:.15px;color:var(--text)}
.opt-card:hover{border-color:var(--accent-dim);transform:translateY(-2px)}
.opt-card.sel{border-color:var(--accent);background:rgba(184,245,58,.08)}
.opt-card .emoji{font-size:26px;margin-bottom:8px}
.opt-card b{display:block;font-size:15px;margin-bottom:3px}
.opt-card span{font-size:12.5px;color:var(--muted);line-height:1.45}
.opt-card input[type=range]{width:100%;accent-color:var(--accent);margin:14px 0 6px}
.measure-row{display:flex;gap:12px}
.measure-row .opt-card{flex:1}
.measure-val{font-size:26px;font-weight:850;color:var(--accent);text-align:center}
.finder-nav{display:flex;justify-content:space-between;margin-top:26px}
.match-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;margin-bottom:14px;display:grid;grid-template-columns:110px 1fr auto;gap:18px;align-items:center}
.match-rank{font-size:30px;font-weight:850;color:var(--faint);text-align:center}
.match-score{text-align:center}
.match-score .pct{font-size:26px;font-weight:850;color:var(--accent)}
.match-score .lbl{font-size:11px;color:var(--muted)}
.match-bar{height:7px;border-radius:99px;background:var(--bg2);overflow:hidden;margin-top:6px}
.match-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.match-card h3{font-size:17px;font-weight:750}
.match-card .why{font-size:12.5px;color:var(--muted);margin-top:4px}
.retake{margin-top:20px;text-align:center}

/* ---------- shape lab ---------- */
.shapelab-hint{color:var(--muted);font-size:14px;text-align:center;margin-bottom:20px}
.shape-picker{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.shape-pill{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border2);
  border-radius:99px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.shape-pill:hover{border-color:var(--accent-dim)}
.shape-pill .x{color:var(--muted)}
.shape-pill.sel{border-color:var(--accent);background:rgba(184,245,58,.1);color:var(--accent)}
.overlay-stage{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;display:grid;place-items:center;margin-bottom:18px}
.overlay-legend{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.legend-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.legend-swatch{width:16px;height:16px;border-radius:5px}
.shape-toggle-row{display:flex;gap:10px;justify-content:center;margin-top:14px}
.dim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:26px}
.dim-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px}
.dim-card h4{font-size:13.5px;font-weight:750;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.dim-card .dot{width:10px;height:10px;border-radius:50%}
.dim-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:3px 0}
.dim-row b{color:var(--text)}

/* ---------- pros ---------- */
.pro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pro-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;transition:.18s;cursor:pointer}
.pro-card:hover{border-color:var(--violet);transform:translateY(-2px)}
.pro-card-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.pro-avatar-wrap.lg{width:46px;height:46px;font-size:18px}
.pro-card-head b{font-size:17px;font-weight:800}
.pro-card-head .meta{font-size:12.5px;color:var(--muted)}
.game-tag{font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:6px;
  background:rgba(77,216,255,.12);color:var(--cyan);text-transform:uppercase}
/* official game-logo tile (replaces accent letter tiles) — white tile so the
   real web-served logo (incl. dark wordmarks) reads on the dark theme */
.game-icon-tile{display:inline-grid;place-items:center;border-radius:24%;flex:0 0 auto;overflow:hidden;
  background:#fff;color:#0c0f08;font-weight:900;line-height:1;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--gi,var(--accent)) 55%,transparent),
             0 2px 10px rgba(0,0,0,.25)}
/* official logos fill the tile tightly (small safety padding) so they read
   as proper game badges rather than floating in a big white box */
.game-icon-tile img{width:100%;height:100%;object-fit:contain;padding:7%;display:block}
/* wide wordmarks (CS2 / VALORANT / Apex): shave horizontal padding so the
   wordmark is large and legible; vertical padding keeps it from clipping */
.game-icon-tile img.wide{padding:12% 4%}
.game-icon-tile span{display:grid;place-items:center;width:100%;height:100%}
.entity-head .eh-avatar.game-icon-tile{width:96px;height:96px;border-radius:24px;font-size:40px}
.gear-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-top:1px dashed var(--border)}
.gear-row .k{color:var(--muted)}
.gear-row .v{font-weight:650;text-align:right;max-width:60%}
.gear-row .v a:hover{color:var(--accent)}
.settings-strip{display:flex;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
  font-size:12px;color:var(--muted);flex-wrap:wrap}
.settings-strip b{color:var(--text);font-size:13px}

/* pro detail modal */
.modal-bg{position:fixed;inset:0;background:rgba(5,7,11,.75);backdrop-filter:blur(4px);
  z-index:80;display:none;place-items:center;padding:20px}
.modal-bg.open{display:grid}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:18px;max-width:640px;
  width:100%;max-height:88vh;overflow:auto;padding:30px;position:relative}
.modal .close{position:absolute;top:16px;right:16px;background:var(--surface2);border:1px solid var(--border2);
  width:34px;height:34px;border-radius:10px;color:var(--muted);font-size:16px}
.modal .close:hover{color:var(--red)}
.modal h2{font-size:26px;font-weight:850}
.modal .sub{color:var(--muted);margin:4px 0 18px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);background:var(--bg2);margin-top:60px;padding:44px 0 30px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.1fr;gap:26px;margin-bottom:28px}
.foot-grid h5{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:12px;font-weight:800}
.foot-grid a{display:block;padding:4px 0;font-size:14px;color:var(--text);opacity:.8}
.foot-grid a:hover{color:var(--accent);opacity:1}
.foot-brand p{color:var(--muted);font-size:13.5px;margin-top:10px;max-width:340px}
.affiliate-disclosure{font-size:12px;color:var(--faint);border-top:1px solid var(--border);
  padding-top:20px;line-height:1.6}
.foot-bottom{display:flex;justify-content:space-between;margin-top:18px;font-size:12.5px;color:var(--faint);flex-wrap:wrap;gap:8px}

/* ---------- misc ---------- */
.page-head{padding:40px 0 8px}
.page-head h1{font-size:34px;font-weight:850;letter-spacing:-.02em}
.page-head p{color:var(--muted);margin-top:8px;font-size:15.5px;max-width:640px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:99px;background:var(--surface2);border:1px solid var(--border2);color:var(--muted)}
.badge.wired{color:var(--cyan);border-color:rgba(77,216,255,.3)}
.badge.wireless{color:var(--accent);border-color:rgba(184,245,58,.35)}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--accent);
  color:var(--accent-ink);padding:11px 22px;border-radius:99px;font-weight:700;font-size:14px;
  opacity:0;transition:.25s;z-index:90;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.empty-state{text-align:center;padding:70px 20px;color:var(--muted)}
.empty-state .big{font-size:46px;margin-bottom:14px}
.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.feature .emoji{font-size:26px;margin-bottom:10px}
.feature h3{font-size:16px;font-weight:750;margin-bottom:6px}
.feature p{font-size:13.5px;color:var(--muted);line-height:1.55}
.trend-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  background:rgba(167,139,250,.15);color:var(--violet);padding:3px 9px;border-radius:99px;margin-bottom:8px}

.nav-toggle{display:none;background:var(--surface2);border:1px solid var(--border);color:var(--text);
  width:40px;height:40px;border-radius:10px;font-size:18px;cursor:pointer;flex:0 0 auto}

@media(max-width:960px){
  .db-layout{grid-template-columns:1fr}
  .filters{position:static;max-height:none}
  .detail{grid-template-columns:1fr}
  .detail-gallery{position:static}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .feature-strip{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .match-card{grid-template-columns:1fr;text-align:center}

  /* mobile nav */
  .nav-toggle{display:inline-grid;place-items:center;margin-left:10px}
  .nav-inner{gap:12px}
  .nav-search input{width:140px}
  .nav-search input:focus{width:160px}
  .nav-links{display:none;position:absolute;top:62px;left:0;right:0;z-index:60;background:var(--surface2);
    flex-direction:column;gap:2px;padding:10px;border-bottom:1px solid var(--border2);box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px;border-radius:9px;font-size:15px}
  .nav-links .nav-drop{position:static;border:none;box-shadow:none;background:transparent;
    display:flex;flex-direction:column;padding:0 0 6px 16px;opacity:1;visibility:visible;transform:none;width:auto}
  .nav-links .nav-drop a{padding:8px 14px;font-size:14px;color:var(--muted)}
  .nav-links .has-drop > a .caret{display:none}
  .nav-links .gd-meta{color:var(--faint)}

  /* pro gear leaderboard: stack on phones */
  .lb-barwrap{padding:16px 12px}
  .lb-row{flex-wrap:wrap;gap:10px 12px;padding:12px}
  .lb-row:hover{transform:none}
  .lb-rank{width:24px;font-size:18px}
  .lb-thumb{width:52px;height:40px}
  .lb-info{flex:1 1 calc(100% - 96px);min-width:0}
  .lb-info .nm{font-size:14px}
  .lb-count{order:5;width:auto;margin-left:auto;text-align:right}
  .lb-count b{font-size:18px;display:inline}
  .lb-count span{margin-left:4px}
  .lb-avatars{order:6;width:100%;margin-top:2px}
  .lb-row .btn{order:7;width:100%;justify-content:center;margin-top:2px}

  /* entity / profile header tweaks */
  .entity-head{padding:22px 18px;gap:16px}
  .entity-head .eh-avatar,.entity-head .eh-avatar.game-icon-tile{width:72px;height:72px;font-size:30px;border-radius:18px}

  /* hero */
  .hero-stats{gap:22px}
  .hero h1{font-size:30px}
}
@media(max-width:620px){
  .grid,.pro-grid,.game-gear-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .nav-inner{gap:8px}
  .nav-search input{width:96px;padding-left:32px}
  .nav-search input:focus{width:120px}
  .nav-search .ico{left:9px}
  .search-results{position:fixed;left:10px;right:10px;top:56px;width:auto}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{width:100%;justify-content:center}
  .pro-card .settings-strip{font-size:12px}
  .eq-row{flex-wrap:wrap;gap:8px}
  .eq-row .eq-game{width:100%}
}

/* ================= product photography ================= */
.p-media{border-radius:var(--radius-sm);overflow:hidden;background:var(--bg2);
  border:1px solid var(--border);position:relative}
.pcard .p-media{height:150px}
/* Product photos are transparent PNGs/WebPs on dark tiles: use contain + padding
   so the whole product (mice, headsets) is visible and never cropped. */
.p-media > svg{width:100%;height:100%;object-fit:cover;display:block}
.p-media > img{width:100%;height:100%;object-fit:contain;display:block;
  padding:14px;background:radial-gradient(80% 80% at 50% 40%,rgba(255,255,255,.045),transparent 70%)}
.gg-card .p-media > img{padding:10px}
.detail-gallery .p-media > img{padding:26px}
.detail-gallery .p-media{height:320px;border-radius:var(--radius)}
.cmp-media{width:92px;height:62px;margin:8px auto 0;border-radius:9px;overflow:hidden;border:1px solid var(--border)}
.cmp-media svg{width:100%;height:100%;object-fit:cover}
.cmp-media img{width:100%;height:100%;object-fit:contain;padding:6px}
.match-media{width:88px;height:64px;border-radius:10px;overflow:hidden;flex:none;border:1px solid var(--border)}
.match-media svg{width:100%;height:100%;object-fit:cover}
.match-media img{width:100%;height:100%;object-fit:contain;padding:6px}

/* ================= pro gear leaderboard ================= */
.lb-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.lb-bar .lb-label{width:100%;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin:6px 0 2px}
.lb-pill{padding:7px 15px;border-radius:99px;border:1px solid var(--border2);background:var(--surface);
  color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.lb-pill:hover{border-color:var(--accent-dim);color:var(--text)}
.lb-pill.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.lb-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.lb-row{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 16px;transition:.15s}
.lb-row:hover{border-color:var(--border2);transform:translateX(3px)}
.lb-row.top{border-color:rgba(167,139,250,.4)}
.lb-rank{font-size:22px;font-weight:850;color:var(--faint);width:36px;text-align:center;flex:none}
.lb-row.top .lb-rank{color:var(--accent)}
.lb-thumb{width:66px;height:50px;border-radius:9px;overflow:hidden;flex:none;border:1px solid var(--border)}
.lb-thumb svg{width:100%;height:100%;object-fit:cover}
.lb-thumb img{width:100%;height:100%;object-fit:contain;padding:5px}
.lb-info{flex:1;min-width:0}
.lb-info .nm{font-weight:750;font-size:15px}
.lb-info .nm a:hover{color:var(--accent)}
.lb-info .br{font-size:12px;color:var(--muted)}
.lb-count{text-align:center;flex:none;width:86px}
.lb-count b{font-size:24px;font-weight:850;color:var(--violet);display:block;line-height:1}
.lb-count span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.lb-avatars{display:flex;flex:none;width:120px}
.lb-avatars .pro-avatar,.lb-avatars .pro-avatar-wrap{margin-left:-7px;border:2px solid var(--surface);width:28px;height:28px;font-size:12px}
.lb-avatars .more{margin-left:-7px;width:28px;height:28px;border-radius:50%;background:var(--surface2);
  border:2px solid var(--surface);color:var(--muted);display:grid;place-items:center;font-size:11px;font-weight:700}
.lb-row .btn{flex:none}
.lb-barwrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}

/* pro ribbon on product page */
.pro-ribbon{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(90deg,rgba(167,139,250,.22),rgba(184,245,58,.12));
  border:1px solid var(--violet);color:var(--text);font-weight:800;font-size:14px;padding:10px 16px;border-radius:12px;margin:4px 0 16px}
.pro-ribbon .rk{color:var(--violet);font-size:16px}

/* game stat cards */
.game-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:8px 0 34px}
.game-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;
  display:flex;gap:14px;align-items:center;transition:.15s}
.game-stat:hover{border-color:var(--cyan)}
.gs-media{width:78px;height:58px;border-radius:9px;overflow:hidden;flex:none;border:1px solid var(--border)}
.gs-media svg{width:100%;height:100%;object-fit:cover}
.gs-media img{width:100%;height:100%;object-fit:contain;padding:5px}
.game-stat .gs-game{font-size:11.5px;color:var(--cyan);font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.game-stat b{font-size:14px;display:block;margin:2px 0}
.game-stat .gs-meta{font-size:12px;color:var(--muted);line-height:1.4}

/* pro pills on product page show game */
.pro-pill .game{font-size:10px;color:var(--cyan);font-weight:800;margin-left:4px}

/* ============ media badge fix (badge lives inside the photo box) ============ */
.p-media{position:relative}
.p-media .pro-badge{top:10px;right:0;z-index:3;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.p-media .compare-toggle{top:10px;left:10px;z-index:3}

/* ============ games nav dropdown ============ */
.nav-links .has-drop{position:relative}
.nav-drop{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:240px;background:var(--surface2);
  border:1px solid var(--border2);border-radius:14px;padding:8px;box-shadow:var(--shadow);z-index:60}
/* invisible bridge across the 6px trigger→menu gap so a diagonal cursor keeps :hover alive */
.nav-drop::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px;background:transparent}
.nav-links .has-drop:hover .nav-drop,.nav-links .has-drop:focus-within .nav-drop{display:block}
/* keep the trigger itself hoverable over the whole move */
.nav-links .has-drop > a{padding-bottom:2px}
.nav-drop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--text);
  font-size:14px;font-weight:600;white-space:nowrap}
.nav-drop a:hover{background:var(--surface);color:var(--text)}
.nav-drop .gd-emoji{font-size:18px}
.nav-drop .gd-meta{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}
.nav-drop .gd-sep{height:1px;background:var(--border);margin:6px 8px}

/* ============ social buttons ============ */
.social-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.soc-btn{display:inline-flex;align-items:center;gap:9px;background:var(--surface2);border:1px solid var(--border2);
  border-radius:10px;padding:9px 16px;font-size:13.5px;font-weight:700;color:var(--text);transition:.15s}
.soc-btn:hover{border-color:var(--accent-dim);transform:translateY(-2px)}
.soc-btn .glyph{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff}

/* ============ profile / team / game headers ============ */
.entity-head{border-radius:18px;padding:30px;margin-bottom:24px;border:1px solid var(--border);
  background:var(--surface);position:relative;overflow:hidden;display:flex;gap:24px;align-items:center}
.entity-head::before{content:'';position:absolute;top:-60%;right:-10%;width:420px;height:420px;border-radius:50%;
  background:var(--eh,#b8f53a);opacity:0.10;filter:blur(10px)}
.entity-head .eh-avatar{width:96px;height:96px;border-radius:24px;display:grid;place-items:center;font-size:40px;
  font-weight:900;color:#0c0f08;flex:none;position:relative;z-index:1;background:var(--eh,#b8f53a)}
.entity-head .eh-avatar.round{border-radius:50%}
.entity-head .eh-avatar.eh-img{padding:0;background:transparent}
.entity-head .eh-avatar.eh-img .team-logo-wrap.lg,.entity-head .eh-avatar.eh-img .team-logo-wrap{
  width:100%;height:100%;border-radius:12px}
.entity-head .eh-avatar.round.eh-img .pro-avatar-wrap.lg{width:100%;height:100%}
.team-logo-wrap.card{width:40px;height:40px;border-radius:9px;font-size:17px}
.team-logo-wrap.lg{width:64px;height:64px;border-radius:16px}
/* team logo on the player profile panel (52px slot) */
.player-team-logo{flex:0 0 auto;width:52px;height:52px;display:inline-grid;place-items:center}
.player-team-logo .team-logo-wrap.lg{width:52px;height:52px;border-radius:12px}
.player-team-logo .team-logo-img{padding:4px}
.mini-card{display:flex;align-items:center;gap:12px}
.entity-head h1{font-size:34px;font-weight:850;letter-spacing:-.02em;position:relative;z-index:1;line-height:1.1}
.entity-head .eh-sub{color:var(--muted);margin-top:6px;position:relative;z-index:1;font-size:14.5px}
.entity-head .eh-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;position:relative;z-index:1}
.tag-link{display:inline-flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--border2);
  border-radius:99px;padding:6px 14px;font-weight:700;font-size:13.5px}
.tag-link:hover{border-color:var(--accent-dim)}
.tag-link .dot{width:8px;height:8px;border-radius:50%}

/* ============ player loadout ============ */
.profile-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}

/* right column = gear-col: gear -> team -> lol keybinds -> fortnite keybinds -> viewmodel -> map */
.profile-grid > div:nth-child(2) .panel:has(.gear-load), .gear-col .panel:has(.gear-load){order:1}
.profile-grid .team-panel, .gear-col .team-panel{order:2}
.profile-grid .lol-keybind-panel, .gear-col .lol-keybind-panel{order:3}
.profile-grid .fortnite-keybind-panel, .gear-col .fortnite-keybind-panel{order:4}
.profile-grid .viewmodel-panel, .gear-col .viewmodel-panel{order:5}
.profile-grid .map-panel, .gear-col .map-panel{order:6}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.panel h2{font-size:18px;font-weight:800;margin-bottom:14px}
.gear-load{display:flex;gap:13px;align-items:center;padding:10px;border-radius:12px;transition:.15s}
.gear-load:hover{background:var(--bg2)}
.gear-load .gl-ico{font-size:22px;width:30px;text-align:center;flex:none}
.gear-load .gl-media{width:66px;height:48px;border-radius:8px;overflow:hidden;flex:none;border:1px solid var(--border)}
.gear-load .gl-media svg{width:100%;height:100%;object-fit:cover}
.gear-load .gl-media img{width:100%;height:100%;object-fit:contain;padding:5px}
.gear-load .gl-name{font-weight:700;font-size:14px}
.gear-load .gl-name a:hover{color:var(--accent)}
.gear-load .gl-brand{font-size:12px;color:var(--muted)}
.gear-load .btn{margin-left:auto;flex:none}

/* ============ teams & teammates ============ */
.teammate-grid,.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.mini-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;transition:.15s}
.mini-card:hover{border-color:var(--accent-dim);transform:translateY(-2px)}
.mini-card b{font-size:15px}
.mini-card .mc-sub{font-size:12px;color:var(--muted)}
.mini-card .game-tag{margin-left:auto}
.team-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.team-stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}
.team-stat b{font-size:26px;font-weight:850;color:var(--accent);display:block}
.team-stat span{font-size:12px;color:var(--muted)}

/* game top-gear cards */
.game-gear-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.gg-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  transition:.15s;display:flex;flex-direction:column}
.gg-card:hover{border-color:var(--border2);transform:translateY(-3px)}
.gg-card .gg-cat{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  padding:10px 14px 0}
.gg-card .p-media{border:none;border-radius:0;border-bottom:1px solid var(--border);height:130px}
.gg-card .gg-body{padding:12px 14px;flex:1;display:flex;flex-direction:column;gap:6px}
.gg-card .gg-name{font-weight:750;font-size:14px;line-height:1.3}
.gg-card .gg-count{font-size:12.5px;color:var(--violet);font-weight:700}
.gg-card .btn{margin-top:auto}

@media(max-width:960px){
  .profile-grid{grid-template-columns:1fr}
  .entity-head{flex-direction:column;text-align:center}
  .entity-head .eh-tags{justify-content:center}
}

/* ============ tools ============ */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;
  transition:.18s;display:block}
.tool-card:hover{border-color:var(--accent-dim);transform:translateY(-3px)}
.tool-card .emoji{font-size:30px;margin-bottom:12px}
.tool-card h3{font-size:17px;font-weight:800;margin-bottom:6px}
.tool-card p{font-size:13.5px;color:var(--muted);line-height:1.5}

.click-area{border-radius:var(--radius);border:2px solid var(--border2);background:var(--surface);
  height:300px;display:grid;place-items:center;cursor:pointer;user-select:none;text-align:center;transition:.12s;
  background-image:radial-gradient(600px 200px at 50% 120%, rgba(184,245,58,.08), transparent)}
.click-area:hover{border-color:var(--accent-dim)}
.click-area:active,.click-area.running{border-color:var(--accent);background-color:rgba(184,245,58,.05)}
.click-area .ca-big{font-size:46px;font-weight:900;color:var(--accent);line-height:1}
.click-area .ca-label{color:var(--muted);font-size:14px;margin-top:10px}
.click-area .ca-timer{font-size:18px;color:var(--text);font-weight:700;margin-top:6px}
.click-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:18px}
.click-stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center}
.click-stat b{font-size:30px;font-weight:850;display:block;color:var(--text)}
.click-stat span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.click-stat.good b{color:var(--green)} .click-stat.warn b{color:var(--amber)} .click-stat.bad b{color:var(--red)}
.click-result{margin-top:16px;padding:14px 16px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.5}
.click-result.ok{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.35);color:var(--green)}
.click-result.fail{background:rgba(255,93,108,.1);border:1px solid rgba(255,93,108,.35);color:var(--red)}

.calc-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:8px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:7px;text-transform:uppercase;letter-spacing:.05em}
.field input,.field select{width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:10px;
  color:var(--text);padding:12px 14px;font-size:15px;font-weight:600;outline:none}
.field input:focus,.field select:focus{border-color:var(--accent-dim)}
.calc-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
.eq-row{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;margin-bottom:8px}
.eq-row .eq-game{font-weight:800;width:150px;flex:none}
.eq-row .eq-sens{font-size:20px;font-weight:850;color:var(--accent);font-variant-numeric:tabular-nums}
.eq-row .eq-emoji{font-size:20px}

/* nav dropdown caret */
.nav-links .has-drop > a{display:inline-flex;align-items:center;gap:5px}
.nav-links .caret{font-size:9px;color:var(--muted)}
.nav-links .has-drop:hover > a .caret{color:var(--accent)}
/* keep the Tools/Games trigger highlighted when inside */
.nav-links .has-drop > a.active{color:var(--accent);background:rgba(184,245,58,.1)}

/* ============ BLOG ============ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.blog-grid{grid-template-columns:1fr}}
.blog-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:22px;text-decoration:none;color:inherit;transition:.16s;position:relative;overflow:hidden}
.blog-card:hover{border-color:var(--accent-dim);transform:translateY(-3px);box-shadow:var(--shadow)}
.blog-card-emoji{font-size:30px}
.blog-card-tag{position:absolute;top:16px;right:16px}
.blog-card h2{font-size:17px;font-weight:800;line-height:1.3}
.blog-card p{color:var(--muted);font-size:13.5px;line-height:1.55;flex:1}
.blog-card-meta{font-size:12px;color:var(--muted);font-weight:600}
.blog-article .blog-title{font-size:32px;font-weight:850;letter-spacing:-.02em;line-height:1.15;margin:8px 0 10px}
.blog-meta{color:var(--muted);font-size:13.5px;padding-bottom:20px;border-bottom:1px solid var(--border);margin-bottom:24px}
.blog-body .blog-h2{font-size:23px;font-weight:850;margin:30px 0 12px}
.blog-body .blog-h3{font-size:18px;font-weight:800;margin:22px 0 10px}
.blog-body .blog-p{color:var(--text);font-size:15.5px;line-height:1.75;margin:0 0 16px}
.blog-list{margin:0 0 18px;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:9px}
.blog-list li{position:relative;padding-left:24px;color:var(--text);font-size:15px;line-height:1.6}
.blog-list li::before{content:'▸';position:absolute;left:4px;color:var(--accent);font-weight:900}
.blog-table-wrap{overflow-x:auto;margin:18px 0}
.blog-table{min-width:420px}
.blog-cta{margin-top:34px;background:linear-gradient(135deg,rgba(184,245,58,.12),rgba(77,216,255,.07));
  border:1px solid var(--border2);border-radius:16px;padding:28px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.blog-cta h3{font-size:20px;font-weight:850}
.blog-cta p{color:var(--muted);font-size:14px;margin-bottom:8px}
.blog-cta .btn{margin:2px}
.blog-nav{display:flex;justify-content:space-between;gap:14px;margin-top:30px;padding-top:20px;border-top:1px solid var(--border);
  font-size:13.5px;font-weight:600;flex-wrap:wrap}
.blog-nav a{color:var(--muted);text-decoration:none}
.blog-nav a:hover{color:var(--accent)}

/* ============ double-click test: finished state is locked until Reset ============ */
.click-area.done{border-color:var(--border);opacity:.55;cursor:not-allowed}
.click-area.done:hover{border-color:var(--border)}
.click-area.done .ca-big{color:var(--muted);font-size:34px}


/* First-paint layout — shared by all saved pages and the app. */

      .cmp-catbtn{cursor:pointer}
      .cmp-catbtn.cmp-active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
      .cmp-catbar{display:flex}
      @media(max-width:640px){.cmp-catbar{flex-direction:column}}
      /* Foldable filter groups on the database pages */
      .filters .filter-group{border-top:1px solid var(--border);padding:10px 0}
      .filters .filter-group:first-of-type{border-top:none}
      .filters .filter-head{width:100%;display:flex;align-items:center;gap:8px;
        background:none;border:none;padding:6px 0;cursor:pointer;text-align:left;
        font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800}
      .filters .filter-head:hover{color:var(--text)}
      .filters .filter-head .chev{margin-left:auto;transition:transform .18s ease;font-size:12px}
      .filters .filter-head.open .chev{transform:rotate(180deg)}
      .filters .filter-body{display:none;padding:2px 0 6px}
      .filters .filter-group.open .filter-body{display:block}
      @media(max-width:960px){.filters{padding:8px 12px}}
      /* Back-to-top button (injected at runtime) */
      .back-top{position:fixed;right:18px;bottom:18px;z-index:90;width:46px;height:46px;border-radius:50%;
        background:var(--accent);color:var(--accent-ink);border:none;font-size:20px;font-weight:800;cursor:pointer;
        box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;
        opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
      .back-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
      .back-top:hover{transform:translateY(-2px)}
      /* Product prev/next nav */
      .pn-nav{display:flex;justify-content:space-between;gap:12px;margin-top:36px;padding-top:22px;
        border-top:1px solid var(--border);font-size:14px}
      .pn-nav a{color:var(--accent);font-weight:700;text-decoration:none;max-width:48%;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .pn-nav a.pn-next{text-align:right;margin-left:auto}
      .pn-nav span{color:var(--muted);font-weight:500}
      .pn-nav .pn-label{display:block;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
      @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;
        transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
      @media(max-width:640px){.back-top{right:14px;bottom:14px}}
      /* Mobile top bar: keep logo mark + ☰ menu + currency toggle all visible.
         The wordmark is dropped on the narrowest widths so the USD/EUR button
         (right of the menu button) never gets clipped out of the bar. */
      @media(max-width:640px){
        .nav-inner{flex-wrap:nowrap;overflow:hidden}
        .logo-word{display:none}
        .nav-search{margin-left:auto;min-width:0}
        .nav-search input{width:96px}
      }
      #curToggle{flex:none;margin-left:10px}
      /* Let the header search shrink so the currency toggle (appended after it)
         always stays inside the bar instead of overflowing on narrower desktops. */
      .nav-search{flex:1 1 150px;min-width:0;max-width:250px}
      .nav-search input{width:100%;max-width:250px}
      /* Stop the search box expanding past the currency toggle on focus: the base
         styles sets input:focus{width:280px}, which pushes it over the USD/EUR
         button. Cap the focus width to its (flexible) container. */
      .nav-search input:focus{width:100%;max-width:100%}
      .nav-inner{gap:16px}
      /* Between the mobile breakpoint (960) and ~1060 the full desktop nav links
         alone are too wide for the bar once the currency toggle is added, so the
         toggle would clip off-screen. Tighten the links a touch to fit. */
      @media(min-width:961px) and (max-width:1060px){
        .nav-inner{gap:10px}
        .nav-links a{padding:7px 8px;font-size:13.5px}
        .nav-search{flex:1 1 130px;max-width:190px}
      }
    
/* The same initial filter layout at build time and runtime, at every width. */
@media(min-width:961px){
  .filters .filter-group.auto-open .filter-body{display:block}
  .filters .filter-group.auto-open .chev{transform:rotate(180deg)}
}
#curToggle{min-width:76px;padding:7px 12px;border-radius:9px;border:1px solid var(--accent);background:var(--surface2);color:var(--text);font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap;flex:none}

/* Game ranking block only; original page layout retained. — SCALED v20260916b slightly smaller */
.game-rankings-only .game-rank-list{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface);
  box-shadow: 0 2px 14px rgba(0,0,0,.05);
}
.game-rankings-only .gr-row{
  display:grid;
  grid-template-columns:110px minmax(0,1.4fr) 132px minmax(0,1fr);
  align-items:center;
  gap:22px;
  padding:24px 26px;
}
.game-rankings-only .gr-row+.gr-row{border-top:1px solid var(--border)}
.game-rankings-only .gr-category svg{
  display:block;
  width:24px;height:24px;
  color:var(--muted);
  margin-bottom:8px
}
.game-rankings-only .gr-category h3{
  font-size:15px;
  font-weight:750;
  margin:0;
  line-height:1.35;
  letter-spacing:-.01em
}
.game-rankings-only .gr-category>a{
  display:inline-block;
  font-size:11px;
  color:var(--muted);
  margin-top:5px;
  font-weight:600
}
.game-rankings-only .gr-category>a:hover{color:var(--game-accent)}

.game-rankings-only .gr-winner{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
  color:var(--text)
}
.game-rankings-only .gr-photo{
  width:110px;height:90px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  border-radius:10px;
  background:var(--bg2);
  overflow:hidden;
  padding:8px;
  border:1px solid var(--border2)
}
.game-rankings-only .gr-photo img,
.game-rankings-only .gr-photo svg{
  width:100%;height:100%;object-fit:contain
}
.game-rankings-only .gr-winner-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0
}
.game-rankings-only .gr-rank-label{
  font-size:9px;
  letter-spacing:.14em;
  color:var(--game-accent);
  font-weight:800;
  text-transform:uppercase
}
.game-rankings-only .gr-winner-copy strong{
  font-size:16px;
  line-height:1.32;
  font-weight:750;
  overflow-wrap:anywhere;
  letter-spacing:-.01em
}
.game-rankings-only .gr-product-link{
  font-size:12px;
  color:var(--muted);
  font-weight:500
}
.game-rankings-only .gr-winner:hover strong,
.game-rankings-only .gr-winner:hover .gr-product-link{color:var(--game-accent)}

.game-rankings-only .gr-usage{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-variant-numeric:tabular-nums
}
.game-rankings-only .gr-usage>strong{
  font-size:32px;
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800
}
.game-rankings-only .gr-usage>strong>span{
  font-size:16px;
  color:var(--muted);
  margin-left:2px;
  font-weight:600
}
.game-rankings-only .gr-usage>span{
  font-size:10px;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.02em
}
.game-rankings-only .gr-usage .gr-bar{
  display:block;
  height:3.5px;
  border-radius:4px;
  background:var(--border2);
  width:104px;
  overflow:hidden;
  margin-top:6px
}
.game-rankings-only .gr-bar i{
  display:block;height:100%;
  background:var(--game-accent);
  border-radius:4px
}

.game-rankings-only .gr-alternatives{
  border-left:1px solid var(--border);
  padding-left:22px;
  min-width:0
}
.game-rankings-only .gr-alternatives-label{
  font-size:9px;
  letter-spacing:.14em;
  color:var(--muted);
  font-weight:800;
  display:block;
  margin-bottom:10px;
  text-transform:uppercase
}
.game-rankings-only .gr-alternatives>a{
  display:grid;
  grid-template-columns:16px minmax(0,1fr) auto;
  gap:8px;
  align-items:baseline;
  font-size:13px;
  line-height:1.5;
  padding:5px 0;
  color:var(--text);
  font-weight:500
}
.game-rankings-only .gr-alternatives>a:hover .gr-alternative-name{color:var(--game-accent)}
.game-rankings-only .gr-position{
  color:var(--muted);
  font-size:10px;
  font-variant-numeric:tabular-nums;
  font-weight:700
}
.game-rankings-only .gr-alternative-name{overflow-wrap:anywhere}
.game-rankings-only .gr-alternative-count{
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  font-size:13px
}
.game-rankings-only .gr-alternative-count>span{
  font-size:9px;
  color:var(--muted);
  font-weight:500
}
.game-rankings-only .gr-no-data{
  font-size:14px;
  color:var(--muted);
  grid-column:2/-1;
  line-height:1.5
}

/* === Responsive: 1100px === */
@media(max-width:1100px){
  .game-rankings-only .gr-row{
    grid-template-columns:92px minmax(0,1.35fr) 108px minmax(0,1fr);
    gap:16px;
    padding:20px 18px
  }
  .game-rankings-only .gr-photo{width:88px;height:76px}
  .game-rankings-only .gr-winner{gap:12px}
  .game-rankings-only .gr-alternatives{padding-left:16px}
  .game-rankings-only .gr-alternative-count>span{display:none}
  .game-rankings-only .gr-winner-copy strong{font-size:15px}
  .game-rankings-only .gr-usage>strong{font-size:28px}
  .game-rankings-only .gr-category h3{font-size:14px}
  .game-rankings-only .gr-alternatives>a{font-size:12.5px}
}

/* === Responsive: 860px === */
@media(max-width:860px){
  .game-rankings-only .gr-row{
    grid-template-columns:84px minmax(0,1fr) 110px;
    gap:12px 20px;
    padding:18px 16px
  }
  .game-rankings-only .gr-alternatives{
    grid-column:2/-1;
    border-left:0;
    border-top:1px solid var(--border);
    padding:12px 0 0;
    margin-top:4px
  }
  .game-rankings-only .gr-alternatives-label{margin-bottom:6px}
  .game-rankings-only .gr-alternatives>a{font-size:12.5px}
  .game-rankings-only .gr-alternative-count>span{display:inline}
  .game-rankings-only .gr-photo{width:80px;height:72px}
  .game-rankings-only .gr-winner-copy strong{font-size:14.5px}
}

/* === Responsive: 600px === */
@media(max-width:600px){
  .game-rankings-only .gr-row{
    grid-template-columns:minmax(0,1fr) 96px;
    gap:14px;
    padding:18px 14px
  }
  .game-rankings-only .gr-category{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    gap:8px
  }
  .game-rankings-only .gr-category svg{width:20px;height:20px;margin:0}
  .game-rankings-only .gr-category h3{font-size:14px}
  .game-rankings-only .gr-category>a{margin:0 0 0 auto;font-size:11px}
  .game-rankings-only .gr-winner{gap:10px}
  .game-rankings-only .gr-photo{width:76px;height:68px;padding:6px;border-radius:8px}
  .game-rankings-only .gr-winner-copy strong{font-size:14px}
  .game-rankings-only .gr-rank-label{font-size:8px}
  .game-rankings-only .gr-usage>strong{font-size:26px}
  .game-rankings-only .gr-usage .gr-bar{width:88px}
  .game-rankings-only .gr-alternatives{grid-column:1/-1}
  .game-rankings-only .gr-alternatives>a{font-size:12.5px}
}

.game-rankings-only a:focus-visible{outline:2px solid var(--game-accent);outline-offset:3px}

/* ---- crosshair panel (player pages) ---- */
.ch-panel .ch-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.ch-preview{border-radius:10px;border:1px solid var(--border);flex:0 0 auto;background:#0d1420}
.ch-code{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;margin:0 0 12px;overflow-x:auto}
.ch-code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  color:var(--accent);white-space:nowrap}
.ch-details{margin:0 0 12px}
.ch-details summary{cursor:pointer;font-size:13px;color:var(--muted);padding:4px 0}
.ch-pre{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;margin:8px 0 0;overflow-x:auto;font-size:12px;line-height:1.6;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}
.ch-note{color:var(--muted);font-size:12.5px;line-height:1.5;margin:12px 2px 0}
.ch-btns{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.ch-figure{margin:0;flex:0 0 auto;display:flex;flex-direction:column;gap:6px;width:168px}
.ch-cap{color:var(--faint);font-size:11px;line-height:1.35}
/* The pro card is a clickable div, so the player's name carries the real link:
   without it /pros/ handed crawlers 1,458 player pages and no way to reach any
   of them. Styled to read as the heading it already was. */
.pc-name{color:inherit;text-decoration:none}
.pc-name:hover{text-decoration:underline}

/* ---------- related guide (product pages) ---------- */
/* Left column of a product page: image card + related guide, pinned as one unit */
.detail-left{display:flex;flex-direction:column;gap:16px;align-self:start;position:sticky;top:82px}
/* align-self:start MUST be overridden: inside a flex column it means "shrink to
   content", which collapsed the image card to 356px instead of the 440px column. */
.detail-gallery{position:static;align-self:stretch}

.guide-callout{display:grid;gap:10px}
.guide-link{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:14px 16px;text-decoration:none;
  transition:border-color .15s,transform .15s}
.guide-link:hover{border-color:var(--accent);transform:translateY(-1px)}
.guide-emoji{font-size:22px;line-height:1.1;grid-row:1}
.guide-text{display:flex;flex-direction:column;gap:3px;min-width:0;grid-row:1}
.guide-text b{color:var(--text);font-size:15px;font-weight:800;line-height:1.3}
.guide-excerpt{color:var(--muted);font-size:12.5px;line-height:1.45}
/* Green CTA - mirrors .btn-primary so it reads as the same kind of affordance */
.guide-cta{grid-column:1/-1;display:flex;align-items:center;justify-content:center;
  margin-top:8px;padding:10px 14px;border-radius:9px;
  background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:14px;
  transition:background .15s,box-shadow .15s}
.guide-link:hover .guide-cta{background:#d0ff5a;box-shadow:0 6px 20px rgba(184,245,58,.3)}

@media(max-width:960px){.detail-left{position:static}}
@media(max-height:820px){.detail-left{position:static}}

/* ---------- related guide: second slot for mobile ----------
   The block renders twice: once in the desktop left column, once in the main
   column between Full specifications and Similar products. Exactly one is ever
   visible, and the hidden one is display:none so it stays out of the a11y tree
   and out of the crawl path. */
.guide-callout.guide-main{display:none;margin-top:28px}
@media(max-width:960px){
  .guide-callout.guide-left{display:none}
  .guide-callout.guide-main{display:grid}
}

/* ---------- FAQ accordion ---------- */
.blog-faq{display:grid;gap:10px;margin:6px 0 20px}
.faq-item{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;transition:border-color .15s}
.faq-item[open]{border-color:var(--accent-dim)}
.faq-q{list-style:none;cursor:pointer;position:relative;
  padding:15px 48px 15px 16px;transition:color .15s}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:''}
.faq-q:hover .faq-h{color:var(--accent)}
.faq-h{margin:0;font-size:15px;font-weight:800;line-height:1.4;
  color:var(--text);transition:color .15s}
.faq-q::after{content:'+';position:absolute;right:16px;top:50%;
  transform:translateY(-50%);font-size:20px;font-weight:800;line-height:1;
  color:var(--accent);transition:transform .2s}
.faq-item[open] .faq-q::after{content:'\2212'}
.faq-a{padding:0 16px 16px;color:var(--muted);font-size:14px;line-height:1.65}
.faq-a a{color:var(--accent);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--accent-dim)}
@media(max-width:960px){
  .faq-q{padding:14px 44px 14px 14px}
  .faq-h{font-size:14.5px}
}

/* ---------- player-profile setting blocks ---------- */
.set-cmd{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.set-cmd .ch-code{margin:0}
.set-cmd .ch-code code{white-space:normal;word-break:break-word;overflow-wrap:anywhere}
.set-cmd .btn{align-self:flex-start}
.panel-sub{color:var(--faint);font-size:11px;line-height:1.35;margin:-8px 2px 15px;max-width:62ch}
/* ==========================================================================
   1) Team block on pro-player pages — alignment fix  (2026-09-13)
   --------------------------------------------------------------------------
   The Team block's header row is generated with an inline style
   (display:flex; align-items:center; ...). That centered the buttons against
   the 52px team logo instead of the team name, and the team's X button sat
   an extra 16px lower (social-row has margin-top:16px).

   This patch:
   1. removes the team's X button,
   2. top-aligns the row so "View team page →" sits on the same line as the
      team name.

   Notes:
   - .player-team-logo only exists in the Team block on player pages, so
     nothing else on the site is affected (the player's own X/Twitch buttons
     in the profile header, and team-page socials, are untouched).
   - The single !important is required only to override the generated inline
     style. :has() is supported by all current browsers.
   - Cleaner long-term: in the page template change
       align-items:center  →  align-items:flex-start
     in the Team block's header div and drop the social-row markup, then you
     can delete this block.
   ========================================================================== */
div:has(> .player-team-logo){align-items:flex-start !important}
.player-team-logo ~ div .soc-btn[href*="x.com"]{display:none}
.player-team-logo ~ div .social-row{margin:0}

/* ==========================================================================
   2) Team pages — remove the 4 stat blocks ("Players tracked", "Mouse of
      choice", "Keyboard of choice", "Headset of choice") that sat above
      "Gear the team runs".  (2026-09-13)
   --------------------------------------------------------------------------
   The info is already shown in the page header ("10 tracked pros" tag) and
   in the "Gear the team runs" section directly below.
   .team-stat-grid only exists on team pages (verified on game/player/pros
   pages too), so this cannot affect anything else.
   Cleaner long-term: delete the whole <div class="team-stat-grid">…</div>
   block from the team page template, then you can drop this rule.
   ========================================================================== */
.team-stat-grid{display:none}
/* Tags must never wrap to two lines again */
.mini-card .game-tag,
.pro-card  .game-tag { white-space:nowrap; }

/* --- 1. tags must never wrap to two lines again --- */
.mini-card .game-tag,
.pro-card  .game-tag { white-space:nowrap; }

/* --- 1. Apex Legends -> APEX ---
   font-size:0 collapses the original "Apex Legends" text; the short label is
   re-added by ::after. display:inline-block is required: without it the tag
   stays a plain inline span, whose background band collapses to just the
   padding around the baseline (font-size:0) and no longer covers the
   ::after text. */
.game-tag[style*="color:#ffc24b"]{
  font-size:0;
  display:inline-block;
  line-height:1.55;
}
.game-tag[style*="color:#ffc24b"]::after{
  content:"APEX";
  font-size:10.5px;
  line-height:1.55;
}

/* --- 1. League of Legends -> LoL (user wants "LoL", not "LOL") --- */
.game-tag[style*="color:#c8aa6e"]{
  font-size:0;
  display:inline-block;
  line-height:1.55;
}
.game-tag[style*="color:#c8aa6e"]::after{
  content:"LoL";
  font-size:10.5px;
  line-height:1.55;
  text-transform:none; /* keep the user's "LoL" casing, override .game-tag's uppercase */
}

/* ============================================================================
   2. "View team page" button stays on the top row
   ----------------------------------------------------------------------------
   The header row of the Team block is the only row on the site that contains
   a .player-team-logo element, so div:has(> .player-team-logo) targets
   exactly that row (1,452 player pages; never used on team/product pages).
   The title/description div gets flex:1 + min-width:0 so it is the part that
   shrinks (with a "…") before the button ever wraps.
   ============================================================================ */
div:has(> .player-team-logo){ flex-wrap:nowrap !important; }
div:has(> .player-team-logo) > div:first-of-type{ flex:1 1 auto; min-width:0; }
div:has(> .player-team-logo) h2{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
div:has(> .player-team-logo) .mc-sub{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
div:has(> .player-team-logo) > div:last-of-type{ flex:0 0 auto; }
div:has(> .player-team-logo) .btn{ white-space:nowrap; }
/* ============================================================================
   EsportSettings — Crosshair Database styles (crosshairs.css)
   Works standalone (variables defined below) and on the live site, where the
   :root block is redundant but harmless. Prefix: xh- / xhd-.
   ========================================================================== */
:root {
  --bg: #0a0d13; --bg2: #0e1219; --surface: #141925; --surface2: #1b2231;
  --border: #232c3d; --border2: #2e3a50;
  --text: #e8edf6; --muted: #8b97ab; --faint: #5b6778;
  --accent: #b8f53a; --accent-dim: #8fc42c; --accent-ink: #0c0f08;
  --cyan: #4dd8ff; --violet: #a78bfa; --red: #ff5d6c; --amber: #ffc24b; --green: #4ade80;
  --radius: 14px; --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.xh-page { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; }
.xh-page * { box-sizing: border-box; }
.xh-wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px 70px; }
.xh-page a { color: var(--cyan); }

/* header */
.xh-hero { padding: 44px 0 10px; text-align: center; }
.xh-hero h1 { font-size: clamp(26px, 4vw, 40px); margin: 0 0 10px; letter-spacing: -0.02em; }
.xh-hero h1 .xh-accent { color: var(--accent); }
.xh-hero p { color: var(--muted); max-width: 640px; margin: 0 auto; line-height: 1.6; font-size: 15px; }
.xh-stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 6px; }
.xh-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  padding: 6px 14px; font-size: 13px; color: var(--muted); }
.xh-stat b { color: var(--text); }

/* star strip */
.xh-stars { margin: 22px 0 6px; }
.xh-stars h2, .xh-how h2, .xh-faq h2 { font-size: 18px; margin: 0 0 12px; }
.xh-star-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.xh-star { flex: 0 0 auto; width: 148px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px; text-align: center; cursor: pointer; transition: .15s; }
.xh-star:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.xh-star svg { width: 100%; height: auto; border-radius: 8px; display: block; }
.xh-star .xh-star-name { font-size: 13px; font-weight: 700; margin-top: 8px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.xh-star .xh-star-sub { font-size: 11px; color: var(--faint); }
.xh-star .xh-star-copy { font-size: 11px; color: var(--accent); font-weight: 700; margin-top: 2px; }

/* controls */
.xh-controls { position: sticky; top: 0; z-index: 30; background: rgba(10, 13, 19, .92);
  backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; margin: 16px 0 18px; }
.xh-tabs { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.xh-tab { border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: 99px; padding: 8px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.xh-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.xh-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.xh-search { flex: 1 1 200px; min-width: 160px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px; outline: none; }
.xh-search:focus { border-color: var(--accent-dim); }
.xh-select { background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 10px; font-size: 13px; outline: none; cursor: pointer;
  max-width: 100%; }
.xh-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 2px 2px 12px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.xh-reset { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 8px;
  padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
.xh-reset:hover { color: var(--text); border-color: var(--border2); }

/* cards */
.xh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.xh-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; display: flex; gap: 12px; transition: border-color .15s; }
.xh-card:hover { border-color: var(--border2); }
.xh-card.flash { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.xh-prev { flex: 0 0 104px; }
.xh-prev svg { width: 104px; height: 104px; border-radius: 10px; border: 1px solid var(--border); display: block; }
.xh-empty-note { font-size: 10.5px; color: var(--amber); margin-top: 4px; line-height: 1.35; }
.xh-info { flex: 1 1 auto; min-width: 0; }
.xh-name { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xh-name a { color: var(--text); text-decoration: none; }
.xh-name a:hover { color: var(--accent); }
.xh-sub { font-size: 12px; color: var(--muted); margin: 1px 0 7px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.xh-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.xh-chip { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 9px;
  background: var(--surface2); border: 1px solid var(--border2); color: var(--muted);
  display: inline-flex; align-items: center; gap: 5px; }
.xh-chip.game-cs2 { color: var(--amber); }
.xh-chip.game-val { color: var(--red); }
.xh-dot-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  border: 1px solid rgba(255, 255, 255, .35); }
.xh-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.xh-btn { border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--border2); background: var(--surface2); color: var(--text);
  text-decoration: none; display: inline-block; }
.xh-btn:hover { border-color: var(--accent-dim); }
.xh-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.xh-btn.primary:hover { filter: brightness(1.06); }
.xh-details { margin-top: 8px; }
.xh-details summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.xh-details summary:hover { color: var(--accent); }
.xh-code { font-family: var(--mono); font-size: 11px; color: var(--accent); background: var(--bg2);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 8px 0;
  overflow-x: auto; white-space: nowrap; }
.xh-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 2px; }
.xh-mini-table th { text-align: left; color: var(--faint); font-weight: 600; padding: 3px 8px 3px 0;
  white-space: nowrap; vertical-align: top; }
.xh-mini-table td { color: var(--text); padding: 3px 0; }
.xh-more-wrap { text-align: center; margin: 26px 0 10px; }
.xh-empty { text-align: center; color: var(--muted); padding: 50px 10px; }

/* how-to + faq */
.xh-how { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 34px 0 8px; }
.xh-how .xh-panel { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; }
.xh-how h3 { margin: 0 0 10px; font-size: 15px; }
.xh-how ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13.5px; line-height: 1.75; }
.xh-how b { color: var(--text); }
.xh-faq { margin: 26px 0 8px; }
.xh-faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 8px; }
.xh-faq summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.xh-faq p { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin: 8px 0 2px; }
.xh-foot { text-align: center; color: var(--faint); font-size: 12.5px; margin-top: 30px; line-height: 1.7; }

/* toast */
.xh-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--surface2); border: 1px solid var(--accent-dim); color: var(--text);
  padding: 10px 20px; border-radius: 99px; font-size: 13.5px; font-weight: 700; opacity: 0;
  pointer-events: none; transition: .2s; z-index: 99; box-shadow: var(--shadow);
  max-width: calc(100vw - 40px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xh-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
  .xh-how { grid-template-columns: 1fr; }
  .xh-grid { grid-template-columns: 1fr; }
  .xh-controls { position: static; }
}
/* NAV-FIX-START v6
   The desktop link row (9 items) plus logo, search and the USD/EUR toggle
   no longer fits below ~1250px: the search crushes to zero, the input keeps
   its 52px minimum and slides UNDER the currency button, and the bar itself
   overflows the viewport. Fix: show the (already existing and proven) mobile
   hamburger menu below 1250px instead of only below 960px. Desktop above
   1250px is untouched. Mirrors the site's own max-width:960px mobile-nav
   rules one-to-one. */
/* Desktop search is ~100px because the 9 top-level links eat the bar. Tighten
   the links (same values the site already uses in its 961-1060 band) to free
   ~110px, doubling the search to ~210px. Hamburger zone untouched. */
@media (min-width:1251px) {
  .nav-links { gap:2px; margin-left:4px; }
  .nav-links a { padding:7px 8px; font-size:13.5px; }
}
@media (min-width:961px) and (max-width:1250px) {
  .nav-toggle { display:inline-grid; place-items:center; margin-left:10px; }
  .nav-inner { gap:12px; }
  .nav-search input { width:100%; max-width:250px; }
  .nav-links { display:none; position:absolute; top:62px; left:0; right:0; z-index:60;
    background:var(--surface2); flex-direction:column; gap:2px; padding:10px;
    border-bottom:1px solid var(--border2); box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px 14px; border-radius:9px; font-size:15px; }
  .nav-links .nav-drop { position:static; border:none; box-shadow:none; background:transparent;
    display:flex; flex-direction:column; padding:0 0 6px 16px; opacity:1; visibility:visible;
    transform:none; width:auto; }
  .nav-links .nav-drop a { padding:8px 14px; font-size:14px; color:var(--muted); }
  .nav-links .has-drop > a .caret { display:none; }
  .nav-links .gd-meta { color:var(--faint); }
}

/* Fix 3 (mobile menu): all 9 parents now own a dropdown (injected by the
   bundle at boot), and below 1250px they used to render as one giant
   unfolded list (47 links, 2500px+ tall). Collapse them; a tap expands one
   at a time (JS toggles .expanded on the parent, accordion style) and the
   caret shows the state. Specificity beats the unscoped desktop
   :hover/:focus-within rule, which also matches on touch. */
@media (max-width:1250px) {
  .nav-links.open .has-drop:not(.expanded) .nav-drop { display:none; }
  .nav-links.open .has-drop.expanded .nav-drop { display:flex; }
  .nav-links.open .has-drop > a .caret { display:inline-block; transition:transform .15s ease; }
  .nav-links.open .has-drop.expanded > a .caret { transform:rotate(180deg); }
}

/* VAL player panels: figure left, code + copy button on one line right.
   Scoped to panels whose code has #chCode (VAL code panels only; CS2 keeps
   its .ch-row design and rows panels have no figure). Stacks on narrow
   screens. */
.ch-panel:has(#chCode) { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 14px; align-items:center; }
.ch-panel:has(#chCode) > h2 { grid-column:1/-1; }
.ch-panel:has(#chCode) > .ch-code { margin:0; min-width:0; }
.ch-panel:has(#chCode) > #chCopy { white-space:nowrap; }
.ch-panel:has(#chCode) > .ch-note { grid-column:1/-1; }
@media (max-width:640px) {
  .ch-panel:has(#chCode) { grid-template-columns:minmax(0,1fr); }
  .ch-panel:has(#chCode) > #chCopy { justify-self:start; }
}

/* Player pages below 960px (single column): two fixes. (1) The profile
   columns and panels are grid/flex items with automatic minimum widths,
   so the crosshair code box and the team header force the page wider
   than the viewport (a 390px phone scrolls sideways to ~520px). Capping
   the minimums lets the code scroll inside its box and the header wrap.
   (2) Gear first: flatten the two columns so the panels become grid
   items, then pull the gear loadout panel above the settings. The
   :not(.panel) guard keeps a directly nested panel from ever being
   unboxed (that would destroy its background). Where display:contents
   is unsupported the columns simply stack in place and only the
   reorder is lost. Desktop is untouched. */
@media (max-width:960px) {
  .profile-grid > div:not(.panel) { display:contents !important; }
  .profile-grid > div { min-width:0; }
  .profile-grid .panel { min-width:0; }
  .profile-grid .panel:has(.gear-load) { order:1; }
  .profile-grid .team-panel { order:2; }
  .profile-grid .lol-keybind-panel { order:3; }
  .profile-grid .fortnite-keybind-panel { order:4; }
  .profile-grid .viewmodel-panel { order:5; }
  .profile-grid .map-panel { order:6; }
  /* left column = all settings panels last (after gear/team/keybinds/viewmodel/map) */
  .profile-grid .settings-col > .panel,
  .profile-grid > div:nth-child(1) > .panel,
  .profile-grid .settings-col .panel,
  .profile-grid > div:nth-child(1) .panel {
    order:10;
  }
  /* ensure settings panels keep DOM order among themselves when they share order 10 */
  .settings-col { display:contents !important; }
  .gear-col { display:contents !important; }
}

/* Teammates below 640px: always a single column. (When the page
   overflows, the widened column lets the 230px minimums fit two across,
   squeezing 4 teammates into a cut-off 2 by 2 with sideways scroll.)
   Desktop and tablet auto-fill are untouched. */
@media (max-width:640px) {
  .teammate-grid { grid-template-columns:1fr; }
}

/* Nav search now also returns teams (up to 13 rows), so cap the dropdown
   height with a scroll instead of letting it grow past the viewport.
   Applies to the hero search too (same class, shorter lists). */
.search-results.open { max-height:70vh; overflow-y:auto; }

/* NAV-FIX-END */