:root{
  --bg:#10141b; --bg2:#161c26; --panel:#1b2331; --panel2:#202a3a; --line:#2b3648;
  --tx:#e6ecf5; --mut:#8592a6; --mut2:#5f6b7d;
  --red:#e05a5a; --orange:#e08a4a; --yellow:#dfb34f; --green:#56bd63;
  --blue:#4fa3e3; --purple:#b07cd8; --self:#f5b52e;
  --r:10px; --r-sm:8px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
[hidden]{display:none !important}
body{
  background:var(--bg); color:var(--tx); font:14px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--blue)}

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:10px 18px; background:rgba(16,20,27,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:800; letter-spacing:.4px; font-size:16px; white-space:nowrap; color:var(--tx); text-decoration:none; position:static; z-index:auto}
.brand:hover{opacity:.8}
.brand span{color:var(--mut); font-weight:600; margin-left:6px; font-size:12px; text-transform:uppercase; letter-spacing:1.2px}

/* ---------- landing ---------- */
.landing-title,.landing-cmp,.landing-note,.landing-error{display:none}
body.landing .top{
  position:static; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; gap:20px; padding:24px; border-bottom:0; background:var(--bg);
}
body.landing .top .brand,body.landing .top .filters{display:none}
body.landing .landing-title{
  display:block; text-align:center; font-size:26px; line-height:1.28; font-weight:800; color:var(--tx);
}
body.landing .searchwrap{width:100%; max-width:640px; flex:0 1 auto}
body.landing #q{padding:13px 16px 13px 40px; font-size:16px; border-radius:12px}
body.landing .searchwrap .ico{left:13px; width:18px; height:18px}
body.landing .landing-cmp{display:flex; justify-content:center}
body.landing .landing-note{display:block; max-width:640px; text-align:center; color:var(--mut2); font-size:12px; margin-top:-10px}
body.landing .landing-error:not(:empty){
  display:block; max-width:640px; text-align:center; color:var(--red); font-size:13px;
}
body.landing main{display:none}

.searchwrap{position:relative; flex:0 0 400px; width:400px; max-width:400px}
.searchwrap .ico{position:absolute; left:10px; top:50%; width:16px; height:16px; transform:translateY(-50%); fill:var(--mut2)}
#q{
  width:100%; padding:9px 12px 9px 32px; border-radius:999px;
  background:var(--bg2); border:1px solid var(--line); outline:none;
}
#q:focus{border-color:#3d6ea8; box-shadow:0 0 0 3px rgba(79,163,227,.12)}
.suggest{
  position:absolute; top:calc(100% + 6px); left:0; right:0; margin:0; padding:4px; list-style:none;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 12px 30px rgba(0,0,0,.45); max-height:60vh; overflow:auto; z-index:30;
  scrollbar-width:thin; scrollbar-color:#39465a transparent; overscroll-behavior:contain;
}
.suggest::-webkit-scrollbar{width:6px}
.suggest::-webkit-scrollbar-track{background:transparent}
.suggest::-webkit-scrollbar-thumb{background:#39465a; border-radius:6px}
.suggest::-webkit-scrollbar-thumb:hover{background:#4a5a72}
.suggest li{padding:8px 10px; border-radius:6px; cursor:pointer; display:block}
.suggest li:hover,.suggest li.sel{background:var(--panel2)}
.s-top{display:flex; align-items:baseline; gap:6px; min-width:0}
.s-nick{font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.s-clan{color:var(--mut); font-weight:400; font-size:13px; flex:0 0 auto}
.s-sub{color:var(--mut2); font-size:12px; margin-top:1px}
.suggest li.empty{color:var(--mut); cursor:default}

.filters{display:flex; gap:10px; flex-wrap:wrap; margin-left:20px}
body.landing .filters{display:none}
.seg{display:flex; background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:2px; gap:2px; flex-wrap:wrap}
.seg button{padding:5px 11px; border-radius:9px; color:var(--mut); font-size:12.5px; white-space:nowrap}
.seg button.wide{white-space:normal; max-width:108px; line-height:1.15; text-align:center; padding:4px 9px}
.seg button:hover{color:var(--tx)}
.seg button.on{background:var(--panel2); color:var(--tx); box-shadow:inset 0 0 0 1px var(--line)}
.tankbar .seg button{padding:4px 11px}

#modeSeg button{position:relative}
#modeSeg button:not(:last-child)::after{
  content:""; position:absolute; right:-2px; top:25%; height:50%; width:1px;
  background:rgba(255,255,255,.1); pointer-events:none;
}
#modeSeg button.on::after,#modeSeg button.on + button::after{opacity:0}

/* ---------- layout ---------- */
main{max-width:1180px; margin:0 auto; padding:18px}
.hint{text-align:center; color:var(--mut); padding:54px 10px}
.hint .big{font-size:21px; font-weight:800; color:var(--tx); margin:0 0 8px}
.hint p{margin:6px 0}
.hint .small{font-size:12.5px; color:var(--mut2)}

.vt{width:24px; height:24px; vertical-align:middle; margin-right:5px; fill:#f9f5e1; display:inline-block}
.group h3 .vt{width:25px; height:25px; margin-right:6px}
.chips .vt{width:24px; height:24px; vertical-align:middle; margin-right:4px}
.tankbar .vt use, .best .vt use, .group h3 .vt use, .chips .vt use{stroke:#000000; stroke-width:1.5}

/* ---------- player card ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px}
#playerCard{display:grid; gap:16px; container-type:inline-size; view-transition-name:player-card}
#playerCard > *{margin:0}
.pc-head{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap}
.pc-name{font-size:22px; font-weight:800; line-height:1.2}
.pc-clan{color:var(--mut); font-weight:600}
.pc-sub{color:var(--mut2); font-size:12.5px; margin-top:2px}
.pc-actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.btn{padding:7px 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel2); font-size:13px}
.btn:hover{border-color:#3d6ea8}
.btn:disabled{opacity:.45; cursor:not-allowed; border-color:var(--line)}
.btn.primary{background:#22405f; border-color:#2f5c86}
.btn.on{background:#2c4a2f; border-color:#3f6b43}

.tiles{
  display:grid; gap:10px; margin:0;
  grid-template-columns:repeat(auto-fit, minmax(160px, 240px));
  justify-content:center;
}
.tile{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px; min-width:0}
.tile dt,.tile dd{margin:0}
.tile .k{color:var(--mut2); font-size:11.5px; text-transform:uppercase; letter-spacing:.6px}
.tile .v{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.25}
.tile .p{font-size:12px; color:var(--mut)}
.verdict{
  padding:9px 12px; border-radius:var(--r-sm); background:var(--bg2); color:var(--mut);
  border:1px solid var(--line); border-left:3px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.verdict b{color:var(--tx)}

@container (max-width: 700px){
  .tiles{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@container (max-width: 420px){
  .pc-head{flex-direction:column; align-items:stretch}
  .pc-actions{margin-left:0}
}
@container (max-width: 360px){
  .tiles{grid-template-columns:1fr}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

/* ---------- best tanks ---------- */
#bestTanks{margin-top:14px}
.best-title{font-size:13px; color:var(--mut); text-transform:uppercase; letter-spacing:1px; margin:0 0 8px}
.best-min{display:block; margin-top:2px; font-size:11.5px; letter-spacing:0; text-transform:none; color:var(--mut2); font-weight:400}
.best{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px}
.best .bt{
  min-width:180px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:10px 12px; flex:0 0 auto;
}
.best .bt .nm{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px; display:flex; align-items:center; gap:5px}
.best .bt .nm .vt{flex:0 0 auto; margin:0}
.best .bt .r{display:flex; gap:10px; align-items:baseline; margin-top:4px; font-variant-numeric:tabular-nums}
.best .bt .r b{font-size:18px}
.best .bt .r span{font-size:12px; color:var(--mut2)}

/* ---------- table ---------- */
.tankbar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:18px 0 10px;
  padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chips button{padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--mut); font-size:12.5px; display:inline-flex; align-items:center; height:30px}
.chips button.on{color:var(--tx); background:var(--panel2)}
.tb-label{color:var(--mut2); font-size:11.5px; text-transform:uppercase; letter-spacing:.6px}
.tankfind{flex:1 1 190px; min-width:160px}
.tankfind input{
  width:100%; height:30px; padding:0 10px; border-radius:8px; background:var(--bg2);
  border:1px solid var(--line); outline:none; font-size:12.5px;
}
.tankfind input:focus{border-color:#3d6ea8}
.sortbox{margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--mut); font-size:12.5px; flex-wrap:wrap}
.sortbox select{height:30px; background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:0 8px; color:var(--tx)}
.sortbox .dir{width:34px; height:30px; border:1px solid var(--line); border-radius:8px; background:var(--bg2); font-size:15px; line-height:1; padding:0}
.sortbox .dir:hover{border-color:#3d6ea8}

.group{margin-bottom:16px; overflow-x:auto}
.group h3{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--mut); text-transform:uppercase; letter-spacing:1px; margin:0 0 6px}
.group h3 .n{color:var(--mut2); font-weight:500; letter-spacing:0; text-transform:none}
.tbl{width:100%; min-width:620px; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
#tanks .tbl{table-layout:fixed}
#tanks .tbl th:nth-child(1){width:29%}
#tanks .tbl th:nth-child(2){width:8%}
#tanks .tbl th:nth-child(3){width:8%}
#tanks .tbl th:nth-child(4){width:12%}
#tanks .tbl th:nth-child(5){width:9%}
#tanks .tbl th:nth-child(6){width:9%}
#tanks .tbl th:nth-child(7){width:11%}
#tanks .tbl th:nth-child(8){width:7%}
#tanks .tbl th:nth-child(9){width:7%}
#tanks .tbl td{overflow:hidden; text-overflow:ellipsis}
.tbl th{
  text-align:right; font-size:11.5px; font-weight:600; color:var(--mut);
  padding:8px 10px; background:var(--bg2); border-bottom:1px solid var(--line); white-space:nowrap; cursor:pointer;
  user-select:none;
}
.tbl th:first-child{text-align:left}
.tbl th:hover{color:var(--tx)}
.tbl th.act{color:var(--tx)}
.tbl th.act:after{content:" ↓"; color:var(--mut2)}
.tbl th.act.asc:after{content:" ↑"}
.tbl td{text-align:right; padding:8px 10px; border-top:1px solid rgba(43,54,72,.55); font-variant-numeric:tabular-nums; white-space:nowrap}
.tbl td:first-child{text-align:left}
.tbl tbody tr:hover{background:var(--panel2)}
.more{margin:6px 0 0; text-align:center}
.more button{padding:6px 14px; border:1px solid var(--line); border-radius:999px; background:var(--bg2); color:var(--mut); font-size:12.5px}
.more button:hover{color:var(--tx); border-color:#3d6ea8}
.tank-name{font-weight:600}
.tank-sub{color:var(--mut2); font-size:11.5px}
.prem{
  display:inline-block; margin-left:6px; padding:0 5px; border-radius:4px;
  border:1px solid rgba(214,178,94,.38); background:rgba(214,178,94,.07);
  color:#d6b25e; font-size:10px; line-height:15px; letter-spacing:.4px;
  text-transform:uppercase; vertical-align:1px; font-weight:600;
}
.bar{height:3px; border-radius:2px; background:#28313f; margin-top:4px; overflow:hidden}
.bar i{display:block; height:100%}
.num{font-variant-numeric:tabular-nums}
.dim{color:var(--mut2)}

.c-bad{color:var(--red)} .c-poor{color:var(--orange)} .c-avg{color:var(--yellow)}
.c-good{color:var(--green)} .c-great{color:var(--blue)} .c-uniq{color:var(--purple)}
.b-bad{background:var(--red)} .b-poor{background:var(--orange)} .b-avg{background:var(--yellow)}
.b-good{background:var(--green)} .b-great{background:var(--blue)} .b-uniq{background:var(--purple)}

/* ---------- compare ---------- */
.cmp{margin-top:18px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.cmp-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.cmp-head h3{margin:0; font-size:15px}
.cmp-head .n{color:var(--mut2); font-weight:500}
.cmp-hint{color:var(--mut2); font-size:12.5px}
.cmp-actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.cmp-wrap{overflow-x:auto}
.cmp-tbl{min-width:640px; table-layout:fixed}
.cmp-tbl th:first-child,.cmp-tbl td:first-child{text-align:left}
.cmp-tbl th,.cmp-tbl td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cmp-tbl th:first-child{min-width:190px; width:26%}
.cmp-tbl td.best{font-weight:800; background:rgba(86,189,99,.12); box-shadow:inset 0 -2px 0 rgba(86,189,99,.5)}
.cmp-player a{font-weight:800; color:var(--tx); text-decoration:none}
.cmp-player a:hover{color:var(--blue); text-decoration:underline}
.cmp-player .dim{font-weight:400; margin-left:4px}
.cmp-del{float:right; margin-left:10px; color:var(--mut2); padding:0 5px; border-radius:5px; font-size:12px}
.cmp-del:hover{color:var(--red); background:rgba(224,90,90,.12)}
.cmp-note{display:flex; gap:10px; align-items:center; color:var(--mut); font-size:13px; margin:4px 0 10px; flex-wrap:wrap}
.cmp-tools{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:14px 0 8px; color:var(--mut); font-size:12.5px}
.cmp-tools select{height:30px; background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:0 8px; color:var(--tx)}
.cmp-tools label{display:inline-flex; align-items:center; gap:6px}
.cmp-title{font-size:13px; color:var(--mut); text-transform:uppercase; letter-spacing:1px; margin:16px 0 0}
.cmp-matrix-wrap{overflow:auto; max-height:72vh; border:1px solid var(--line); border-radius:8px}
.cmp-matrix{min-width:520px}
.cmp-matrix th:first-child,.cmp-matrix td:first-child{position:sticky; left:0; z-index:2; background:var(--panel)}
.cmp-matrix th{cursor:default}
.cmp-matrix thead th{position:sticky; top:0; z-index:3; background:var(--bg2)}
.cmp-matrix thead th:first-child{z-index:4}
.cmp-matrix th,.cmp-matrix td{white-space:nowrap}
.cmp-matrix th:first-child,.cmp-matrix td:first-child{min-width:210px; text-align:left}
.cmp-matrix td.best{font-weight:800; background:rgba(86,189,99,.14)}
.cmp-matrix .mt-name{font-weight:600}
.cmp-matrix .mt-sub{color:var(--mut2); font-size:11px}
.cmp-matrix .pl a{color:var(--tx); font-weight:700; text-decoration:none}
.cmp-matrix .pl a:hover{color:var(--blue); text-decoration:underline}
.cmp-matrix .pl .dim{font-weight:400; margin-left:4px}
.cmp-matrix tbody tr:hover td{background:var(--panel2)}
.cmp-matrix tbody tr:hover td:first-child{background:var(--panel2)}

/* ---------- cookies ---------- */
.cookie{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:50;
  display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  max-width:1180px; margin:0 auto; padding:12px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 12px 30px rgba(0,0,0,.5); color:var(--mut); font-size:13px;
}
.cookie .btn{flex:0 0 auto}

footer{
  flex-shrink:0;
  max-width:1180px; width:100%; margin:12px auto 14px; padding:0 18px; color:var(--mut2); font-size:12px;
  text-align:center;
}
footer span{display:inline-block}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hide-md{display:none}
}
@media (max-width:900px){
  .filters{margin-left:0; width:100%}
  .seg{flex:1 1 auto}
  .seg button{flex:1 1 auto}
}
@media (max-width:600px){
  .top{gap:8px 10px; padding:8px 12px}
  .searchwrap{flex:1 1 auto; min-width:0; max-width:none}
  .filters{order:3}
  #modeSeg{width:100%}
  #modeSeg button{flex:1 1 0; padding:6px 4px; font-size:11.5px; line-height:1.2}
  #modeSeg button.wide{max-width:none}
}
@media (max-width:760px){
  main{padding:12px}
  .pc-name{font-size:18px}
  .tile .v{font-size:17px}
  .tbl th, .tbl td{padding:7px 6px}
  .hide-sm{display:none}
  .cmp-tbl{min-width:460px}
  .sortbox{margin-left:0; width:100%; justify-content:flex-end}
  .cmp-head .cmp-hint{order:3; width:100%}
  .cmp-actions{margin-left:0}
}
@media (max-width:520px){
  .brand span{display:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hide-xs{display:none}
  body.landing .hint{padding-top:28px}
}


/* Layout fixes */
.best {
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.best::-webkit-scrollbar {
  display: none !important;
}

.tankbar {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  align-items: stretch !important;
}

.tankbar .chips,
.tankbar .seg,
.tankbar .tb-label + .seg,
.tankbar .tb-label + .chips {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.tankbar > * {
  width: 100% !important;
}

.tankfind input {
  width: 100% !important;
}

@media (min-width: 992px) {
  .tankbar { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; }
  .tankbar > * { width: auto !important; }
  .tankfind { flex-basis: 100% !important; order: 3; }
  .sortbox { flex-basis: 100% !important; order: 4; }
}

#playerCard {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

dl.tiles {
  display: flex !important;
  flex-wrap: nowrap !important;
}

dl.tiles > * {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.verdict {
  display: block !important;
  width: 100% !important;
}

/* ---------- header alignment & responsiveness (2026-10-24) ---------- */
header.top{
  justify-content:space-between;
  padding-left:max(18px, calc((100vw - 1180px) / 2));
  padding-right:max(18px, calc((100vw - 1180px) / 2));
}
body.landing .top{padding:24px}

body:not(.landing) .searchwrap{
  flex:0 1 400px;
  width:400px;
  max-width:400px;
  min-width:180px;
}
body:not(.landing) .filters{
  margin-left:0;
  flex:1 1 auto;
  justify-content:flex-end;
  min-width:0;
}
body:not(.landing) .brand{margin-right:20px}

#modeSeg{flex-wrap:nowrap}
#modeSeg > *{
  flex:1 1 0;
  text-align:center;
  white-space:nowrap;
  padding:8px 12px;
  font-size:13px;
}

@media (max-width:950px){
  header.top{flex-wrap:wrap; row-gap:10px}
  body:not(.landing) .searchwrap{flex:1 1 220px; width:auto; max-width:none}
  body:not(.landing) .filters{
    flex:1 1 100%;
    order:3;
    justify-content:center;
    margin-left:0;
  }
}

@media (max-width:600px){
  #modeSeg > *{font-size:12px; padding:6px 10px}
  body:not(.landing) .filters{
    overflow-x:auto;
    flex-wrap:nowrap;
    justify-content:flex-start;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:2px;
  }
  body:not(.landing) .filters::-webkit-scrollbar{display:none}
  #modeSeg{width:auto; min-width:max-content}
  #modeSeg > *{flex:0 0 auto}
}

/* Equal width mode buttons */
#modeSeg{
  display:flex !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  gap:4px !important;
  box-sizing:border-box !important;
}
#modeSeg button{
  flex:1 1 0% !important;
  min-width:0 !important;
  white-space:normal !important;
  word-break:break-word !important;
  line-height:1.15 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  height:auto !important;
  min-height:40px !important;
  padding:4px 6px !important;
  box-sizing:border-box !important;
}
#modeSeg button.wide{
  max-width:none !important;
}
body:not(.landing) .filters{
  flex:1 1 auto;
  min-width:0;
}

/* Tankbar optimized */
.tankbar{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  align-items:stretch !important;
}
.tankbar-row{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:12px 18px !important;
}
.tankbar-row--bottom{justify-content:space-between}
.tankbar-group{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex:0 1 auto !important;
}
.tankbar .tb-label{white-space:nowrap}
#tierSeg, #classChips{
  display:flex !important;
  flex-wrap:nowrap !important;
  width:auto !important;
  flex-shrink:0 !important;
}
.tankbar .seg button,
.tankbar .chips button{
  flex:0 1 auto !important;
  min-width:28px !important;
  padding:5px 9px !important;
  white-space:nowrap !important;
}
.tankfind{
  flex:1 1 260px !important;
  min-width:200px !important;
}
.tankfind input{width:100% !important}
.sortbox{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  margin-left:auto !important;
}
@media (max-width:720px){
  .sortbox{margin-left:0; width:100%; justify-content:flex-start; flex-wrap:wrap}
  .tankfind{flex:1 1 100%}
}
@media (max-width:540px){
  .tankbar-group{width:100%; flex-wrap:wrap}
  #tierSeg, #classChips{flex-wrap:wrap}
}

/* Tier scroll mobile */
@media (max-width:600px){
  #tierSeg{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    max-width:100%;
  }
  #tierSeg::-webkit-scrollbar{display:none}
  #tierSeg button{
    flex:0 0 auto !important;
    padding:10px 12px !important;
    min-height:44px;
  }
}

/* Best drag/scroll */
.best{
  cursor:grab;
  user-select:none;
  scroll-snap-type:x mandatory;
}
.best:active{cursor:grabbing}
.best .bt{
  scroll-snap-align:start;
}
.best .bt .nm{
  user-select:text !important;
  cursor:text;
}

/* Fix comparison table best cells */
#cmpPanel .cmp-tbl td.best,
#cmpPanel .cmp-matrix td.best {
  display: table-cell !important;
  vertical-align: middle;
}

/* clan links */
.pc-clan{color:var(--mut); font-weight:600; text-decoration:none}
.pc-clan:hover{text-decoration:underline}
a.s-clan{color:var(--mut); font-weight:400; font-size:13px; flex:0 0 auto; text-decoration:none}
a.s-clan:hover{text-decoration:underline}
.cmp-player a.dim{color:var(--mut); text-decoration:none}
.cmp-player a.dim:hover{text-decoration:underline}