/* Hero heading */
.leaderboard-hero .page-title__heading{
  margin:16px 0 0;
  font-family:"Goldman",sans-serif;
  font-size:clamp(2.6rem,5vw,3.6rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffffff;
}

/* Card header */
.lb-card__header{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
  padding:18px 18px 0;
  margin-bottom:6px;
}
.lb-card__header-search{
  flex:1 1 360px;
  min-width:220px;
}
.lb-search{
  width:100%;
  min-width:0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:#0f0f0f;
  color:#e9e9e9;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  box-sizing:border-box;
}
.lb-card__header-search .lb-search{ max-width:none }
.lb-search:focus{
  background:#141414;
  border-color:rgba(47,195,107,.65);
  box-shadow:0 0 0 3px rgba(47,195,107,.25);
  color:#f5fdf9;
}
.lb-search::selection,
.lb-search::-moz-selection{ background:rgba(47,195,107,.35); color:#041507 }
.lb-card__header-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.lb-card__header-actions .lb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:999px;
  border:1px solid rgba(47,195,107,.75);
  background:linear-gradient(135deg,#2FC36B,#1A8F4B);
  color:#041507;
  font-size:13px;
  font-weight:800;
  letter-spacing:.42px;
  text-transform:uppercase;
  cursor:pointer;
  min-width:0;
  box-shadow:0 12px 26px rgba(47,195,107,.28);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.lb-card__header-actions .lb-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(47,195,107,.38);
  filter:brightness(1.02);
}
.lb-card__header-actions .lb-btn:active{
  transform:translateY(1px);
  box-shadow:0 8px 18px rgba(47,195,107,.32);
}
.lb-card__header-actions .lb-btn:focus-visible{
  outline:3px solid rgba(47,195,107,.55);
  outline-offset:2px;
}
.lb-updated{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(233,233,233,.82);
  font-size:12px;
  font-weight:600;
  letter-spacing:.32px;
  text-transform:uppercase;
}
.lb-updated time{
  font-size:13px;
  font-weight:700;
  color:#ffffff;
  letter-spacing:normal;
  text-transform:none;
  font-variant-numeric:tabular-nums;
}
.lb-updated__label{ opacity:.8 }
.lb-visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Card + grid */
.lb-card{ background:#141414; color:#e9e9e9; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06); box-shadow:0 10px 30px rgba(0,0,0,.35)}
.lb-card__intro{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px 18px 10px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.lb-card__heading{
  margin:0;
  font-family:"Goldman",sans-serif;
  font-size:1.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#ffffff;
}
.lb-card__summary{
  margin:0;
  max-width:760px;
  font-size:1.02rem;
  color:rgba(233,233,233,.78);
}
.lb-alert{ margin:0 18px 18px; padding:12px 16px; border-radius:8px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03);
  color:#f1f1f1; font-size:14px; line-height:1.6 }
.lb-alert--warning{ background:rgba(255,193,7,.12); border-color:rgba(255,193,7,.45); color:#ffd15c }
.lb-alert--error{ background:rgba(220,53,69,.16); border-color:rgba(220,53,69,.55); color:#ff9aa8 }
.lb-alert--info{ background:rgba(47,195,107,.12); border-color:rgba(47,195,107,.5); color:#9fe870 }
.lb-alert:empty{ display:none }
.lb-alert + .lb-alert{ margin-top:-6px }
.lb-head,.lb-row{ display:grid;
  grid-template-columns: 56px minmax(220px,1.6fr) minmax(90px,110px) repeat(5,minmax(72px,96px)) minmax(96px,110px) minmax(120px,140px);
  gap:12px; align-items:center; padding:14px 18px }
.lb-head{ background:linear-gradient(180deg,#1b1b1b,#171717); font-weight:700; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08) }
.lb-row{ position:relative; border-top:1px solid rgba(255,255,255,.06); border-radius:12px; overflow:hidden; transition:transform .2s ease, box-shadow .3s ease }
.lb-row::before{ content:""; position:absolute; inset:4px; border-radius:10px; border:2px solid transparent; opacity:0; pointer-events:none; transition:opacity .3s ease; box-sizing:border-box; z-index:0 }
.lb-row>*{ position:relative; z-index:1 }
.lb-row:nth-child(odd){ background:rgba(255,255,255,.02) }
.lb-row.lb-row--vip,
.lb-row.lb-row--group-vip-plus{ background:rgba(255,215,0,.08); border-top-color:transparent; box-shadow:0 0 28px rgba(255,215,0,.18) }
.lb-row.lb-row--vip::before,
.lb-row.lb-row--group-vip-plus::before{ opacity:1; border-color:rgba(255,215,0,.75); box-shadow:0 0 36px rgba(255,215,0,.22) }
.lb-row.lb-row--mvp,
.lb-row.lb-row--group-mvp{ background:rgba(88,28,135,.28); border-top-color:transparent; box-shadow:0 0 36px rgba(147,51,234,.28) }
.lb-row.lb-row--mvp::before,
.lb-row.lb-row--group-mvp::before{ opacity:1; padding:2px; background:linear-gradient(135deg, rgba(124,58,237,.95), rgba(251,191,36,.95)); border-radius:10px; box-shadow:0 0 42px rgba(124,58,237,.32); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude }
.lb-row.lb-row--elite,
.lb-row.lb-row--group-elite{ background:rgba(47,195,226,.2); border-top-color:transparent; box-shadow:0 0 34px rgba(47,195,226,.28) }
.lb-row.lb-row--elite::before,
.lb-row.lb-row--group-elite::before{ opacity:1; padding:2px; background:linear-gradient(135deg, rgba(47,195,226,.25), rgba(111,224,255,.22)); border-radius:10px; box-shadow:0 0 40px rgba(47,195,226,.3); border-color:rgba(111,224,255,.75) }
.lb-row.lb-row--mvp>*,
.lb-row.lb-row--group-mvp>*,
.lb-row.lb-row--elite>*,
.lb-row.lb-row--group-elite>*,
.lb-row.lb-row--vip>*,
.lb-row.lb-row--group-vip-plus>*{ position:relative; z-index:1 }

.lb-row__summary,
.lb-row__details{ display:contents }
.lb-row__toggle{ display:none; background:none; border:none; padding:0; color:inherit; font:inherit; cursor:pointer }
.lb-row__toggle:focus-visible{ outline:2px solid rgba(47,195,107,.75); outline-offset:2px }
.lb-row__toggle-text{ pointer-events:none }
.lb-row__toggle-icon{ display:none }

.lb-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px 18px 18px }
.lb-filters{ display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:0 }
.lb-filter{ padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.1);
  background:#0f0f0f; color:#dcdcdc; font-size:13px; text-transform:uppercase; letter-spacing:.4px;
  cursor:pointer; transition:all .2s ease }
.lb-filter.on{ background:#2FC36B; color:#041507; border-color:#2FC36B; box-shadow:0 6px 16px rgba(47,195,107,.35) }
.lb-filter:hover:not(.on){ border-color:rgba(255,255,255,.2); color:#fff }
.lb-server-filter{ position:relative; margin:6px 18px 18px; padding-top:12px; border-top:1px solid rgba(255,255,255,.04) }
.lb-toolbar .lb-filters{ flex:1 1 auto; min-width:220px }
.lb-toolbar .lb-server-filter{ margin:0 0 0 auto; padding-top:0; border-top:none }
.lb-server-filter__toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-radius:12px;
  background:#0f0f0f;
  color:#dcdcdc;
  border:1px solid rgba(255,255,255,.1);
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
  text-transform:none;
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.lb-server-filter__toggle:hover,
.lb-server-filter.open .lb-server-filter__toggle{ border-color:rgba(47,195,107,.65); color:#f5fdf9; box-shadow:0 6px 18px rgba(47,195,107,.28) }
.lb-server-filter__toggle:focus-visible{ outline:none; border-color:rgba(47,195,107,.75); box-shadow:0 0 0 3px rgba(47,195,107,.25) }
.lb-server-filter__prefix{ font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#9f9f9f; font-weight:700 }
.lb-server-filter__value{ flex:1; min-width:0; text-align:right; font-weight:700; color:#ffffff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lb-server-filter__chevron{ position:relative; width:12px; height:12px; flex:0 0 12px }
.lb-server-filter__chevron::before{ content:""; position:absolute; inset:0; border:2px solid currentColor; border-top:none; border-left:none; transform:rotate(45deg); top:-2px; transition:transform .2s ease }
.lb-server-filter.open .lb-server-filter__chevron::before{ transform:rotate(-135deg); top:2px }
.lb-server-filter__menu{ position:absolute; left:0; top:calc(100% + 8px); width:100%; background:#101010; border:1px solid rgba(255,255,255,.12); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.45); padding:12px; z-index:20 }
.lb-server-filter__options{ display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto }
.lb-server-filter__option{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer; transition:background .2s ease, border-color .2s ease }
.lb-server-filter__option:hover{ background:rgba(255,255,255,.04) }
.lb-server-filter__checkbox{ width:18px; height:18px; flex:0 0 18px; accent-color:#2FC36B }
.lb-server-filter__checkbox:focus-visible{ outline:2px solid rgba(47,195,107,.75); outline-offset:2px }
.lb-server-filter__text{ font-size:14px; color:#e3e3e3; font-weight:600 }

@media (min-width:768px){
  .lb-server-filter{ max-width:320px }
}

.lb-pagination{ display:flex; align-items:center; gap:12px; justify-content:space-between; padding:18px; border-top:1px solid rgba(255,255,255,.06); background:rgba(15,15,15,.65); flex-wrap:wrap }
.lb-pagination__summary{ font-size:13px; color:#c9c9c9 }
.lb-pagination__controls{ display:flex; align-items:center; gap:12px; margin-left:auto }
.lb-pagination__status{ font-size:13px; color:#9f9f9f }
.lb-pagination--search .lb-pagination__controls{ display:none }
.lb-pagination--search .lb-pagination__summary{ margin-right:0 }
.lb-page-btn{ display:inline-flex; align-items:center; justify-content:center; padding:8px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:#0f0f0f; color:#f1f1f1; font-size:12px; text-transform:uppercase; letter-spacing:.4px; transition:all .2s ease; text-decoration:none }
.lb-page-btn:hover:not(.disabled){ border-color:rgba(255,255,255,.24); color:#fff }
.lb-page-btn.disabled{ opacity:.45; cursor:not-allowed; pointer-events:none }
.lb-pagination--summary-only{ justify-content:flex-start }

/* Page spacing */
.leaderboard-live{
  padding-top:calc(var(--section-space)/3);
  margin-top:-92px;
  position:relative;
  z-index:2;
}
@media (max-width:1199px){
  .leaderboard-live{ margin-top:-80px }
}
@media (max-width:991px){
  .leaderboard-live{
    padding-top:calc(var(--section-space-mobile)/3);
    margin-top:-64px;
  }
}
@media (max-width:575px){
  .leaderboard-live{ margin-top:-46px }
}

/* Rank */
.c-rank{ display:flex; justify-content:center; align-items:center }
.badge-rank{
  width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#ff4d4d,#ff7a00); color:#fff; font-weight:800; font-size:16px;
  box-shadow:0 6px 18px rgba(255,76,0,.35)
}

/* Player */
.pl-line{ display:flex; gap:12px; align-items:center }
.avatar{ width:42px; height:42px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 2px 10px rgba(0,0,0,.35) }
.pl-id{ display:flex; flex-direction:column }
.pl-rank-mobile{ display:none; align-items:center; gap:10px; margin-bottom:8px }
.pl-rank-mobile__label{ font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#9f9f9f; font-weight:700 }
.pl-name{ font-weight:700; font-size:17px; line-height:1.1 }
.pl-meta{ margin-top:4px }
.tag{ display:inline-block; margin-right:6px; margin-top:4px; padding:2px 8px; font-size:12px; color:#cfcfcf;
  background:#0f0f0f; border:1px solid rgba(255,255,255,.08); border-radius:6px }
.tag--group{ display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; font-weight:700; letter-spacing:.32px; text-transform:uppercase; box-shadow:0 6px 18px rgba(0,0,0,.38); line-height:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#f1f1f1 }
.tag--group::before{ content:'\2729'; font-size:12px; opacity:.85 }
.tag--group-vip-plus{ background:rgba(255,215,0,.16); border-color:rgba(255,215,0,.55); color:#ffe08a }
.tag--group-vip-plus::before{ content:'\272A'; color:#ffe08a }
.tag--group-mvp{ background:rgba(103,33,160,.3); border-color:rgba(168,85,247,.7); color:#f2d5ff }
.tag--group-mvp::before{ content:'\272F'; color:#f2d5ff }
.tag--group-elite{ background:rgba(47,195,226,.2); border-color:rgba(111,224,255,.7); color:#d4f8ff }
.tag--group-elite::before{ content:'\272A'; color:#d4f8ff }
.pl-weapons{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap }
.w-icon{ width:22px; height:22px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) }

/* Stats */
.c-stat{ display:flex; align-items:center; justify-content:center }
.c-stat .k{ color:#ffd166; font-weight:800; font-size:17px }
.c-stat .d{ color:#f94144; font-weight:800; font-size:17px }
.c-stat .hs{ color:#06d6a0; font-weight:700 }
.c-stat .acc{ color:#4cc9f0; font-weight:700 }
.c-stat .play{ color:#bfbfbf; font-weight:600 }
.c-stat .event{ color:#f4b942; font-weight:700 }
.c-stat.c-patrol .event{ color:#2ec4b6 }
.c-stat.c-bradley .event{ color:#ff9f1c }
.c-stat .score{ color:#2FC36B; font-weight:800; font-size:17px }

/* Actions */
.c-actions{ display:flex; justify-content:flex-end }
.c-actions .th-btn{ padding:0; min-width:0 }
.c-actions .th-btn .btn-border{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  font-size:14px;
  min-width:0;
}
.c-actions .th-btn:not(:last-child){ margin-right:6px }

/* More panel: tabbed + compact */
.more{ margin-top:10px }
.more > summary{ cursor:pointer; display:inline-block; padding:6px 10px; border-radius:8px; background:#0f0f0f; color:#dedede;
  border:1px solid rgba(255,255,255,.08); font-weight:700; letter-spacing:.3px }
.more[open] > summary{ background:#151515 }

.tabs{ display:flex; gap:8px; margin:10px 0 }
.tab{ padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.08); background:#0f0f0f; color:#dcdcdc; cursor:pointer }
.tab.on{ background:#1a1a1a; color:#fff; border-color:#4cc9f0 }

.panel{ display:none; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02);
  border-radius:10px; padding:10px }
.panel.on{ display:block }

/* mini card grid */
.grid-two{ display:grid; gap:10px; grid-template-columns: 1fr 1fr }
.mini-card{ border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:10px; background:#0f0f0f }
.mini-card--full{ grid-column:1 / -1 }
.mc-title{ font-weight:800; margin-bottom:8px }
.ms-empty{ color:#9f9f9f; font-style:italic }

.ms-grid{ display:grid; gap:8px; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)) }
.ms-grid--takedowns{ grid-template-columns: repeat(auto-fill,minmax(140px,1fr)) }
.ms-item{ display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.06);
  border-radius:8px; padding:7px 9px }
.ms-icon{ width:20px; height:20px; object-fit:contain }
.ms-key{ flex:1; color:#dcdcdc; font-size:13px }
.ms-val{ font-weight:800; color:#ffd166 }

/* Modal compare */
.lb-modal[hidden]{ display:none }
.lb-modal{ position:fixed; inset:0; z-index:1000 }
.lb-modal__mask{ position:absolute; inset:0; background:rgba(0,0,0,.6) }
.lb-modal__panel{ position:relative; width:min(1100px,94vw); margin:6vh auto; background:#141414; color:#e9e9e9;
  border-radius:14px; border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 80px rgba(0,0,0,.6); padding:18px;
  max-height:88vh; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  scrollbar-color: var(--theme-color) var(--black-color2) }
.lb-modal__panel::-webkit-scrollbar{ width:10px; height:10px; border-radius:0 }
.lb-modal__panel::-webkit-scrollbar-track{ background:var(--black-color2);
  box-shadow:inset 0 0 6px rgba(0,0,0,.3); -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3); border-radius:0 }
.lb-modal__panel::-webkit-scrollbar-thumb{ background-color:var(--theme-color);
  background-image:-webkit-linear-gradient(45deg, rgba(0,0,0,.3) 25%, transparent 20%, transparent 50%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.3) 75%, transparent 75%, transparent);
  border-radius:0 }
.lb-modal__close{ position:absolute; top:8px; right:12px; font-size:28px; line-height:1; background:none; border:none; color:#e9e9e9; cursor:pointer }
.cmp-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.cmp-head{ display:flex; gap:12px; align-items:center; margin-bottom:10px }
.cmp-head .avatar{ width:48px; height:48px }
.cmp-head .name{ font-weight:800; font-size:18px }
.cmp-head .meta{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:4px; align-items:flex-start }
.cmp-head .meta span{ font-size:12px; color:#c9d1c9 }
.meta-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; border:1px solid rgba(255,255,255,.12); color:#f1f1f1; background:rgba(255,255,255,.08) }
.meta-badge--vip-plus{ background:rgba(255,215,0,.18); border-color:rgba(255,215,0,.55); color:#ffe08a }
.meta-badge--mvp{ background:linear-gradient(135deg, rgba(124,58,237,.4), rgba(251,191,36,.35)); border-color:rgba(168,85,247,.65); color:#f3d3ff }
.meta-badge--elite{ background:rgba(47,195,226,.22); border-color:rgba(111,224,255,.65); color:#d0f6ff }
.cmp-head .meta .meta-range{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 8px;
  border-radius:9px;
  background:rgba(20,20,20,.85);
  border:1px solid rgba(255,255,255,.08);
  color:#d6d6d6;
  min-width:0;
  box-shadow:none;
}
.cmp-head .meta .meta-range__label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#a5a5a5;
  font-weight:700;
  white-space:nowrap;
}
.cmp-head .meta .meta-range__field{ position:relative; flex:1; min-width:120px }
.cmp-head .meta .meta-range__field::after{
  content:"";
  position:absolute;
  pointer-events:none;
  right:10px;
  top:50%;
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid rgba(214,214,214,.9);
  transform:translateY(-50%);
}
.cmp-head .meta .meta-range select{
  appearance:none;
  width:100%;
  padding:3px 26px 3px 10px;
  border-radius:7px;
  background:rgba(10,10,10,.9);
  border:1px solid rgba(255,255,255,.14);
  color:#f1f1f1;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cmp-head .meta .meta-range select:hover{
  border-color:rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.08);
}
.cmp-head .meta .meta-range select:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:2px;
  border-color:rgba(255,255,255,.35);
  box-shadow:0 0 0 2px rgba(0,0,0,.35);
}
.cmp-head .meta .meta-range select option{
  color:#f4f4f4;
  background:#1a1a1a;
}
.cmp-head .meta .meta-range--static{
  background:rgba(20,20,20,.7);
  border-color:rgba(255,255,255,.05);
}
.cmp-head .meta .meta-range--static .meta-range__value{
  font-size:13px;
  font-weight:700;
  color:#f1f1f1;
}
.cmp-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap:8px; margin-bottom:12px }
.cmp-grid .cell{ background:#0f0f0f; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:8px; text-align:center }
.cmp-grid .kpi{ font-size:12px; color:#a9a9a9 }
.cmp-grid .val{ font-weight:800; font-size:16px }

.cmp-tiles--modal{ margin-top:18px }

/* Comparison tile detail blocks */
.cmp-detail-grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); margin-bottom:12px }
.cmp-detail-grid:last-child{ margin-bottom:0 }
.cmp-block--takedowns{ grid-column:1 / -1 }
.cmp-takedowns{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px }
.cmp-takedowns__item{ background:#0a150d; border:1px solid rgba(47,195,107,.35); border-radius:12px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px }
.cmp-takedowns__label{ font-size:13px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:#9fe870 }
.cmp-takedowns__value{ font-size:20px; font-weight:800; color:#ffffff }
.cmp-block{ background:#0f0f0f; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px }
.cmp-block__title{ font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:#8f8f8f; margin-bottom:10px; font-weight:700 }
.cmp-spread{ display:grid; gap:8px }
.spread-row{ display:grid; grid-template-columns: 80px 1fr 48px; gap:10px; align-items:center }
.spread-row .label{ font-size:13px; color:#dcdcdc; font-weight:600 }
.spread-row .value{ font-weight:800; color:#2FC36B; text-align:right }
.spread-bar{ background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; height:8px; position:relative }
.spread-bar span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#2FC36B,#9FE870); width:calc(var(--pct,0) * 1%); transition:width .2s ease }
.cmp-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.cmp-list li{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-radius:10px; padding:8px 10px }
.cmp-icon{ width:20px; height:20px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) }
.cmp-list .label{ flex:1; font-size:13px; color:#dcdcdc }
.cmp-list .value{ font-weight:700; color:#ffd166 }
.cmp-empty{ padding:14px 10px; border-radius:10px; background:rgba(255,255,255,.03); color:#9f9f9f; font-style:italic; text-align:center }

/* Quick compare modal */
.modal-title{ font-size:22px; font-weight:800; margin-bottom:6px }
.modal-copy{ margin-bottom:18px; color:#cfcfcf }
.cmp-picker{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px }
.picker{ border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; background:#0f0f0f; position:relative }
.picker-label{ display:block; font-weight:700; text-transform:uppercase; font-size:12px; color:#a7a7a7; margin-bottom:8px }
.picker-input{ width:100%; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.12);
  background:#151515; color:#e9e9e9; margin-bottom:10px; transition:border-color .2s ease,
  box-shadow .2s ease, background-color .2s ease }
.picker-input:focus,
.picker-input:focus-visible{ background:#1b1b1b; border-color:rgba(47,195,107,.65); color:#f5fdf9;
  box-shadow:0 0 0 3px rgba(47,195,107,.25); outline:none }
.picker-results{ max-height:160px; overflow:auto; display:grid; gap:6px }
.picker-option{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:2px;
  padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.08); background:#131313;
  color:#e9e9e9; cursor:pointer; transition:all .2s ease }
.picker-option:hover{ background:#1d1d1d; border-color:rgba(255,255,255,.18) }
.picker-option .po-tag{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#f1f1f1; margin-bottom:2px }
.picker-option .po-tag--vip-plus{ background:rgba(255,215,0,.18); border-color:rgba(255,215,0,.5); color:#ffe08a }
.picker-option .po-tag--mvp{ background:linear-gradient(135deg, rgba(124,58,237,.4), rgba(251,191,36,.3)); border-color:rgba(168,85,247,.6); color:#f3d3ff }
.picker-option .po-tag--elite{ background:rgba(47,195,226,.22); border-color:rgba(111,224,255,.55); color:#d0f6ff }
.picker-option .po-name{ font-weight:700 }
.picker-option .po-id{ font-size:12px; color:#9f9f9f }
.picker-option .po-server{ font-size:12px; color:#2FC36B }
.picker-option .po-score{ font-size:12px; color:#9fe870 }
.picker-option .po-kd{ font-size:12px; color:#2FC36B }
.picker-preview{ margin-top:12px }
.picker-empty{ padding:12px; border-radius:8px; background:rgba(255,255,255,.04); color:#9f9f9f; text-align:center }
.picker-preview .cmp-head{ margin-bottom:8px }
.cmp-head .meta span:empty{ display:none }
.picker-selected{ padding:12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:4px }
.picker-selected__name{ font-weight:700; color:#f1f1f1 }
.picker-selected__meta{ font-size:12px; color:#9f9f9f }

/* responsive */
@media (max-width:1100px){
  .lb-head,.lb-row{ grid-template-columns: 50px minmax(200px,1.5fr) minmax(86px,100px) repeat(5,minmax(66px,88px)) minmax(90px,104px) minmax(110px,132px) }
}
@media (max-width:900px){
  .lb-head,.lb-row{ grid-template-columns: 44px minmax(180px,1.4fr) minmax(80px,88px) repeat(5,minmax(60px,80px)) minmax(82px,92px) minmax(104px,120px) }
  .grid-two{ grid-template-columns: 1fr }
  .cmp-tiles{ grid-template-columns:1fr }
  .cmp-picker{ grid-template-columns:1fr }
  .c-actions{ justify-content:center }
  .lb-card__header{ gap:14px }
}
body.modal-open{ overflow:hidden }
/* --- additions for single-tile "More" modal --- */
.cmp-tiles.single { grid-template-columns: 1fr; }

/* Give the More button a little spacing from ribbons */
.more-btn { padding:0; border-radius:0; min-width:0 }
.more-btn .btn-border{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  font-size:14px;
  min-width:0;
}

/* mobile + tablet adjustments */
@media (max-width:768px){
  .lb-card__header{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:16px 16px 0;
  }
  .lb-card__header-search{
    flex:1 1 auto;
    width:100%;
  }
  .lb-card__header-actions{
    flex-direction:column;
    align-items:stretch;
    margin-left:0;
    gap:12px;
  }
  .lb-card__header-actions .th-btn,
  .lb-card__header-actions .th-btn .btn-border{ width:100% }
  .lb-updated{ justify-content:center }

  .lb-toolbar{ flex-direction:column; align-items:stretch; padding:16px 18px 12px }
  .lb-toolbar .lb-filters{ overflow-x:auto; padding-bottom:12px; margin:0 -18px; padding-left:18px; padding-right:18px }
  .lb-toolbar .lb-filters::-webkit-scrollbar{ height:6px }
  .lb-toolbar .lb-filters .lb-filter{ white-space:nowrap }
  .lb-toolbar .lb-server-filter{ width:100%; margin:8px 0 0; padding-top:0 }

  .lb-pagination{ flex-direction:column; align-items:flex-start; gap:14px; padding:16px 18px }
  .lb-pagination__controls{ width:100%; justify-content:space-between; margin-left:0 }

  .lb-head{ display:none }
  .lb-row{ display:grid; grid-template-columns:48px 1fr auto; grid-template-areas:
    "rank player toggle"
    "summary summary summary"
    "details details details";
    gap:12px; padding:14px 16px; border-radius:0; background:transparent; box-shadow:none; border-top:1px solid rgba(255,255,255,.08) }
  .lb-row:first-child{ border-top:none }
  .lb-row::before{ display:none }
  .lb-row:nth-child(odd){ background:transparent }
  .lb-row.lb-row--vip,
  .lb-row.lb-row--group-vip-plus,
  .lb-row.lb-row--mvp,
  .lb-row.lb-row--group-mvp,
  .lb-row.lb-row--elite,
  .lb-row.lb-row--group-elite{
    border-radius:12px;
    border-top-color:transparent;
  }
  .lb-row.lb-row--vip,
  .lb-row.lb-row--group-vip-plus{ background:rgba(255,215,0,.08); box-shadow:0 0 28px rgba(255,215,0,.18) }
  .lb-row.lb-row--mvp,
  .lb-row.lb-row--group-mvp{ background:rgba(88,28,135,.28); box-shadow:0 0 36px rgba(147,51,234,.28) }
  .lb-row.lb-row--elite,
  .lb-row.lb-row--group-elite{ background:rgba(47,195,226,.2); box-shadow:0 0 34px rgba(47,195,226,.28) }
  .lb-row.lb-row--vip::before,
  .lb-row.lb-row--group-vip-plus::before,
  .lb-row.lb-row--mvp::before,
  .lb-row.lb-row--group-mvp::before,
  .lb-row.lb-row--elite::before,
  .lb-row.lb-row--group-elite::before{ display:block }
  .lb-row .c-rank{ grid-area:rank; display:flex; align-items:center; justify-content:center; padding:0 }
  .lb-row .badge-rank{ width:36px; height:36px; font-size:16px }
  .lb-row .c-player{ grid-area:player; padding:0; background:none; border:none }
  .lb-row .c-player .pl-line{ align-items:center; gap:12px }
  .lb-row .c-player .pl-id{ gap:6px }
  .pl-rank-mobile{ display:none }

  .lb-row__summary{ grid-area:summary; display:flex; flex-wrap:wrap; gap:10px; margin-top:4px }
  .lb-row__summary>.c-stat{ flex:1 1 110px; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08) }
  .lb-row__summary>.c-stat::before{ content:attr(data-label); font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:#9f9f9f; font-weight:700 }
  .lb-row__summary>.c-stat span{ font-size:15px; font-weight:700 }

  .lb-row__toggle{ grid-area:toggle; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.05); color:#f4f4f4; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.3px }
  .lb-row__toggle-icon{ display:block; width:10px; height:10px; border:2px solid currentColor; border-top:none; border-left:none; transform:rotate(45deg); transition:transform .2s ease; margin-top:-2px }
  .lb-row.is-open .lb-row__toggle-icon{ transform:rotate(-135deg); margin-top:2px }

  .lb-row__details{ grid-area:details; display:none; gap:12px; padding:12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08) }
  .lb-row.is-open .lb-row__details{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) }
  .lb-row__details>[data-label]{ display:flex; flex-direction:column; gap:8px; background:none; border:none; padding:0 }
  .lb-row__details>[data-label]::before{ content:attr(data-label); font-size:12px; text-transform:uppercase; letter-spacing:.3px; color:#9f9f9f; font-weight:700 }
  .lb-row__details>.c-stat span{ font-size:16px; font-weight:700 }
  .lb-row__details>.c-actions{ gap:10px }
  .lb-row__details>.c-actions .th-btn{ width:100% }
  .lb-row__details>.c-actions .btn-border{ width:100%; padding:12px 16px }
}

@media (max-width:600px){
  .lb-row{ grid-template-columns:40px 1fr auto }
  .lb-row__summary{ flex-direction:column }
  .lb-row__summary>.c-stat{ flex:1 1 auto; justify-content:space-between }
  .lb-row.is-open .lb-row__details{ grid-template-columns:1fr }
  .lb-row__details{ padding:14px }
  .lb-row__details>.c-actions .btn-border{ padding:12px 14px }
  .lb-row .badge-rank{ width:34px; height:34px; font-size:15px }
  .lb-row .pl-name{ font-size:16px }
  .lb-row .pl-meta .tag{ font-size:11px }

  .lb-modal__panel{ width:94vw; margin:6vh auto; padding:18px 14px; border-radius:12px }
  .lb-modal__close{ top:6px; right:10px }
  .cmp-head{ flex-wrap:wrap }
  .cmp-head .meta{ gap:10px; width:100% }
  .cmp-head .meta .meta-range{ width:100%; min-width:0 }
  .cmp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .cmp-detail-grid{ grid-template-columns:1fr }
  .cmp-picker{ gap:14px }
}

@media (max-width:480px){
  .lb-pagination__controls{ flex-direction:column; align-items:stretch; gap:10px }
  .lb-page-btn,.lb-pagination__status{ width:100%; text-align:center }
}

/* Ensure modals stack nicely over site header */
.lb-modal { z-index: 10000; }