:root {




  --bg:        #0e1116;
  --panel:     #161c24;
  --panel-2:   #1e2530;
  --raised:    #28313d;
  --line:      #37424f;
  --line-soft: #384250;

  --text:      #eef2f6;







  --text-2:    #e3e7ec;
  --muted:     #dfe3e8;






  --shell-max: 1900px;
  --gold:      #d9a441;





  --on-turf:   #eef3f7;
  --on-turf-2: #dfe7ee;
  --faint:     #bcc4cd;


  --accent:    #5fd8ca;
  --accent-dim:#1f4340;
  --link:      #8fbdff;

  --good:      #5bcd8a;
  --good-bg:   #16301f;
  --warn:      #ecb44a;
  --warn-bg:   #33290f;
  --bad:       #ed8b82;
  --bad-bg:    #3a1f1c;
  --idle:      #bfc7cf;
  --idle-bg:   #212932;












  --goal:      #34ef86;

  --pitch:     #276b45;



















  --stripe: repeating-linear-gradient(to bottom,
              rgba(255, 255, 255, .05) 0 8.3333%, transparent 8.3333% 16.6667%);
  --pitch-line:rgba(255, 255, 255, .22);

  --c1:#5ad1c4; --c2:#f2a65a; --c3:#8f7fe8; --c4:#e56a8c; --c5:#6fb3f0;
















  --shot-goal: var(--goal);













  --ctl-h: 26px;
  --ctl-h-touch: 36px;
  --row: 26px;
























  --fs-cap: 10px;






  --cap-h: calc(var(--fs-cap) * 1.45 + 3px);
  --fs-ui: 11px;
  --fs-note: 12px;
  --fs-body: 13px;
  --fs-big: 15px;
  --fs-num: 17px;
  --head-h: 48px;
  --head-w: 76px;
  --head-w-txt: 136px;







  --col-num: 40px;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }





:root { --tabbar-pad: 5px; --tabbar-h: calc(52px + var(--tabbar-pad)); }











html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

html { background: var(--panel); }













@supports (height: 100dvh) {






  html { height: 100dvh; }
}
















body {
  position: fixed;
  inset: 0;












  height: auto;
  display: flex; flex-direction: column; overflow: hidden;



  overscroll-behavior: none;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select, input { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }

.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }


header {
  display: flex; align-items: center; gap: 18px;
  padding: 0 14px; height: 46px; flex: 0 0 auto;
  background: var(--panel); border-bottom: 1px solid var(--line);
}


















@supports (padding: env(safe-area-inset-top)) {
  body > header {
    padding: env(safe-area-inset-top) calc(14px + env(safe-area-inset-right))
             0 calc(14px + env(safe-area-inset-left));
    height: calc(46px + env(safe-area-inset-top));
  }



  main {
    padding: 14px calc(14px + env(safe-area-inset-right))
             calc(14px + var(--tabbar-h)) calc(14px + env(safe-area-inset-left));
  }
}
.brand { font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.brand span { color: var(--accent); }




.subnav { display: flex; gap: 2px; }
.subnav a, .subnav-here {
  padding: 5px 11px; border-radius: 5px; color: var(--text-2);
  font-weight: 500; white-space: nowrap;
}
.subnav a:hover { background: var(--panel-2); text-decoration: none; color: var(--text); }
.subnav a.active { background: var(--accent-dim); color: var(--accent); }


.subnav.empty { display: none; }




















.hdr-fb {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  margin-left: auto; height: 28px; padding: 0 10px; border-radius: 7px;
  -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  font-size: var(--fs-ui); font-weight: 600; white-space: nowrap;
  color: var(--accent); background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  position: relative;
}
.hdr-fb:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.hdr-fb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hdr-fb svg { width: 15px; height: 15px; }



.hdr-fb-n {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
  background: var(--warn); color: var(--bg);
}

.hdr-cog {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 7px;
  color: var(--faint);
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.hdr-cog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hdr-cog:hover { color: var(--text); background: var(--panel-2); }
.hdr-cog.active { color: var(--accent); background: var(--accent-dim); }
.hdr-cog svg { width: 17px; height: 17px; }

.hdr-status { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12px; }
.hdr-item { display: flex; flex-direction: column; line-height: 1.25; }
.hdr-item .k { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.hdr-item .v { color: var(--text); font-family: var(--mono); }
.hdr-gap { color: var(--warn); }


.rangebar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 7px 14px; flex: 0 0 auto;
  background: var(--panel-2); border-bottom: 1px solid var(--line);






  min-height: 44px;
}



@supports (padding: env(safe-area-inset-left)) {
  .rangebar {
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
  }
}
.rangebar label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.gw-inputs { display: flex; align-items: center; gap: 5px; }
.gw-inputs input {
  width: 46px; padding: 3px 5px; text-align: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--mono);
}






.slider-wrap { position: relative; flex: 0 0 400px; max-width: 400px; height: 26px; }



.rangebar #seasonSel { height: var(--ctl-h); padding-block: 0; }


#normNote { flex: 0 0 210px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }







@media (max-width: 1599px) { #normNote { display: none; } }







@media (min-width: 761px) and (max-width: 1399px) {
  .slider-wrap { flex: 1 1 200px; min-width: 180px; max-width: 400px; }
}
















#trControls .slider-wrap { flex: 1 1 150px; min-width: 150px; max-width: 260px; height: var(--ctl-h); }














@media (min-width: 761px) {
  #trControls .field.statf { flex: 1 1 460px; min-width: 452px; }
}









@media (max-width: 760px) {
  #trControls .statf-row input[type=number] { display: none; }
}
#trControls .tr-win { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }


#trControls .tr-winlab {
  flex: 0 0 auto; font-size: var(--fs-ui); color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}





.slider-wrap, .slider-wrap input[type="range"] { touch-action: pan-y; }



.rangebar.range-inert > label,
.rangebar.range-inert .gw-inputs,
.rangebar.range-inert .slider-wrap { opacity: .4; pointer-events: none; }
.slider-wrap input[type=range] {
  position: absolute; inset: 0; width: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.slider-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); cursor: grab;
}
.slider-wrap input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); cursor: grab;
}












.slider-track {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 0; right: 0; height: 4px;
  background: var(--line); border-radius: 2px;
}
.slider-fill { position: absolute; height: 100%; background: var(--accent); border-radius: 2px; }

.toggle { display: flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden;
  height: var(--ctl-h); align-items: stretch; }


.filters .toggle { height: var(--ctl-h); box-sizing: border-box; }
.toggle button {
  padding: 0 11px; background: var(--bg); border: 0; color: var(--text-2);
  cursor: pointer; white-space: nowrap; font-size: var(--fs-ui);




  font-weight: 600;
}
.toggle button.on { background: var(--accent-dim); color: var(--accent); }











#tcFilter.multi button::before { content: '\2713\2009'; visibility: hidden; }
#tcFilter.multi button.on::before { visibility: visible; }

.btn {
  padding: 0 11px; background: var(--raised); border: 1px solid var(--line);
  border-radius: 5px; color: var(--text-2); cursor: pointer; white-space: nowrap;



  height: var(--ctl-h); display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-body);
}
.btn:hover { background: var(--panel-2); color: var(--text); }
.btn.primary { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 0 8px; font-size: var(--fs-ui); }











.btn, .btn-sm, .pill, .toggle button {




  min-height: var(--ctl-h); display: inline-flex; align-items: center; justify-content: center;
}








input:not([type=checkbox]):not([type=radio]):not([type=range]), select {
  min-height: var(--ctl-h); box-sizing: border-box;
}




a.pdetail, a.tdetail { display: inline-block; padding: 4px 2px; }









summary { padding-block: 5px; }











.cmp-spatial {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  align-items: start;
}



.spatial-card { min-width: 0; }

.spatial-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; margin-bottom: 6px;
  padding-bottom: 5px; border-bottom: 1px solid var(--line);
}




.spatial-stack { display: grid; grid-template-columns: 1fr; gap: 10px; }



.zone-mini .row {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; padding: 2px 0; border-bottom: 1px solid var(--line);
}
.zone-mini .row:last-child { border-bottom: 0; }
.zone-mini .swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.zone-mini .lab { white-space: normal; color: var(--muted); }
.zone-mini .val { margin-left: auto; font-family: var(--mono); flex: 0 0 auto; }



.spatial-card .empty { padding: 14px 8px; font-size: 11px; }





.shot-pick { cursor: pointer; }
.shot-pick:focus { outline: none; }
.shot-pick:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 50%;
}






.shot-dot.on {
  stroke: var(--text); stroke-width: .9; stroke-opacity: .95;
}





.shot-detail-host { margin-top: 7px; min-height: 44px; }
.shot-map.compact .shot-detail-host { min-height: 0; margin-top: 5px; }



.shot-detail { gap: 2px 12px; align-content: start; }
.shot-detail dd { font-family: inherit; font-variant-numeric: tabular-nums; }






.tshort { display: none; }
.rshort { display: none; }


.vshort { display: none; }









main { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain;
       padding: 14px 14px calc(14px + var(--tabbar-h)); }














.page {
  display: none; flex-direction: column; gap: 14px;
  max-width: var(--page-max, var(--shell-max));
  margin-inline: auto;
  width: 100%;
}
.page.on { display: flex; }


#page-hubbub, #page-predict, #page-status { --page-max: 1180px; }


.tc-body, .tc-post .note, .pn-said { max-width: 92ch; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; }



.panel > h2 {
  margin: 0; padding: 8px 13px; font-size: var(--fs-note); font-weight: 600;
  min-height: calc(var(--ctl-h) + 16px);
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-2);
  border-bottom: 1px solid var(--line); display: flex; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.panel > h2 .sub { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }









.panel > h2 .right {
  margin-left: auto; display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap; min-width: 0; max-width: 100%;
}
.panel-body { padding: 11px 13px; }

























.panel-body:empty { padding: 0; }






.panel > h2.h2-tight { flex-wrap: nowrap; min-width: 0; }
.panel > h2.h2-tight .right { flex-wrap: nowrap; flex: 0 0 auto; }
.panel > h2.h2-tight > .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .panel > h2.h2-tight > .sub { display: none; }
  .panel > h2.h2-tight .btn-sm { padding: 0 7px; }
}






@media (max-width: 560px) {
  .panel > h2.h2-tight { flex-wrap: wrap; row-gap: 6px; }
  .panel > h2.h2-tight .right { flex-wrap: wrap; }
}






.panel > h2.h2-keepsub > .sub { display: inline !important; }
.warn-box { padding: 8px 10px; border: 1px solid var(--warn); border-radius: 7px;
  background: color-mix(in srgb, var(--warn) 12%, var(--panel)); color: var(--text); font-size: var(--fs-ui); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 14px; }


.tablewrap { overflow: auto; max-height: 70vh; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td { padding: 0 8px; height: var(--row); white-space: nowrap; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2); border-bottom: 1px solid var(--line);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; text-align: right; cursor: pointer; user-select: none;




  height: var(--head-h); vertical-align: bottom; padding-top: 4px; padding-bottom: 5px;
}



thead th .lshort { display: none; }



thead th .lbl {







  display: inline-block; vertical-align: bottom;
  width: auto; max-width: var(--head-w);




  white-space: normal; overflow-wrap: break-word; word-break: normal;
  line-height: 1.15; max-height: 3.45em; overflow: hidden;













  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  text-overflow: ellipsis;
}






















thead th:not(.txt) .lbl { margin-left: auto; }

thead th.txt .lbl { width: auto; max-width: var(--head-w-txt); }




thead th:not(.txt), tbody td:not(.txt) { min-width: var(--col-num); }
thead th:hover { color: var(--text); }
thead th.txt, td.txt { text-align: left; }
thead th.sorted { color: var(--accent); }


thead th .arrow { font-size: 10px; margin-left: 2px; }
tbody td { border-bottom: 1px solid var(--line-soft); text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tbody td.txt { font-family: var(--sans); }


tbody tr[data-code] { cursor: pointer; }
tbody tr:hover { background: #232b36; }
tbody tr.sel { background: var(--accent-dim); }


























tbody tr:nth-child(even) > td { background: var(--panel-2); }
tbody tr:nth-child(even) > td.sticky-l { background: var(--panel-2); }
tbody tr:hover > td { background: #232b36; }
tbody tr.sel > td { background: var(--accent-dim); }
td.null { color: var(--faint); }
.sticky-l { position: sticky; left: 0; background: var(--panel); z-index: 1; }
tbody tr:hover .sticky-l { background: var(--panel-2); }
thead th.sticky-l { z-index: 3; background: var(--panel-2); }

.pos { padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 600; font-family: var(--mono); }
.pos.GKP { background: #2c2440; color: #b9a5f0; }
.pos.DEF { background: #14304a; color: #7fb4ff; }
.pos.MID { background: #123326; color: #5ed398; }
.pos.FWD { background: #3d2318; color: #f0a072; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px;
  border-radius: 3px; font-size: 10px; font-weight: 600; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .05em;
}
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad  { background: var(--bad-bg);  color: var(--bad); }
.chip.idle { background: var(--idle-bg); color: var(--idle); }
.dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.cov { display: inline-block; width: 100%; height: 3px; background: var(--line); border-radius: 2px; }
.cov > i { display: block; height: 100%; border-radius: 2px; background: var(--good); }
.cov.part > i { background: var(--warn); }












.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; }






























.filters:has(> .field:not(.inline)) > .btn,
.filters:has(> .field:not(.inline)) > .toggle,
.filters:has(> .field:not(.inline)) > .fdr-inline,
.filters:has(> .field:not(.inline)) > .pill-row,
.filters:has(> .field:not(.inline)) > select,
.filters:has(> .field:not(.inline)) > input,
.tc-row:has(> .field:not(.inline)) > .btn,
.tc-row:has(> .field:not(.inline)) > .toggle,
.tc-row:has(> .field:not(.inline)) > .fdr-inline,
.tc-row:has(> .field:not(.inline)) > select,
.tc-row:has(> .field:not(.inline)) > input {
  align-self: flex-start; margin-top: var(--cap-h);
}



















.field { display: flex; flex-direction: column; gap: 3px; }







.field > span:not(.pair) {
  color: var(--muted); font-size: var(--fs-cap); text-transform: uppercase;
  letter-spacing: .06em;
}
.field select, .field input {
  padding: 0 6px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; min-width: 84px; font-size: var(--fs-body);





  height: var(--ctl-h);
}
.field input[type=number] { width: 74px; font-family: var(--mono); }



.field .pair { display: flex; gap: 4px; }
.field .pair input[type=number] { width: 56px; }
.field.wide input { min-width: 170px; }















.field.statf { flex: 1 1 100%; }
@media (min-width: 761px) {





  .filters { gap: 10px 12px; }
  .filters .field.wide input { min-width: 150px; }
  .field.statf {
    flex: 1 1 280px; min-width: 280px;











    align-self: flex-start;
  }
}







@media (min-width: 1100px) and (max-width: 1439px) {





  .field.statf { flex: 1 1 130px; min-width: 130px; }
  .statf-row { flex-wrap: nowrap; }
  .statf-row select { flex: 1 1 80px; min-width: 0; max-width: none; }
  .statf-row input[type=number] { flex: 0 1 48px; width: auto; min-width: 0; }
}






.field.inline { flex-direction: row; align-items: center; gap: 6px; }
.field.inline > span { white-space: nowrap; }

.field.inline input[type=number] { min-width: 0; width: 62px; }


#tblStrength th[data-stsort] { cursor: pointer; user-select: none; }
#tblStrength th[data-stsort]:hover { color: var(--text); }


#tblFixtures th[data-fxsort] { cursor: pointer; user-select: none; }
#tblFixtures th[data-fxsort]:hover { color: var(--text); }





#tblFixtures th:not([data-fxsort]) { cursor: default; }
#tblFixtures th:not([data-fxsort]):hover { color: var(--muted); }
#tblStrength th.sorted { color: var(--accent); }
.statf-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.statf-row select { flex: 1 1 150px; min-width: 0; max-width: 280px; }
.statf-row input[type=number] { flex: 0 0 auto; width: 72px; min-width: 0; }



@media (min-width: 761px) {






  .statf-row { flex-wrap: nowrap; }
  .statf-row select { flex: 1 1 120px; }
  .statf-row input[type=number] { width: 62px; }
}





@media (max-width: 760px) {
  .statf-row { flex-wrap: nowrap; }
  .statf-row select { flex: 1 1 80px; max-width: none; }
  .statf-row input[type=number] { flex: 0 1 48px; width: 48px; }
}




.statf .pill-row:empty { display: none; }



#fTeamList:empty, #fStatusList:empty { display: none; }
.statf .pill-row { margin-top: 5px; }





.statf .note { margin-top: 4px; max-width: 60ch; }

.pill-row { display: flex; flex-wrap: wrap; gap: 4px; }
.pill {
  padding: 0 9px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--text-2); cursor: pointer; font-size: var(--fs-ui);





  height: var(--ctl-h); display: inline-flex; align-items: center; gap: 5px;
}
.pill.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }




.fx-pill {
  color: #10151b;
  border-color: rgba(0, 0, 0, .18);
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.fx-pill b { font-weight: 700; margin-left: 2px; }



.fx-pill.unrated {
  background: var(--panel-2, var(--panel));
  color: var(--muted);
  border-color: var(--line);
}


.colpick { max-height: 300px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px; }
.colpick label { display: flex; align-items: center; gap: 6px; padding: 1px 0; color: var(--text-2); cursor: pointer; }
.colpick label:hover { color: var(--text); }
.colpick .grp { grid-column: 1/-1; margin-top: 7px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.proxy { color: var(--warn); font-size: 9px; }


.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-family: var(--mono); }

.covgrid { overflow: auto; }
.covgrid table td { text-align: center; font-size: 10px; }
.cell { display: inline-block; width: 100%; padding: 1px 0; border-radius: 3px; font-family: var(--mono); }
.cell.complete { background: var(--good-bg); color: var(--good); }
.cell.partial  { background: var(--warn-bg); color: var(--warn); }
.cell.pending  { background: var(--idle-bg); color: var(--idle); }
.cell.failed   { background: var(--bad-bg);  color: var(--bad); }
.cell.notplayed{ color: var(--faint); }

.log { font-family: var(--mono); font-size: 11px; max-height: 260px; overflow: auto; }
.log div { padding: 1px 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: 9px; }
.log .err { color: var(--bad); white-space: pre-wrap; }

.console {
  font-family: var(--mono); font-size: 11px; background: #090c10;
  border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px;
  max-height: 320px; overflow: auto; white-space: pre-wrap; color: var(--text-2);
}
.controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }


.oct-wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.oct-legend { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.oct-legend button {
  display: flex; align-items: center; gap: 7px; background: none; border: 0;
  color: var(--text-2); cursor: pointer; padding: 2px 0; text-align: left; width: 100%;
}
.oct-legend button.off { opacity: .35; }
.swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.oct-note { color: var(--warn); font-size: 11px; }
.oct svg { max-width: 100%; height: auto; }
.oct.grey { opacity: .45; }



.oct-alarm {
  border: 1px solid var(--warn); border-left-width: 3px; border-radius: 4px;
  background: var(--warn-bg);
  color: var(--text); font-size: 12px; line-height: 1.45;
  padding: 8px 10px; margin-bottom: 10px;
}










.colorder { margin: 8px 0 10px; }
.colist { list-style: none; margin: 0; padding: 0; }
.corow {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 0; border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
}






.corow .cname { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text-2);
  overflow: hidden; white-space: normal; line-height: 1.25; }
.corow.on-line .cname { color: var(--text); font-weight: 600; }
.corow .note { flex: 0 0 auto; font-size: 10px; }
.corow .btn { flex: 0 0 auto; min-width: 30px; padding: 4px 6px; line-height: 1; }
.corow .btn:disabled { opacity: .3; }





.cofold {
  display: flex; align-items: center; gap: 6px;
  margin: 3px 0; font-size: 10px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .05em;
}
.cofold::before, .cofold::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--accent); opacity: .45;
}
.cofold span { flex: 0 0 auto; }





.corow .csort {
  flex: 0 0 auto; min-width: 30px; padding: 3px 6px; line-height: 1;
  font-size: 11px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
}
.corow .csort.on {
  background: var(--accent-dim); border-color: var(--accent); color: var(--accent);
  font-weight: 700;
}




.corow .cflag {
  flex: 0 0 auto; font-size: 9px; padding: 1px 4px; border-radius: 3px;
  background: var(--warn-bg, rgba(200,150,0,.16)); color: var(--warn);
  text-transform: uppercase; letter-spacing: .04em;
}































































.xi-pitch {
  width: 100%; max-width: 350px; height: auto; display: block;
  margin: 6px auto 0;


  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}































.xi-facewrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; padding-bottom: 4px;
}
.xi-facewrap.land { flex-direction: row; justify-content: center; }


.xi-sidewrap { display: block; min-width: 0; }


.xi-facewrap.land .xi-sidewrap { flex: 1 1 0; max-width: 540px; }




.xi-facewrap:not(.land) .xi-sidewrap { width: 100%; max-width: 350px; }


.xi-side { margin: 0; max-width: none; }




.xi-facewrap.land .xi-sidewrap:first-child .xi-side {
  border-right: 0; border-radius: 8px 0 0 8px;
}
.xi-facewrap.land .xi-sidewrap:last-child .xi-side {
  border-radius: 0 8px 8px 0;
}
.xi-facewrap:not(.land) .xi-sidewrap:first-child .xi-side {
  border-bottom: 0; border-radius: 8px 8px 0 0;
}
.xi-facewrap:not(.land) .xi-sidewrap:last-child .xi-side {
  border-radius: 0 0 8px 8px;
}






.xi-ends {
  display: flex; flex-direction: column; align-items: center; gap: 2px;






  margin: 4px auto 0; max-width: 1106px; padding: 0 13px;
  font-size: 10px; color: var(--text-2);
}
.xi-ends.land { flex-direction: row; justify-content: space-between; }
.xi-ends .kit-dot { margin-right: 4px; }




.turf-marks {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}









.xi-turf { fill: var(--pitch); }



.xi-stripe { fill: rgba(255, 255, 255, .05); }





.xi-plate { fill: rgba(8, 14, 20, .78); }
.xi-name { fill: #f4f7fa; font-family: var(--sans); font-weight: 600; }


















.xi-tether {
  stroke: var(--text-2); stroke-width: .45; opacity: .38;
  stroke-linecap: round; pointer-events: none;
}

.xi-halo { fill: rgba(244, 247, 250, .085); }

















.xi-goal {
  fill: none; stroke: var(--on-turf); stroke-width: 1.4;
  vector-effect: non-scaling-stroke; opacity: .6;
}
.xi-goal.mine { fill: var(--on-turf); stroke: none; opacity: .9; }



.xi-goal-n {
  fill: var(--on-turf); font-family: var(--sans); font-weight: 700;
  letter-spacing: .045em;
}




.xi-moved { fill: var(--warn, #f0a83c); }
.moved-key {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--warn, #f0a83c); vertical-align: baseline;
}





.pitch-key {
  font-size: 10.5px; line-height: 1.35; color: var(--muted);
  margin: 5px 2px 0; max-width: 330px;
}
.faded-key { opacity: .55; font-weight: 600; color: var(--text-2); }

.bench { margin-top: 8px; }






.bench-scroll {
  max-height: 154px; overflow-y: auto; overscroll-behavior: contain;

  padding-right: 4px;
}
.bench-scroll::-webkit-scrollbar { width: 7px; }
.bench-scroll::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 4px;
}
.bench-scroll::-webkit-scrollbar-thumb:hover { background: var(--raised); }
.bench-scroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.bench-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); display: flex; gap: 6px; align-items: baseline;
  margin-bottom: 4px;
}
.bench-row {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 0; font-size: 12px;
}
.bench-pct {
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
  width: 34px; text-align: right; flex: 0 0 auto;
}
.bench-bar {
  flex: 0 0 46px; height: 5px; border-radius: 3px;
  background: var(--line-soft); overflow: hidden;
}
.bench-bar i { display: block; height: 100%; border-radius: 3px; }
.bench-name {
  color: var(--text-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}




.ptr {
  position: fixed; top: 0; left: 50%; z-index: 45;
  transform: translate(-50%, -46px); opacity: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}


.ptr.snapping { transition: transform .22s cubic-bezier(.22,.9,.3,1), opacity .22s ease; }
.ptr-ring { width: 24px; height: 24px; transform: rotate(-90deg); }
.ptr-track { fill: none; stroke: var(--line); stroke-width: 3; }
.ptr-arc {
  fill: none; stroke: var(--text-2); stroke-width: 3; stroke-linecap: round;
  transform-origin: 50% 50%; transform: rotate(var(--ptr-spin, 0deg));
}

.ptr.ready { border-color: var(--accent); }
.ptr.ready .ptr-arc { stroke: var(--accent); }

.ptr.busy .ptr-ring { animation: spin .8s linear infinite; }
.ptr.busy .ptr-arc { transform: none; stroke-dashoffset: 60; }

.kit-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid; display: inline-block; flex: 0 0 auto; margin-right: 2px;
}

.oct-scale {
  display: inline-flex; border: 1px solid var(--line);
  border-radius: 5px; overflow: hidden; margin-bottom: 9px;
}
.oct-scale button {





  font: inherit; font-size: 11px; padding: 4px 11px;
  min-height: var(--ctl-h); box-sizing: border-box;
  background: var(--bg); border: 0; color: var(--text-2);
  cursor: pointer; white-space: nowrap;
}
.oct-scale button.on { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.inv { color: var(--warn); font-size: 9px; }

.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-axis { display: flex; flex-direction: column; gap: 2px; }
.bar-axis .lbl { font-size: 11px; color: var(--text-2); display: flex; gap: 6px; }
.bar-row { display: flex; align-items: center; gap: 5px; height: 12px; }
.bar-row .track { flex: 1; height: 7px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }








.bar-row .fill { display: block; padding: 0; height: 100%; border-radius: 3px; }
.bar-row .val { font-family: var(--mono); font-size: 10px; width: 26px; text-align: right; color: var(--muted); }


.empty { padding: 26px; text-align: center; color: var(--muted); }
.err-box { padding: 11px 13px; background: var(--bad-bg); border: 1px solid var(--bad); border-radius: 6px; color: var(--bad); font-family: var(--mono); font-size: 12px; }
.note { color: var(--muted); font-size: var(--fs-ui); }
.spinner { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }




.build-bar {
  position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);



  bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--accent);
  color: var(--text); font-size: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  max-width: calc(100vw - 24px);





  flex-wrap: wrap;
}
@media (max-width: 560px) {



  .build-bar { flex-direction: column; align-items: stretch; text-align: left; }
  .build-bar .btn { width: 100%; }
}



























.modal-bg {
  position: fixed; inset: var(--toolbar-h, 0) 0 var(--tabbar-h) 0;
  background: rgba(6, 8, 11, .72);
  display: flex; align-items: safe center; justify-content: center;
  z-index: 50; padding: 20px;
}

header, .rangebar { position: relative; z-index: 60; }




.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; max-width: 1100px; width: 100%; max-height: 100%; overflow: auto; }














.modal header { position: sticky; top: 0; z-index: 10; }






.fill {
  font-family: var(--mono); font-size: 10px; padding: 0 3px; border-radius: 2px;
  vertical-align: middle;
}
.fill.part { background: var(--warn-bg); color: var(--warn); }
.fill.low  { background: var(--idle-bg); color: var(--idle); }
.fill.none { background: var(--bad-bg);  color: var(--bad); }
.fill.calc { background: var(--accent-dim); color: var(--accent); }
.colpick label.empty-col { opacity: .55; }
.colpick .grp .note { text-transform: none; letter-spacing: 0; }


.tablewrap { max-height: 74vh; }


.colfilter {
  width: 100%; padding: 0 8px; margin-bottom: 7px; height: var(--ctl-h);
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  font-size: var(--fs-body);
}
thead th[draggable=true] { cursor: grab; }
thead th.dragging { opacity: .4; }
thead th.drop-target { box-shadow: inset 3px 0 0 var(--accent); }


.cmp-results { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; max-height: 230px; overflow: auto; }
.cmp-results button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 4px 8px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 4px; color: var(--text); cursor: pointer;
}
.cmp-results button:hover { background: var(--raised); border-color: var(--accent); }
.cmp-results button:disabled { opacity: .4; cursor: not-allowed; }
.cmp-results .meta { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 11px; }





.cgrip {
  display: none; cursor: grab; touch-action: none; user-select: none;
  color: var(--muted); opacity: .55; font-size: 11px; letter-spacing: -1px;
  padding: 0 4px; margin-left: -2px; align-self: center;
}















@media (hover: hover) and (pointer: fine) {
  .cgrip { display: inline-block; }
}
.cgrip:hover { opacity: 1; color: var(--text); }
.cgrip:active { cursor: grabbing; color: var(--accent); }







.colpick .cgrip.cadd { flex: 0 0 auto; }
li.corow.codrag { opacity: .45; }






li.corow.on-line.cofell .cname { color: var(--text-2); font-weight: 400; }
li.corow.on-line.cofell { opacity: .62; }


li.cocaret {
  height: 0; margin: 0; padding: 0; list-style: none;
  border-top: 2px solid var(--accent);
}





.oct-wrap { position: relative; }
.octpop {
  position: absolute; z-index: 40; pointer-events: auto;
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel-2, var(--panel));
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  font-size: 11px; line-height: 1.25; white-space: nowrap;
}



.octpop-who { font-weight: 600; border-left: 3px solid; padding-left: 6px; }


.octpop-ax { color: var(--muted); text-transform: uppercase; font-size: var(--fs-cap);
             letter-spacing: .05em; padding-left: 9px; }
.octpop-v { padding-left: 9px; font-family: var(--mono); }
.octpop-pct { color: var(--muted); margin-left: 6px; font-family: var(--sans); }
.octpop-null { color: var(--muted); font-style: italic; font-family: var(--sans); }


.octpop-help { display: block; color: var(--muted); font-size: 10px;
  white-space: normal; max-width: 240px; padding-left: 9px; margin-top: 3px; }



.oct-pt { cursor: pointer; }








.cmpfx { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel-2, var(--panel)); }











.cmpfx-lens { justify-self: start; }
.cmpfx-lens button { padding: 0 8px; font-size: 11px; }

.cmpfx-gws { grid-column: 2; grid-row: 2; display: flex; gap: 3px; }

.cmpfx-gw { flex: 1 1 0; max-width: 46px; text-align: center; font-size: var(--fs-cap);
  color: var(--muted); font-variant-numeric: tabular-nums; }
.cmpfx-row + .cmpfx-row { border-top: 1px solid var(--line-soft); padding-top: 6px; margin-top: 6px; }
.cmpfx-who { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmpfx-who .swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; align-self: center; }
.cmpfx-who i { font-style: normal; font-weight: 400; font-size: 11px; color: var(--muted); }


.cmpfx-score { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 760px) {
  .cmpfx-head, .cmpfx-row { grid-template-columns: minmax(84px, 120px) 1fr 28px; gap: 6px 8px; }
  .cmpfx-run .tr-chip { min-width: 0; max-width: 40px; height: 18px; font-size: 9.5px; }
  .cmpfx-who { font-size: 12px; }
  .cmpfx-who i { display: none; }
}




td.fxrun { text-align: left; }
td.fxrun .tr-run { display: inline-flex; gap: 2px; }







td.fxrun .tr-chip {
  font-size: var(--fs-ui); padding: 1px 3px; min-width: 20px;
  flex: 0 0 auto; max-width: none;
}







.col-grip {
  position: absolute; top: 0; right: 0; width: 6px; height: 100%;
  cursor: col-resize; user-select: none;
}
.col-grip:hover { background: var(--accent); opacity: .55; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing * { cursor: col-resize !important; }



table.sized th, table.sized td { overflow: hidden; text-overflow: ellipsis; }














table.sized { width: auto; }








thead th:has(> .col-grip:hover), thead th.resizing-col {
  background: var(--accent-dim); color: var(--text);
}










#tblCompare { width: auto; min-width: min(100%, 420px); }
#tblCompare td.sticky-l, #tblCompare th.sticky-l {
  width: 210px; max-width: 210px; white-space: normal; line-height: 1.25;
}
#tblCompare th.cmp-col, #tblCompare tbody td:not(.txt) {
  text-align: right; font-variant-numeric: tabular-nums;
  width: 108px; min-width: 92px;
}

#tblCompare tbody td + td, #tblCompare thead th + th { border-left: 1px solid var(--line-soft); }


#tblCompare tbody tr:nth-child(even) td { background: var(--panel-2); }
#tblCompare tbody tr:hover td { background: var(--accent-dim); }



td.endpoint {
  white-space: normal; max-width: 230px;
  overflow-wrap: anywhere; word-break: break-word;
}





.infl-bar { display: block; width: 100%; height: 7px; border-radius: 3px;
            background: var(--line-soft); overflow: hidden; }
.infl-bar > .fill { display: block; padding: 0; height: 100%;
                    border-radius: 3px; background: var(--accent); }







.hb-intro {
  position: relative; margin: 0 0 10px; padding: 10px 34px 10px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 6px; background: var(--panel-2);
  font-size: var(--fs-ui); line-height: 1.5; color: var(--text-2);
}
.hb-intro b { color: var(--text); }




.hb-intro-x {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px;
  background: none; border: 0; border-radius: 5px; cursor: pointer;
  color: var(--text-2); --ico: 8px;
}
.hb-intro-x:hover { background: var(--panel); color: var(--text); }








.tc-link { color: var(--accent); text-decoration: underline;
           text-underline-offset: 2px; overflow-wrap: anywhere; }
.tc-link:hover { text-decoration-thickness: 2px; }






.xpw { font-variant-numeric: tabular-nums; }
.xpw th, .xpw td { white-space: nowrap; }
.xpw td.mono, .xpw th:not(.txt) { text-align: right; }
.xpw td:last-child, .xpw th:last-child { border-left: 1px solid var(--line-soft); }
.xpw tfoot td { border-top: 1px solid var(--line);
                color: var(--text-2); font-weight: 600; }













.mp-split { display: flex; gap: 10px; align-items: stretch; }
.mp-split .mp-half { flex: 1 1 0; min-width: 0; }
.mp-split .mp-half-t {
  font-size: var(--fs-note); font-weight: 700; text-align: center;
  margin: 0 0 4px; text-transform: uppercase; letter-spacing: .04em;
}


.mp-split .mp-nm { font-size: 11px; line-height: 15px; }
.mp-split .mp-mk { transform: scale(.85); }

@media (max-width: 760px) {


  .mp-split { flex-direction: column; gap: 12px; }
  .mp-split .mp-nm { font-size: 12px; line-height: 16px; }
}







.diffs { font-variant-numeric: tabular-nums; }
.diffs th:not(.txt), .diffs td:not(.txt) { text-align: right; }
.diffs td.sticky-l { display: flex; align-items: center; gap: 6px; }
.diffs td.sticky-l b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diffs .mp-av { flex: 0 0 auto; }









.sq-skel { opacity: .32; pointer-events: none; }
.sq-skel .sq-name { color: var(--faint); }









.shot-faces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.shot-faces .mt-shooter { flex: 1 1 150px; min-width: 0; }













.tr-xp2 {
  margin-left: 4px; padding-left: 4px; font-weight: 600;
  border-left: 1px solid var(--line); color: var(--text-2);
}









.fdr-inline { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fdr-inline .field.inline > span { font-size: var(--fs-note); color: var(--text-2); }
.fdr-inline .toggle button { padding: 0 7px; font-size: var(--fs-note); }



@media (max-width: 760px) {
  .fdr-inline { flex: 1 1 100%; }
  .fdr-inline .field.inline { flex: 1 1 auto; min-width: 0; }
  .fdr-inline .toggle { flex: 1 1 auto; }
  .fdr-inline .toggle button { flex: 1 1 auto; }
}





























@media (min-width: 761px) {
  #tblStrength { width: auto; }
}






.cad-scale { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
             margin: 0 0 8px; }
.cad-band { font-variant-numeric: tabular-nums; font-size: var(--fs-note);
            padding: 2px 8px; border-radius: 999px; color: var(--text-2);
            border: 1px solid var(--line); cursor: help; }
.cad-band.on { color: var(--accent); border-color: var(--accent);
               background: var(--accent-dim); font-weight: 700; }
.cad-sep { color: var(--text-3, var(--text-2)); opacity: .5; }






.h2h tr.h2h-us > td { background: var(--accent-dim); }
.h2h tr.h2h-us > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }







.sc-grid { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .sc-grid { grid-template-columns: 1fr 1fr; } }

.sc-card { border: 1px solid var(--line); border-radius: 6px;
           background: var(--panel-2, var(--panel)); overflow: hidden; }
.sc-card > summary { cursor: pointer; padding: 7px 10px; display: flex;
                     align-items: center; gap: 8px; flex-wrap: wrap;
                     font-size: var(--fs-ui); }
.sc-card > summary::-webkit-details-marker { display: none; }
.sc-card[open] > summary { border-bottom: 1px solid var(--line-soft); }




.sc-sum { flex: 1 1 100%; }
@media (min-width: 620px) { .sc-sum { flex: 1 1 auto; text-align: right; } }

.sc-score { font-variant-numeric: tabular-nums; font-weight: 700;
            min-width: 44px; padding: 1px 6px; border-radius: 4px;
            text-align: center; }
.sc-score.good { color: var(--good); background: var(--good-bg); }
.sc-score.ok   { color: var(--warn); background: var(--warn-bg); }
.sc-score.bad  { color: var(--bad);  background: var(--bad-bg); }

.sc-body { padding: 8px 10px 10px; }
.sc-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.sc-lab { flex: 0 0 78px; color: var(--text-2); font-size: var(--fs-note); padding-top: 3px; }
.sc-men { display: flex; flex-wrap: wrap; gap: 4px; }




.sc-man { display: inline-flex; align-items: center; gap: 5px;
          padding: 2px 7px 2px 3px; border-radius: 999px;
          font-size: var(--fs-note); line-height: 1.5;
          border: 1px solid var(--line); cursor: help; }
.sc-p { display: inline-flex; align-items: center; justify-content: center;
        min-width: 22px; height: 17px; padding: 0 3px; border-radius: 999px;
        font-variant-numeric: tabular-nums; font-size: 10px; font-weight: 700;
        background: color-mix(in srgb, currentColor 18%, transparent); }
.sc-man.sc-hit { color: var(--good);
                 border-color: color-mix(in srgb, var(--good) 45%, transparent);
                 background: color-mix(in srgb, var(--good) 10%, transparent); }
.sc-man.sc-miss { color: var(--bad);
                  border-color: color-mix(in srgb, var(--bad) 45%, transparent);
                  background: color-mix(in srgb, var(--bad) 10%, transparent); }



.sc-man.sc-surprise { color: var(--warn);
                      border-color: color-mix(in srgb, var(--warn) 45%, transparent);
                      background: color-mix(in srgb, var(--warn) 10%, transparent); }
.sc-note { margin: 4px 0 0; white-space: normal; }


.collapse {
  background: none; border: 0; color: var(--text-2); cursor: pointer;
  font-size: 12px; line-height: 1;




  display: inline-flex; align-items: center; justify-content: center;




  min-width: 34px; min-height: 26px;
  margin: -7px -10px; padding: 0;
  vertical-align: middle;
}
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .collapse { min-height: 36px; margin: -12px -10px; }
}
.collapse:hover { color: var(--accent); }


.collapse[aria-expanded="false"] > span,
.collapse[aria-expanded="false"] { transform: rotate(-90deg); }
.panel-body.collapsed { display: none; }


.eo-bar { display: flex; align-items: center; gap: 5px; }
.eo-bar .track { flex: 1; height: 8px; background: var(--line-soft); border-radius: 3px; position: relative; overflow: hidden; }






.eo-bar .theirs { position: absolute; top: 0; height: 100%; background: var(--accent); opacity: .75; }
.eo-bar .mine { position: absolute; top: 0; height: 100%; border-right: 2px solid var(--warn); }
.swing-pos { color: var(--good); }
.swing-neg { color: var(--bad); }
.headline { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.headline .cell { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.headline .cell .k { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.headline .cell .v { font-family: var(--mono); font-size: 19px; font-variant-numeric: tabular-nums; }
.headline .cell .d { font-family: var(--mono); font-size: 11px; }
#eoFoot:not(:empty) { border-top: 1px solid var(--line); }











:root {
  --heat-1: #26506e;
  --heat-2: #1f7a8c;
  --heat-3: #2aa39a;
  --heat-4: #5ec46a;
  --heat-5: #b8cf3f;
  --heat-6: #e5a13a;
  --heat-7: #de5b3c;

  --fdr-1: #5bcd8a;
  --fdr-2: #a8d972;
  --fdr-3: #d2d6da;
  --fdr-4: #ecb44a;
  --fdr-5: #ed8b82;
}





.hb-standing {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  padding: 9px 13px; border-bottom: 1px solid var(--line);
}
.hb-standing .k { display: flex; flex-direction: column; line-height: 1.15; }
.hb-standing .k b { font-size: 17px; font-variant-numeric: tabular-nums; }
.hb-standing .k i {
  font-style: normal; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.hb-lead {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
  padding: 6px 13px; font-size: 12px;
}
.hb-lead-row b { color: var(--muted); font-size: 10px; margin-right: 3px; }
.hb-lead-row i { font-style: normal; color: var(--accent); margin-left: 4px;
  font-variant-numeric: tabular-nums; }

.rx-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.rx {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px; border-radius: 12px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted);
}
.rx:hover { border-color: var(--accent); color: var(--text-2); }

.rx.mine { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }


.rx.locked { opacity: .38; cursor: not-allowed; }
.rx i { font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums; }


.rx-g { width: 19px; height: 19px; display: block; }
.rx { position: relative; overflow: visible; }




@keyframes rx-pop {
  0%   { transform: scale(1); }
  22%  { transform: scale(.82); }
  55%  { transform: scale(1.22); }
  78%  { transform: scale(.96); }
  100% { transform: scale(1); }
}
.rx.pop .rx-g { animation: rx-pop .38s cubic-bezier(.34, 1.56, .64, 1); }



.rx-burst {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  pointer-events: none;
}
.rx-burst i {
  position: absolute; left: -2px; top: -2px; width: 4px; height: 4px;
  border-radius: 50%;
  animation: rx-spark .5s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes rx-spark {
  0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}



@media (prefers-reduced-motion: reduce) {
  .rx.pop .rx-g { animation: none; }
  .rx-burst { display: none; }
}

.pr-count {
  display: flex; align-items: center; gap: 8px; margin: 8px 0;
  font-size: 12px; color: var(--muted);
}
.pr-count b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.pr-list { max-height: 58vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.pr-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 5px 7px; border-radius: 6px; cursor: pointer;
  background: var(--panel-2); border: 1px solid transparent; color: var(--text);
}
.pr-row:hover { border-color: var(--line); }
.pr-row.on { border-color: var(--accent); background: var(--accent-dim); }
.pr-row .nm { flex: 1 1 auto; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-row .st { flex: 0 0 auto; font-size: 10px; }


.pr-row .sh {
  position: relative; flex: 0 0 62px; height: 16px; border-radius: 3px;
  background: var(--bg); overflow: hidden; display: flex;
  align-items: center; justify-content: flex-end;
}
.pr-row .sh .bar { position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent-dim); }
.pr-row .sh i { position: relative; font-style: normal; font-size: 10px;
  padding-right: 4px; font-variant-numeric: tabular-nums; }
.pr-row .sh i.none { color: var(--muted); }
.pr-row:disabled { opacity: .55; cursor: not-allowed; }







.tc-compose { display: flex; flex-direction: column; gap: 8px; }
.tc-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tc-text {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 62px;
  padding: 7px 9px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  font-family: var(--sans); line-height: 1.4;
}
.tc-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-thumb { position: relative; display: inline-block; }
.tc-thumb img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line); display: block;
}


.tc-thumb b {
  position: absolute; left: 3px; top: 3px; padding: 0 5px; border-radius: 4px;
  background: rgba(8,14,20,.8); color: #f4f7fa; font-size: 11px;
}
.tc-thumb button { position: absolute; right: 2px; top: 2px; }
.tc-poll-edit {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border: 1px dashed var(--line); border-radius: 6px;
}

.tc-card { margin-bottom: 10px; }
.tc-card.hidden { opacity: .5; outline: 1px dashed var(--warn); }





.tc-card.news { border-left: 0; }
.tc-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 5px; }
.tc-kind {




  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 6px; border-radius: 9px;
  background: var(--raised); color: var(--muted);
}
.tc-kind.news { background: var(--accent-dim); color: var(--accent); }



.tc-text-out {
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  line-height: 1.45; margin-bottom: 6px;
}
.tc-imgs { display: grid; gap: 5px; grid-template-columns: repeat(2, 1fr); }
.tc-imgs.n1 { grid-template-columns: 1fr; }
.tc-imgs.n3, .tc-imgs.n4 { grid-template-columns: repeat(2, 1fr); }
.tc-imgs a { position: relative; display: block; }











.tc-imgs img {
  width: 100%; min-height: 44px; max-height: 340px; object-fit: contain;
  display: block;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
}
.tc-imgs b {
  position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 4px;
  background: rgba(8,14,20,.8); color: #f4f7fa; font-size: 12px; font-weight: 700;
}

.tc-poll { margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.tc-q { font-weight: 600; font-size: 13px; }


.tc-opt {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); cursor: pointer; overflow: hidden;
  text-align: left;
}
.tc-opt .bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent-dim); transition: width .18s ease;
}
.tc-opt .lab { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: 7px; }
.tc-opt .lab img {
  width: 34px; height: 34px; object-fit: cover; border-radius: 4px; flex: 0 0 auto;
}
.tc-opt .n { position: relative; flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.tc-opt.mine { border-color: var(--accent); }
.tc-opt.mine .n { color: var(--accent); }




.tc-edited {
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 8px;
  padding: 0 5px;
}


.tc-reply.gone { opacity: .55; font-style: italic; }
.tc-editbox { margin-top: 7px; display: flex; flex-direction: column; gap: 6px; }




.tc-replybox {
  margin: 7px 0 4px; display: flex; flex-direction: column; gap: 6px;













  padding-left: 9px; border-left: 2px solid var(--edge, var(--line));
}
.tc-replybox textarea { width: 100%; box-sizing: border-box; }


.tc-replies:has(.tc-replybox) > button[data-reply],
.tc-replies:has(.tc-replybox) > button[data-areply] { display: none; }

.tc-replies { margin-top: 8px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.tc-reply {
  font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line-soft);
  overflow-wrap: anywhere;
}
.tc-sep {
  margin: 14px 0 8px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}











.tr-money {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 4px;
}
.tr-money .k { display: flex; flex-direction: column; line-height: 1.15; }
.tr-money .k b { font-size: 17px; font-variant-numeric: tabular-nums; }
.tr-money .k i {
  font-style: normal; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.tr-money .k.bad b { color: var(--bad); }



.tr-money .k b s {
  font-size: 11px; font-weight: 400; color: var(--muted);
  margin-left: 5px; text-decoration-thickness: 1px;
}

.tr-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 10px 0 4px;
}








.tr-list { width: 100%; max-width: 620px; margin-inline: auto; }
.tr-moves { display: flex; flex-wrap: wrap; gap: 8px; }

.tr-head, .tr-row {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.tr-head { color: var(--muted); font-size: 10px; }
.tr-row { padding: 5px 0; cursor: pointer; }
.tr-row:hover { background: var(--row-hover, rgba(127,127,127,.10)); }





.tr-row.moved-in { box-shadow: inset 3px 0 0 var(--accent); }









.tr-row.sq-picked {
  background: var(--accent-dim);
  box-shadow: inset 3px 0 0 var(--accent);
}
.tr-row.sq-target { box-shadow: inset 3px 0 0 var(--accent); }
.tr-row.sq-warn { box-shadow: inset 3px 0 0 var(--warn); }




.tr-list.sq-arming .tr-row:not(.sq-picked):not(.sq-target):not(.sq-warn) {
  opacity: .55;
}
.tr-row.sq-over { background: var(--accent-dim); }





.tr-draft.live.just-landed {
  animation: tr-landed 2.2s ease-out 1;
}
@keyframes tr-landed {
  0%, 55% { box-shadow: 0 0 0 2px var(--accent); }
  100%    { box-shadow: 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-draft.live.just-landed { animation: none; box-shadow: 0 0 0 2px var(--accent); }
}
.tr-xp.hd { visibility: hidden; }
.tr-xp.null { color: var(--faint); }
.sq-said.inl { position: static; display: inline-grid; width: 11px; height: 11px;
  font-size: 7px; margin-left: 5px; vertical-align: 1px; }
.tr-row .who, .tr-head .who {
  flex: 1 1 132px; min-width: 132px; display: flex; flex-direction: column; gap: 1px;
}
.tr-row .nm { font-size: 13px; font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tr-row .meta { font-size: 10px; color: var(--muted); }
.tr-row .meta .flag,
.tr-cand .meta .flag { color: var(--warn); text-transform: uppercase; }
.tr-row .pos { align-self: flex-start; }

.trfx { display: flex; gap: 2px; overflow-x: auto; padding-bottom: 2px; }
.trfx-cell {
  flex: 0 0 auto; min-width: 34px; text-align: center;
  padding: 3px 3px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .01em;



  color: #10141a;
}
.trfx-cell i { font-style: normal; font-weight: 500; opacity: .7; margin-left: 1px; }
.trfx-cell.hd { background: none; color: var(--muted); font-weight: 500; }
.trfx-cell.d1 { background: var(--fdr-1); }
.trfx-cell.d2 { background: var(--fdr-2); }
.trfx-cell.d3 { background: var(--fdr-3); }
.trfx-cell.d4 { background: var(--fdr-4); }
.trfx-cell.d5 { background: var(--fdr-5); }


.trfx-cell.dbl { outline: 1px solid var(--accent); }
.trfx-cell.blank {
  background: none; border: 1px dashed var(--line); color: var(--muted);
  font-weight: 500;
}









.tr-move {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 5px 4px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel-2, var(--panel));
  font-size: 13px;
}
.tr-move .out { color: var(--bad); }
.tr-move .in { color: var(--good); }
.tr-move i { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 3px; }
.tr-move .arrow { color: var(--muted); }
.tr-move button { padding: 2px 7px; line-height: 1.15; }
.tr-move button:hover { background: var(--bad); border-color: var(--bad); color: var(--bg); }






.sortf-row { display: flex; align-items: stretch; gap: 6px; }
.sortf-row select { min-width: 132px; max-width: 190px; }
.sortf > .note { display: block; margin-top: 3px; max-width: 240px; }
.sortf > .note:empty { display: none; }
@media (max-width: 760px) {
  .sortf-row select { min-width: 108px; max-width: 150px; }
}




.tmatch-head, .tmatch {
  display: grid; align-items: center;


  grid-template-columns: 30px 1fr 58px repeat(var(--tm-cols, 2), 46px); gap: 8px;
  padding: 5px 8px; text-align: left; font-variant-numeric: tabular-nums;
}
.tmatch-head { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding-bottom: 3px; }
.tmatch-head span:nth-child(n+3),
.tmatch .sc, .tmatch .xf, .tmatch .xa { text-align: right; }
.tmatch {
  width: 100%; border: 0; border-top: 1px solid var(--line-soft);
  background: none; color: var(--text); font-size: 12.5px; cursor: pointer;
}
.tmatch:hover, .tmatch:focus-visible { background: var(--row-hover, rgba(127,127,127,.10)); }
.tmatch .gw { color: var(--muted); font-size: 11px; }
.tmatch .opp i { font-style: normal; color: var(--muted); }


.tmatch.r-W { box-shadow: inset 3px 0 0 var(--good); }
.tmatch.r-L { box-shadow: inset 3px 0 0 var(--bad); }
.tmatch.r-D { box-shadow: inset 3px 0 0 var(--muted); }
.tmatch .xf { color: var(--good); }
.tmatch .xa { color: var(--bad); }



.tmatch-wrap { max-height: 340px; overflow-y: auto; max-width: 480px; }




.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: inherit;


















  display: inline-flex; align-items: center;
  min-height: 18px;
}
.linkish:hover, .linkish:focus-visible { color: var(--accent); text-decoration: underline; }





.tc-wrap { margin: 10px 0 6px; }
.tc-table { width: auto; min-width: 320px; font-size: 12.5px; }
.tc-table th, .tc-table td { padding: 5px 10px; text-align: right;
  font-variant-numeric: tabular-nums; }
.tc-table th.txt, .tc-table td.txt { text-align: left; color: var(--muted); }
.tc-table thead th { font-weight: 600; color: var(--text); }
.tc-table tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.tc-best { color: var(--accent); font-weight: 600; }

.tc-miss { font-style: normal; font-size: 10px; color: var(--muted); margin-left: 3px; }
.tc-ok { color: var(--good); }
.tc-bad { color: var(--bad); }

.tc-warn { color: var(--warn); }
.tc-only { text-align: right; font-size: 11.5px; color: var(--text-2);
  max-width: 220px; }



.sq-said {
  position: absolute; top: 27px; z-index: 2;
  left: calc((var(--sq-w) - var(--sq-jw)) / 2 - 4px);
  width: 14px; height: 14px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #06231f; font-size: 9px; line-height: 1;
}





.tc-stack { display: none; }
@media (max-width: 760px) {
  .tc-wide { display: none; }
  .tc-stack { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 6px; }
}
.tc-card {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); padding: 8px 10px;
}
.tc-card-h {
  font-weight: 600; font-size: 13px; margin-bottom: 5px;
  padding-bottom: 5px; border-bottom: 1px solid var(--line-soft);
}


.tc-kv {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 3px 0; font-size: 12.5px;
}
.tc-kv + .tc-kv { border-top: 1px solid var(--line-soft); }
.tc-k { color: var(--muted); min-width: 0; }
.tc-v { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.tc-v.tc-only { white-space: normal; max-width: 60%; }






























.sw-vs {




  max-width: 940px; margin: 10px auto 6px;
}









.sw-row {
  display: grid; grid-template-columns: 1fr 170px 1fr;
  align-items: stretch; gap: 0;
}
.sw-row > div {
  padding: 6px 10px; border-top: 1px solid var(--line-soft); min-width: 0;
}


.sw-row > .sw-out { text-align: right; }
.sw-row > .sw-in { text-align: left; }
.sw-row > .sw-mid {
  text-align: center; background: var(--panel-2);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}


.sw-row.sw-head {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel);
}
.sw-row.sw-head > div { border-top: 0; padding-top: 2px; padding-bottom: 7px; }
.sw-side-k {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: 2px;
}
.sw-out .sw-side-k { color: var(--bad); }
.sw-in .sw-side-k { color: var(--good); }
.sw-who { display: block; font-weight: 700; font-size: 13px; }
.sw-who i { display: block; font-style: normal; font-size: 10px; color: var(--muted); font-weight: 400; }


.sw-big2 {
  display: block; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.sw-split { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.5; }
.sw-one { display: inline-block; margin-left: 8px; white-space: nowrap; }
.sw-in .sw-one { margin-left: 0; margin-right: 8px; }
.sw-one i { font-style: normal; opacity: .8; margin-right: 3px; }


.sw-one u { text-decoration: none; opacity: .65; margin-left: 3px; }


.sw-each .sw-split { font-size: 12px; color: var(--text-2); }




.sw-win .sw-big2 { color: var(--accent); font-weight: 700; }
.sw-lab { display: block; font-size: 11px; color: var(--muted); line-height: 1.3; }
.sw-dv {
  display: block; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.sw-nod { font-size: 10px; }






@media (max-width: 760px) {
  .sw-row { grid-template-columns: 1fr 1fr; }


  .sw-row > .sw-mid {
    grid-column: 1 / -1; order: -1;
    border-left: 0; border-right: 0; text-align: left;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding-top: 5px; padding-bottom: 3px;
  }
  .sw-row > .sw-out { grid-column: 1; border-top: 0; }
  .sw-row > .sw-in { grid-column: 2; border-top: 0; }
  .sw-row.sw-head { position: static; }
  .sw-row.sw-head > .sw-mid { display: none; }
  .sw-lab { display: inline; }
  .sw-dv { display: inline; }
  .sw-one { display: block; margin: 0; }
  .sw-in .sw-one { margin: 0; }
}



.sw-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .sw-pickers { grid-template-columns: 1fr; } }
.sw-pick { min-width: 0; border-radius: 8px; padding: 8px 10px;
  border: 1px solid var(--line); background: var(--panel-2); }



.sw-pick.sw-out { border-left: 3px solid var(--bad); }
.sw-pick.sw-in { border-left: 3px solid var(--good); }
.sw-pick-h { font-weight: 700; font-size: 12.5px; margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 7px; }
.sw-box {
  width: 100%; height: var(--ctl-h); padding: 0 8px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px; font-size: var(--fs-ui);
}
.sw-pill.sw-out { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.sw-pill.sw-in { border-color: var(--good); color: var(--good); background: var(--good-bg); }
.sw-pill button { background: none; border: 0; color: inherit; cursor: pointer;
  margin-left: 2px; font-size: 12px; line-height: 1; }




.sw-bench {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid var(--line) !important; border-radius: 999px;
  padding: 1px 5px; opacity: .65; margin-left: 5px;
}
.sw-bench:hover { opacity: 1; }
.sw-bench.on {
  opacity: 1; border-color: var(--warn) !important; color: var(--warn);
  background: var(--warn-dim, rgba(236, 180, 74, .13)) !important;
}




.sw-one.sw-sat { opacity: .5; text-decoration: line-through; }
.sw-one.sw-sat i { text-decoration: none; }




.sw-verdict { margin-top: 12px; }
.sw-bigs { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-big {
  flex: 1 1 120px; min-width: 110px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2);
}


.sw-big.sw-net { border-color: var(--accent); background: var(--raised); }
.sw-big-v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.15; }
.sw-big-k { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sw-says { margin-top: 8px; }
.sw-hole { margin-top: 6px; color: var(--warn); }




.sw-mrow.sw-out .cmp-mname { border-color: var(--bad); }
.sw-mrow.sw-in .cmp-mname { border-color: var(--good); }


.sw-mrow.sw-turn { border-top: 1px solid var(--line); padding-top: 7px; }




































.ico { position: relative; }
.ico::before, .ico::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: currentColor; border-radius: 1px;
}

.ico-x::before, .ico-x::after {
  width: var(--ico, 9px); height: var(--ico-w, 1px);
  transform: translate(-50%, -50%) rotate(45deg);
}
.ico-x::after { transform: translate(-50%, -50%) rotate(-45deg); }


.ico-minus::before, .ico-plus::before, .ico-plus::after {
  width: var(--ico, 9px); height: var(--ico-w, 1px);
  transform: translate(-50%, -50%);
}
.ico-minus::after { content: none; }
.ico-plus::after { transform: translate(-50%, -50%) rotate(90deg); }










.ico-prev::before, .ico-next::before {
  width: var(--ico, 6px); height: var(--ico, 6px);
  background: none; border-radius: 0;
  border-left: var(--ico-w, 1.5px) solid currentColor;
  border-top: var(--ico-w, 1.5px) solid currentColor;
}
.ico-prev::before { transform: translate(calc(-50% + 2px), -50%) rotate(-45deg); }
.ico-next::before {
  border-left: 0; border-top: var(--ico-w, 1.5px) solid currentColor;
  border-right: var(--ico-w, 1.5px) solid currentColor;
  transform: translate(calc(-50% - 2px), -50%) rotate(45deg);
}
.ico-prev::after, .ico-next::after { content: none; }











.btn.ico { width: 25px; padding-left: 0; padding-right: 0; }




.mt-pclose.ico, .fx-proj-x.ico { --ico: 13px; --ico-w: 1.5px; }

.tc-tick { display: inline-flex; align-items: center; }
.tr-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tr-draft > b { min-width: 0; }
.tr-draft .btn { flex: 0 0 auto; }
.tr-drafts .tc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-drafts .tc-row .colfilter { margin: 0; height: 26px; }
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .tr-drafts .tc-row .colfilter { height: 36px; }
}


.tc-only { white-space: normal; word-break: break-word; max-width: 220px;
  max-height: 84px; overflow-y: auto; }




.my-update:empty { display: none; }
.my-update { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mu-said, .mu-plan {
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  background: var(--panel-2, var(--panel));
  display: flex; flex-direction: column; gap: 6px;
}
.mu-said { border-color: var(--accent); }
.mu-moves { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.mu-move { white-space: nowrap; padding: 2px 8px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel); }
.mu-moves .arrow { color: var(--muted); margin: 0 3px; }
.mu-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }


.tc-nope { display: block; font-style: normal; font-size: 10px;
  font-weight: 400; color: var(--warn); }















@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .mp-sub, .oct-legend button, .fx[role="button"], .fx-pair .fx,
  .bench-row { min-height: 24px; }
  .linkish { min-height: 24px; min-width: 24px; }
  .toggle button { min-width: 24px; }
  #cmpSelected [data-rm] { min-width: 24px; min-height: 24px; }
  .mt-goal { min-height: 24px; padding-block: 3px; }
}




@media (max-width: 760px) {
  #page-myteam .filters { gap: 8px; }
  #page-myteam #entryId { width: 68px; min-width: 0; }
  #page-myteam #myGw { width: 66px; min-width: 0; }
  #page-myteam #myCohort { width: 100%; min-width: 96px; }
  #page-myteam .field:has(> #myCohort) { flex: 1 1 96px; min-width: 0; max-width: 150px; }
  #page-myteam #btnImportTeam { padding: 0 8px; }
}
.help-text { font-size: var(--fs-body); line-height: 1.5; white-space: pre-line; }
#tblMyTeam th[data-key] { cursor: pointer; }
#tblMyTeam th.sorted { color: var(--accent); }
.eo-name { font-weight: 500; }









































#fxLens, #fxBasis { display: inline-flex; flex: 0 0 auto; }
@media (max-width: 760px) {



  #fxLens, #fxBasis { flex: 0 1 auto; min-width: 0; }
  #fxLens > .field, #fxBasis > .field { min-width: 0; }
  #fxLens .toggle button, #fxBasis .toggle button { padding: 0 8px; }
}

@media (max-width: 760px) {
  .filters .field.statf { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .filters .statf-row { min-width: 0; }
  .filters .statf-row select { flex: 1 1 60px; min-width: 0; }
  .filters .statf-row input[type=number] { flex: 0 1 44px; width: 44px; min-width: 0; }
}














@media (max-width: 760px) {
  #playerFilters, #teamFilters {
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; align-items: start;
  }
  #playerFilters > .field, #teamFilters > .field { min-width: 0; }



  #playerFilters, #teamFilters { grid-auto-flow: row dense; }



  #playerFilters > .field.wide, #teamFilters > .field.wide,
  #playerFilters > .field.statf, #teamFilters > .field.statf { grid-column: 1 / -1; }


  #playerFilters > .field:has(> #fPos) { grid-column: 1 / -1; }
  #playerFilters > .field.wide, #teamFilters > .field.wide { grid-column: auto; }
  #playerFilters .sortf-row, #teamFilters .sortf-row { flex-wrap: nowrap; min-width: 0; }
  #playerFilters .sortf-row select, #teamFilters .sortf-row select { flex: 1 1 50px; min-width: 0; }
  #playerFilters .sortf-row .toggle button, #teamFilters .sortf-row .toggle button { padding: 0 7px; }

  #playerFilters .field > input, #teamFilters .field > input,
  #playerFilters .field > select, #teamFilters .field > select { width: 100%; min-width: 0; }
  #playerFilters .pair, #teamFilters .pair { display: flex; gap: 5px; min-width: 0; }
  #playerFilters .pair > input, #teamFilters .pair > input { flex: 1 1 0; min-width: 0; }
  #playerFilters .pill-row, #teamFilters .pill-row { flex-wrap: wrap; }
}






















@media (max-width: 760px) {
  #trQuick { gap: 8px; }
  #trControls { gap: 8px; }
  #trControls #trEntry { width: 68px; min-width: 0; }





  #trControls #trFt { width: 56px; min-width: 0; }







  #trQuick .field.statf, #trControls .field.statf {
    flex: 1 1 190px; min-width: 0; max-width: 100%; }
  #trQuick .statf-row select, #trControls .statf-row select { flex: 1 1 60px; min-width: 0; }
  #trQuick .statf-row input[type=number],
  #trControls .statf-row input[type=number] { flex: 0 1 44px; width: 44px; }
  #trQuick .statf-modes, #trControls .statf-modes { flex-wrap: wrap; }







  #trQuick #trLens button { padding: 5px 9px; }
}








.field > span > em { font-style: inherit; }
.lbl-short { display: none; }
@media (max-width: 760px) {
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
}


.hdr-cog { position: relative; }
.hdr-build { display: none; }
.hdr-build.bad { display: block; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--bad, #e0503c); }


.tw-range { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.tw-range .field.inline select { width: auto; min-width: 58px; }


.up-head { display: flex; align-items: center; gap: 8px; }
.up-n { margin-left: auto; }
.up-n button { padding: 0 10px; font-size: var(--fs-ui); }



.up-list { max-height: 84px; overflow-y: auto; }



.feed-foot { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-soft, var(--line)); }
.feed-foot .tc-replies { margin-top: 4px; }




.tr-draft.live {
  box-shadow: inset 2px 0 0 var(--accent);
  background: var(--panel-2);
}
.tr-draft.live > b { color: var(--accent); }









.tr-draft.showing { box-shadow: inset 0 0 0 1px var(--accent); }
.tr-draft.live.showing { box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px var(--accent); }
.tr-showing {
  flex: 0 0 auto; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  padding: 1px 7px; align-self: center;
}














.cmp-mhead {
  display: flex; align-items: center; gap: 8px; width: max-content;
  margin-top: 4px;
}
.cmp-mhead .cmp-mname { border-left-color: transparent; background: none; }



.cmp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 13px 6px; }
.cmp-tools input { height: var(--ctl-h); min-width: 140px; flex: 0 1 200px; }
.cmp-grp td { background: var(--panel-2); color: var(--text-2); font-size: var(--fs-cap);
  text-transform: uppercase; letter-spacing: .06em; padding-top: 6px; padding-bottom: 4px; }
#tblCompare th[data-cmpsort] { cursor: pointer; }
#tblCompare th.sorted { color: var(--accent); }



.eo-club { display: none; margin-left: 5px; }
@media (max-width: 760px) { .eo-club { display: inline; } }



#mySquadBody .sq-man[data-pc] { cursor: pointer; }








.lg-head .lg-sort, .lg-thead .lg-sort {
  cursor: pointer; user-select: none; padding-block: 6px;
}
.lg-head .lg-sort.sorted, .lg-thead .lg-sort.sorted { color: var(--accent); }


.modal.modal-narrow { max-width: 420px; }
.cog-kv { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
.cog-kv dd { font-family: var(--mono); font-size: var(--fs-body); }

.tr-candfold { margin: 0 0 8px; }
.tr-candfold > summary {
  cursor: pointer; padding: 5px 2px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  list-style-position: inside;
}
.tr-candfold > summary:hover { color: var(--text); }
.tr-candfold > summary .note { text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--accent); }


.tr-candfold[open] > summary { margin-bottom: 2px; }

.tr-candbar { margin: 0; padding: 8px 9px; gap: 8px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2, var(--bg)); }
.tr-candbar .field { min-width: 0; }
.tr-candbar .field > span { font-size: 10.5px; }
.tr-candbar input[type="number"] { width: 74px; }
.tr-candbar select { max-width: 168px; }



.tr-candbar .field.chk { flex: 0 0 auto; flex-direction: row;
  align-items: center; justify-content: flex-start; gap: 6px;
  align-self: flex-end; padding-bottom: 5px; }
.tr-candbar .field.chk input { flex: 0 0 auto; margin: 0; }
.tr-candbar .field.chk > span { font-size: 11.5px; text-transform: none;
  letter-spacing: 0; color: var(--fg); }
.tr-candbar > .btn { align-self: flex-end; }
#trCandCount { padding: 0 2px 6px; }
@media (max-width: 760px) {
  .tr-candbar select { max-width: 128px; }
  .tr-candbar input[type="number"] { width: 62px; }
}

.tr-cands { max-height: 60vh; overflow: auto; }










.tr-cand {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  width: 100%; text-align: left;
  padding: 6px 8px; margin-bottom: 3px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text);
}
.tr-cand:hover { border-color: var(--accent); }

.tr-take {
  flex: 0 0 auto; min-width: 128px; max-width: 200px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: 3px 4px; border-radius: 4px; text-align: left;
}
.tr-take:hover { background: var(--panel); }
.tr-cand .trfx { flex: 1 1 260px; min-width: 0; overflow-x: auto; }




.tr-cand.no { opacity: .62; }


.tr-cand .nm { font-size: 13px; font-weight: 500; }
.tr-cand .meta { font-size: var(--fs-cap); color: var(--muted); }

.modal-head {
  display: flex; align-items: center; gap: 11px; padding: 11px 14px;
  background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.modal-body { padding: 12px 14px; }

























@media (hover: none) and (pointer: coarse), (max-width: 760px) {



















  :root { --ctl-h: var(--ctl-h-touch); }
  .toggle button { min-height: calc(var(--ctl-h) - 2px); }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select {
    min-height: var(--ctl-h);
  }
  .btn-sm { padding: 5px 11px; }
  .pill { padding: 5px 12px; }
  .toggle button { padding: 5px 12px; }


  .mt-goal { padding: 7px 8px; }





  .pos.inline, .tc-kind, .cb-fx-v, .cb-fx-k { font-size: 10px; }
}











.fx-cell { padding: 3px 7px 3px 4px; white-space: nowrap; }
.fx {
  display: inline-flex; align-items: baseline; gap: 1px;
  min-width: 42px; justify-content: center;
  padding: 3px 5px; margin: 1px; border-radius: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: #10141a;
}


.fx b { font-weight: 700; margin-left: 3px; }








.fx-pair { display: inline-flex; align-items: stretch; gap: 3px; margin: 1px; }
.fx-pair .fx { margin: 0; }
.fx-xg {
  display: inline-flex; align-items: center; gap: 1px;
  padding: 3px 5px; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--line);
  line-height: 1.1; font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  cursor: help;
}
.fx-xg i { font-style: normal; }
.fx-xg em { font-style: normal; color: var(--text-2); margin: 0 2px; font-weight: 400; }
.fx-xg .up { color: var(--good); }
.fx-xg .dn { color: var(--bad); }
.fx-eg { color: var(--good); }
.fx-ec { color: var(--bad); }


.fx.blank {
  background: none; color: var(--faint);
  border: 1px dashed var(--line-soft); font-weight: 400;
}
.fx-dgw {
  font-size: 9px; color: var(--text-2); margin-left: 2px;
  vertical-align: super; font-weight: 600;
}
#tblFixtures th, #tblFixtures td { height: auto; }
#tblFixtures td.sticky-l { font-weight: 500; }




.heat-key { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px;
            margin-top: 6px; font-size: 11px; color: var(--muted); }
.heat-key .k { display: inline-flex; align-items: center; gap: 4px; }
.heat-key .sw { width: 13px; height: 11px; border-radius: 2px; display: inline-block;
                border: 1px solid rgba(0,0,0,.35); }


.sc-wrap { width: 100%; overflow-x: auto; margin-bottom: 4px; }















.sc {
  width: 100%; height: auto; display: block;
  min-width: 640px; max-width: 760px;
}
.sc-bar { fill: var(--accent); opacity: .8; }
.sc-bar.hit { fill: var(--warn); }
.sc-base { stroke: var(--line); stroke-width: 1; }
.sc-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sc-dot { fill: var(--panel); stroke: var(--text); stroke-width: 2; }


.sc-axis { fill: var(--text-2); font-size: 12px; font-family: var(--mono); }
.sc-cap { font-family: inherit; text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; }
.sc-lbl { fill: var(--text-2); font-size: 11.5px; font-family: var(--mono); }

.mv-list { display: flex; flex-direction: column; gap: 4px; }
.mv-week { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-ui); }
.mv-moves { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.mv-move { display: inline-flex; align-items: center; gap: 4px; }
.mv-arrow { color: var(--text-2); }
.mv-in .linkish { color: var(--good, var(--accent)); }
.mv-out .linkish { color: var(--text-2); }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 46px; }
.spark i { flex: 1; background: var(--accent); opacity: .7; min-height: 1px; border-radius: 1px 1px 0 0; }
.spark i.neg { background: var(--bad); }
tbody tr.not-owned td { opacity: .6; }
tbody tr.not-owned td.sticky-l { font-style: italic; }




.distbar { position: relative; height: 16px; margin: 12px 0 3px;
           background: var(--line-soft); border-radius: 3px; }
.distbar i { position: absolute; top: 0; height: 100%; }
.distbar .iqr { background: var(--accent); opacity: .3; border-radius: 3px; }
.distbar .med { width: 2px; background: var(--muted); }
.distbar .me { width: 3px; background: var(--warn); margin-left: -1px;
               box-shadow: 0 0 0 2px var(--panel); border-radius: 2px; }
.distscale { display: flex; justify-content: space-between;
             font-family: var(--mono); font-size: 10px; color: var(--muted); }
tbody tr.row-mine td { background: var(--warn-bg); }










@media (max-width: 760px) {




  :root { --fs-body: 14px; --fs-ui: 12px; --fs-note: 12.5px; }
  html, body { font-size: var(--fs-body); }














  header { flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; height: auto; }


  @supports (padding: env(safe-area-inset-top)) {
    body > header {
      padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right))
               8px calc(10px + env(safe-area-inset-left));
      height: auto;
    }
  }
  .hdr-status { width: 100%; margin-left: 0; gap: 12px; font-size: 11px;
                overflow-x: auto; }











  .hdr-item.aside { display: none; }








  .hdr-cog {
    position: absolute; top: 6px; right: 8px; margin-left: 0;
    width: 30px; height: 30px;
  }












  .hdr-fb {
    position: absolute; top: 6px; right: 42px; margin-left: 0;
    width: 30px; height: 30px; padding: 0; justify-content: center;
  }
  .hdr-fb-w { display: none; }
  .hdr-fb-n { position: absolute; top: -4px; right: -4px; }
  @supports (padding: env(safe-area-inset-top)) {
    .hdr-cog {
      top: calc(6px + env(safe-area-inset-top));
      right: calc(8px + env(safe-area-inset-right));
    }
    .hdr-fb {
      top: calc(6px + env(safe-area-inset-top));
      right: calc(42px + env(safe-area-inset-right));
    }
  }

  .navwrap { padding-right: 72px; }


















  .navwrap { position: relative; flex: 1 1 0; min-width: 0; }





  .navwrap::after, .navwrap::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 26px;
    pointer-events: none; transition: opacity .15s ease;
  }
  .navwrap::after {








    right: 32px; opacity: var(--fade-r, 0);



    background: linear-gradient(to right, transparent, var(--panel) 50%);
  }
  .navwrap::before {
    left: 0; z-index: 1; opacity: var(--fade-l, 0);
    background: linear-gradient(to left, transparent, var(--panel) 75%);
  }
  .navwrap.more-right { --fade-r: 1; }
  .navwrap.more-left { --fade-l: 1; }

  .subnav {
    width: 100%; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; scroll-behavior: smooth;
  }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a, .subnav-here { padding: 7px 10px; font-size: 13px; scroll-snap-align: start; }













  .rangebar { flex-wrap: wrap; gap: 8px; height: auto; padding: 8px 10px; }















  .rangebar .slider-wrap { order: 10; width: auto; flex: 1 1 150px;
                           min-width: 150px; max-width: none; }

  #btnUpdate { order: 9; }
  .rangebar > label { display: none; }
  #normNote { display: none; }


































  .rangebar { column-gap: 6px; }
  .rangebar .gw-inputs { gap: 4px; }
  .rangebar .gw-inputs input { width: 40px; }
  #seasonSel { padding: 0 4px; font-size: 12px; height: 36px; }
  .rangebar .slider-wrap { height: 36px; }





  .rangebar .toggle button { padding: 5px 5px; }
  main { padding: 8px 8px calc(8px + var(--tabbar-h)); }
  @supports (padding: env(safe-area-inset-top)) {


    main {
      padding: 8px calc(8px + env(safe-area-inset-right))
               calc(8px + var(--tabbar-h)) calc(8px + env(safe-area-inset-left));
    }
  }
  .grid-2 { grid-template-columns: 1fr; }



  .cmp-spatial { grid-template-columns: 1fr; }






















  .panel-body.cmp-spatial { padding-left: 0; padding-right: 0; }
  #lineupBody { margin-left: -13px; margin-right: -13px; }





  .tablewrap:has(table.cards) { overflow: visible; max-height: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td,
  table.cards thead, table.cards th { display: block; width: auto; }
  table.cards { table-layout: auto !important; }














  table.cards { --qtrack: 44px; --qgap: 6px; --qteam: 34px; }






  table.cards thead th, table.cards tbody td { min-width: 0 !important; }





  table.cards thead {
    position: sticky; top: 0; z-index: 3;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
    margin: 0 0 6px;
  }







  table.cards thead tr {
    display: flex; align-items: baseline; column-gap: var(--qgap);
    margin: 0; padding: 0 9px; border: 0; background: none;
  }




  table.cards thead th:not(.quick):not(.sticky-l):not(.ident-end) { display: none; }
  table.cards thead th {
    font-size: 10px; letter-spacing: .04em; padding: 7px 0; border: 0;
    background: none; cursor: pointer;
  }
  table.cards thead th.sticky-l {
    flex: 1 1 0; min-width: 0; position: static; background: none;
  }



  table.cards thead th.ident-end:not(.sticky-l),
  table.cards tbody td.ident-end:not(.sticky-l) {
    flex: 0 0 var(--qteam); max-width: var(--qteam);
    overflow: hidden; text-overflow: ellipsis;
  }
  table.cards thead th.quick {
    flex: 0 0 var(--qtrack); max-width: var(--qtrack); text-align: right;
  }


  table.cards thead th .lbl {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }





  table.cards thead th.quick .lfull { display: none; }
  table.cards thead th.quick .lshort { display: inline; }



  table.cards thead th {
    white-space: nowrap; overflow: hidden; height: auto; min-height: 0;
  }



  table.cards thead th.quick, table.cards thead th.sticky-l {
    display: flex; align-items: baseline; gap: 2px;
  }
  table.cards thead th.quick { justify-content: flex-end; }
  table.cards thead th .lbl { min-width: 0; }
  table.cards thead th .arrow { flex: 0 0 auto; font-size: 10px; }

  table.cards tbody tr {
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: var(--qgap);
    border: 1px solid var(--line); border-radius: 9px;
    margin: 0 0 5px; padding: 7px 8px; background: var(--panel-2);
  }

  table.cards tbody td {
    height: auto; padding: 0; text-align: left; white-space: nowrap;
    overflow: visible; text-overflow: clip; border: 0;
    min-width: 0 !important; max-width: none !important; width: auto !important;
  }













  table.cards tbody td.sticky-l {
    display: block; flex: 1 1 0; min-width: 0;
    position: static; background: none;
    overflow: hidden; text-overflow: ellipsis;
    font-size: 15px; font-weight: 500;
  }
  table.cards tbody td.sticky-l::before { content: none; }






  table.cards tbody td.ident-end:not(.sticky-l) {
    font-size: 11px; color: var(--muted);
    letter-spacing: .04em; margin: 0;
  }
  table.cards tbody td.ident-end:not(.sticky-l)::before { content: none; }
  table.cards tbody td:not(.sticky-l) .tfull { display: none; }
  table.cards tbody td:not(.sticky-l) .tshort { display: inline; }








  table.cards tbody td.quick .rfull { display: none; }
  table.cards tbody td.quick .rshort { display: inline; }




  table.cards tbody td.quick .vfull { display: none; }
  table.cards tbody td.quick .vshort { display: inline; }





  table.cards tbody tr:not(.open) td.ident:nth-child(2) { display: none; }

  table.cards tbody td.quick {
    flex: 0 0 var(--qtrack); text-align: right;
    font-size: 13px; font-variant-numeric: tabular-nums;
  }
  table.cards tbody td.quick::before { content: none; }







  table.cards tbody tr:not(.open) td:not(.quick):not(.sticky-l):not(.ident-end):not(.empty) {
    display: none;
  }


  table.cards tbody td.empty {
    flex: 0 0 100%; white-space: normal; text-align: center;
    padding: 14px 6px; color: var(--muted);
  }


  table.cards tbody tr.open td:not(.quick):not(.sticky-l):not(.ident-end) {
    flex: 0 0 100%; order: 5;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 3px 0;
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }
  table.cards tbody tr.open td:last-child { border-bottom: 0; }





















  table.cards tbody tr.open td:not(.quick):not(.sticky-l):not(.ident-end)::before {
    content: attr(data-label);
    color: var(--muted); font-size: 11px; text-transform: uppercase;
    letter-spacing: .05em; font-family: var(--sans); flex: 0 0 auto;
  }

  table.cards tbody tr.open td.quick { margin-bottom: 6px; }
  table.cards tbody tr.open { padding-bottom: 6px; }


  table.cards tbody tr[data-code] { cursor: pointer; }




  .spark { display: none; }



  table.cards tbody td.quick .eo-bar .track { display: none; }
  table.cards tbody td.quick .eo-bar { justify-content: flex-end; }


  .col-grip { display: none; }















  .modal { max-height: 100%; border-radius: 0; }
  .modal-bg { padding: 8px; align-items: flex-start; }






  @supports (padding: env(safe-area-inset-left)) {
    .modal-bg {
      padding: 8px calc(8px + env(safe-area-inset-right))
               8px calc(8px + env(safe-area-inset-left));
    }
  }
  .headline { grid-template-columns: 1fr 1fr; }
  .octagon-wrap svg, #cmpOct svg { width: 100%; height: auto; }





  #tblCompare { font-size: 12px; }
  .panel:has(#tblCompare) .tablewrap { max-height: none; }
  #tblCompare th, #tblCompare td { white-space: nowrap; }
  #tblCompare td.sticky-l, #tblCompare th.sticky-l {
    max-width: 118px; white-space: normal; line-height: 1.25;
  }
}

@media (max-width: 420px) {




  .headline { grid-template-columns: 1fr; gap: 6px; }










  .headline .cell {
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 8px; padding: 5px 9px;
  }
  .headline .cell .v { font-size: var(--fs-num); }


  .headline .cell .d { margin-left: auto; }
}













#updateNote { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


#btnUpdate { min-width: 96px; }
#updateNote.ok { color: var(--good); }
#updateNote.err { color: var(--bad); }
#updateNote.warn { color: var(--warn); }









@media (max-width: 389px) {
  table.cards thead th.ident-end:not(.sticky-l),
  table.cards tbody td.ident-end:not(.sticky-l) { display: none; }
}


@media (min-width: 430px) {
  table.cards { --qtrack: 46px; }
}








.xi-pitch, .bench { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.xi-man { cursor: pointer; }
.bench-row { cursor: pointer; }
.bench-row:hover { background: var(--row-hover, rgba(127,127,127,.10)); }




.bench-pos {
  margin-left: auto; padding-left: 8px; font-size: 10px;
  color: var(--muted); white-space: nowrap;
}





.spatial-card { position: relative; }
.whobox {


  position: absolute;
  display: none; margin-top: 8px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2, var(--panel)); cursor: pointer;

  left: 8px; right: 8px; z-index: 5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);




  overflow-y: auto; overscroll-behavior: contain;
}
.whobox.on { display: block; }
.who-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.who-pct { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.who-sub { margin-top: 2px; font-size: 11px; color: var(--muted); }


.who-more {
  margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--text-2);
}
.who-why { margin: 6px 0 0; padding-left: 16px; font-size: 11px; line-height: 1.55; }
.who-why li { margin: 1px 0; }



.who-math { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
.who-mathhead { font-size: 11px; font-weight: 700; color: var(--text-2); margin-bottom: 3px; }
.who-mathtab { width: 100%; border-collapse: collapse; font-size: 11px; }
.who-mathtab td { padding: 1px 0; vertical-align: baseline; }
.who-mathtab td:nth-child(2) { text-align: right; padding-left: 10px; color: var(--muted); }
.who-mathtab td:nth-child(3) { text-align: right; padding-left: 10px; width: 4.5em; }
.who-mathtab tfoot td { border-top: 1px solid var(--line-soft); padding-top: 3px;
                        font-weight: 700; color: var(--text-2); }
.who-mathwarn { margin-top: 5px; font-size: 11px; color: var(--warn); }
.who-mathnote { font-size: 11px; color: var(--muted); line-height: 1.5; }



.method { margin: 0 0 10px; padding-left: 20px; font-size: 11px; line-height: 1.5; }
.method li { margin: 5px 0; }
.method li b { display: block; color: var(--text); }
.method li .sub { display: block; margin-top: 1px; }




.src-active      { color: var(--good, #4ade80); font-weight: 600; }
.src-provisional { color: var(--muted); }
.src-benched     { color: var(--bad, #f87171); font-weight: 600; }


















































.sq-wrap { --sq-w: 138px; --sq-jw: 48px; --tr-cols: 3; max-width: 730px; margin-inline: auto; }
.sq-pitch {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 8px; padding: 14px 6px 16px;
  border-radius: 8px; border: 1px solid var(--line);
  background:






    var(--stripe),






    var(--pitch);
  overflow: hidden;
}





.sq-pitch::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border: 1px solid var(--pitch-line); border-radius: 50%; pointer-events: none;
}
.sq-pitch::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  background: var(--pitch-line); border-radius: 50%; pointer-events: none;
}

.sq-line { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; position: relative; }

.sq-man {
  position: relative; width: var(--sq-w);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 3px;
}





.sq-jersey {
  width: var(--sq-jw); height: calc(var(--sq-jw) * .85);
  display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.sq-name {
  display: block; width: 100%; margin-top: 2px; padding: 2px 3px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px 4px 0 0; border-bottom: 0;







  font-size: var(--fs-ui); font-weight: 600; text-align: center; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sq-sub {
  display: block; width: 100%; padding: 1px 3px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 0 0 4px 4px;









  font-size: var(--fs-ui); text-align: center; color: var(--faint);





  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}





.sq-sub.up    { color: var(--good); font-weight: 700; }
.sq-sub.down  { color: var(--bad);  font-weight: 700; }
.sq-sub.level { color: var(--text-2); font-weight: 700; }
.sq-man.benched .sq-jersey { opacity: .58; }
.sq-man.benched .sq-name { color: var(--faint); }

.sq-badge {
  position: absolute; top: 0;
  right: calc((var(--sq-w) - var(--sq-jw)) / 2 - 8px); z-index: 2;
  min-width: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--raised); border: 1px solid var(--line);





  font-size: var(--fs-ui); font-weight: 700; line-height: 16px; text-align: center;
  color: var(--text); font-variant-numeric: tabular-nums;
}




.sq-badge.hot  { background: var(--good); border-color: var(--good); color: var(--bg); }
.sq-badge.warm { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.sq-badge.cold { background: var(--bad-bg);  border-color: var(--bad);  color: var(--bad); }
.sq-badge.none { color: var(--faint); }









.sq-badge.bench { opacity: .55; }








.sq-x {
  position: absolute; top: 0;
  left: calc((var(--sq-w) - var(--sq-jw)) / 2 - 11px); z-index: 3;
  width: 19px; height: 19px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--faint);
  font-size: 12px; line-height: 1; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.sq-x:hover, .sq-x:focus-visible {
  background: var(--bad); border-color: var(--bad); color: var(--bg);
}











@media (hover: none) and (pointer: coarse) {
  .sq-x {
    width: 26px; height: 26px; top: -3px; font-size: 15px;
    left: calc((var(--sq-w) - var(--sq-jw)) / 2 - 15px);
    background: var(--panel); border-color: var(--line); color: var(--text-2);
  }
  .sq-x:active {
    background: var(--bad); border-color: var(--bad); color: var(--bg);
  }
}





.sq-arm {
  position: absolute; top: 17px; z-index: 2;
  right: calc((var(--sq-w) - var(--sq-jw)) / 2 - 4px);
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #06231f; font-size: 10px; font-weight: 800;
}
.sq-arm.vc { background: var(--raised); color: var(--text-2); }
.sq-arm.sm { position: static; right: auto; top: auto;
  display: inline-grid; width: 14px; height: 14px; font-size: 9px; }















.sq-bench {
  position: relative;
  display: flex; align-items: flex-start; justify-content: center;
  gap: 6px; flex-wrap: wrap;




  margin-top: 8px; padding: 22px 8px 9px;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--panel-2);
}
.sq-bench-t {
  position: absolute; left: 9px; top: 5px;




  font-size: var(--fs-ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); pointer-events: none;
}
.sq-foot { margin-top: 7px; text-align: center; }




@media (max-width: 620px) {
  details > summary > .sub { display: block; margin-left: 0; }
}
.sq-table tr.benched td { color: var(--faint); }



@media (max-width: 620px) {







  .sq-wrap { --sq-w: 62px; --sq-jw: 32px; --tr-cols: 2; }




  .sq-name { font-size: 11px; }
  .sq-sub { font-size: 11px; }
  .sq-pitch { padding: 10px 3px 12px; gap: 6px; }
  .sq-line { gap: 3px; }
}









.rx i { font-size: 12px; font-weight: 700; min-width: 8px; text-align: center; }
.rx { padding: 3px 8px 3px 6px; transition: background .12s, border-color .12s; }



.rx.mine {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent);
}
.rx.mine:hover { background: var(--bg); }


.rx-add { color: var(--faint); border-style: dashed; }
.rx-add:hover { color: var(--accent); border-style: solid; }
.rx-add i { font-size: 11px; font-weight: 600; letter-spacing: .02em; }

.rx-pop {
  position: absolute; z-index: 40; bottom: calc(100% + 6px); left: 0;
  display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 2px;
  padding: 6px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}
.rx-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 0; color: var(--text-2);
  font-size: 12px; text-align: left; width: 100%;
}
.rx-opt:hover:not(:disabled) { background: var(--raised); color: var(--text); }
.rx-opt.mine { color: var(--accent); }
.rx-opt.locked { opacity: .45; cursor: not-allowed; }
.rx-opt .lock {
  margin-left: auto; font-style: normal; font-size: 10px;
  padding: 0 5px; border-radius: 8px; background: var(--bg);
  border: 1px solid var(--line); color: var(--faint);
}
.rx-bar { position: relative; }

.tc-sortbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2);
}
.toggle.sm button { padding: 2px 8px; font-size: 11px; }

.tc-ident {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-soft);
}
.tc-idbox {
  flex-basis: 100%; display: flex; flex-direction: column; gap: 6px;
  padding: 9px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line);
}






















.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; justify-content: center; gap: 4px;
  padding: 4px 10px;
  background: var(--panel); border-top: 1px solid var(--line);









































  min-height: var(--tabbar-h);
}
.tb {
  flex: 1 1 0; max-width: 130px; min-height: 44px; height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 5px 6px; border-radius: 9px;
  color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .01em;
  transition: color .12s, background .12s;
}
.tb:hover { color: var(--text-2); background: var(--panel-2); text-decoration: none; }
.tb.active { color: var(--accent); background: var(--accent-dim); }
.tb-i { width: 21px; height: 18px; display: block; }


.tb[data-section="squad"] .tb-i { width: 25px; }



































@supports (padding: env(safe-area-inset-bottom)) {
  :root { --tabbar-pad: max(6px, calc(env(safe-area-inset-bottom, 0px) * 0.62)); }
  .tabbar {
    padding-bottom: var(--tabbar-pad);
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
}
.tabbar::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%;



  height: 40px; background: var(--panel); pointer-events: none;
}





@media (max-width: 360px) {
  .tb { font-size: 10px; padding: 4px 3px; }
  .tb-i { width: 20px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .tb { transition: none; }
}






.sq-man.sq-picked .sq-jersey { transform: translateY(-3px) scale(1.06); }
.sq-man.sq-picked .sq-name {
  border-color: var(--accent); color: var(--accent); background: var(--accent-dim);
}


.sq-man.sq-target .sq-name { border-color: var(--accent); }
.sq-man.sq-target .sq-jersey { filter: drop-shadow(0 0 5px var(--accent)); }




.sq-man.sq-warn .sq-name { border-color: var(--warn); }
.sq-man.sq-warn .sq-jersey { filter: drop-shadow(0 0 4px var(--warn)); }
.sq-man.sq-over .sq-name { background: var(--accent-dim); color: var(--accent); }
.sq-man.sq-over .sq-jersey { transform: scale(1.1); }
.sq-jersey, .sq-name { transition: transform .12s, border-color .12s, background .12s; }


.sq-man.sq-dragging { opacity: .3; }
.sq-ghost {
  position: fixed; z-index: 200; margin: 0;
  transform: translate(-50%, -50%) scale(1.06);
  pointer-events: none; opacity: .95;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6));
}
.sq-ghost .sq-x { display: none; }











#trSquad .sq-man { touch-action: none; }
.sq-man:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .sq-jersey, .sq-name { transition: none; }
  .sq-man.sq-picked .sq-jersey, .sq-man.sq-over .sq-jersey { transform: none; }
}


.tr-drafts {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding: 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2);
}
.tr-draft {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; border-radius: 6px; background: var(--bg);
  border: 1px solid var(--line-soft);
}
.tr-draft .note { flex: 1 1 auto; min-width: 0; }


















@media (max-width: 760px) {
  .tr-draft { align-items: stretch; }
  .tr-draft > b { display: flex; align-items: center; margin-right: auto; }
  .tr-draft > .note { flex-basis: 100%; order: 1; }
}










.pr-card { position: relative; }
.pr-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 8px 0 0 8px;



  background: var(--spine, var(--kit, var(--line))); opacity: .9;
}
.pr-card .panel-body { padding-left: 14px; }

.pr-crest {
  display: inline-flex; align-items: center; padding: 1px 7px;
  border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  background: var(--kit, var(--raised));
  color: var(--kit-ink, var(--text));















  box-shadow: inset 0 0 0 1.5px var(--kit-ink, rgba(0, 0, 0, .35)),
              inset 0 0 0 2.5px rgba(0, 0, 0, .28);
}





button.pr-crest {
  border: 0; font: inherit; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; cursor: pointer;
}
button.pr-crest:hover { filter: brightness(1.15); }
button.pr-crest:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }













.fold-count {
  margin-left: auto; flex: 0 0 auto; font-size: 11px;
  white-space: nowrap; padding-left: 10px;
}



.tc-hiddenflag {
  color: var(--warn); text-transform: uppercase; font-size: 10px;
  letter-spacing: .06em;
}


.fb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fb-row.col { flex-direction: column; align-items: stretch; gap: 5px; }
.fb-row > label { font-size: var(--fs-ui); color: var(--text-2); flex: 0 0 auto; }



.fb-cats { display: flex; flex-direction: column; gap: 5px; }
.fb-cat {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 7px 10px; border-radius: 7px; font: inherit;
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
}
.fb-cat b { display: block; font-size: var(--fs-ui); font-weight: 650; }
.fb-cat i { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.fb-cat:hover { border-color: var(--accent); }
.fb-cat.on { border-color: var(--accent); background: var(--accent-dim); }
.fb-cat.on b { color: var(--accent); }


.fb-ctx > summary { cursor: pointer; font-size: 11px; color: var(--muted); }
.fb-ctx .kv { margin: 7px 0 0; font-size: 11px; }
.fb-ctx dd { word-break: break-all; }
.fb-done { padding: 14px 2px; }
.fb-done b { font-size: 14px; }


.fb-grid { width: 100%; font-size: 12px; margin-bottom: 10px; }
.fb-grid th, .fb-grid td { text-align: right; padding: 3px 6px; }
.fb-grid th.txt, .fb-grid td.txt { text-align: left; }
.fb-grid thead th { color: var(--muted); font-weight: 600; }


.fb-weeks { display: flex; align-items: flex-end; gap: 6px; margin: 10px 0; }
.fb-wk { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fb-wk i { display: block; width: 22px; background: var(--accent-dim); border-radius: 2px; }
.fb-wk b { font-size: 10px; color: var(--muted); font-weight: 600; }
.fb-weeks .note { align-self: center; margin-left: 4px; }
.fb-builds { margin-bottom: 10px; }
.fb-filters { flex-wrap: wrap; height: auto; margin-bottom: 10px; }
.fb-item { border-top: 1px solid var(--line); padding: 9px 0; }
.fb-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; }
.fb-tag {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: var(--panel-2); color: var(--text-2);
}
.fb-tag.scr { color: var(--accent); }
.fb-state { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.fb-state.s-new { color: var(--warn); font-weight: 800; }
.fb-state.s-done { color: var(--good); }
.fb-state.s-declined { color: var(--faint); }
.fb-body { font-size: 13px; line-height: 1.5; margin: 5px 0; }
.fb-meta { font-size: 10.5px; }

.fb-note {
  margin: 5px 0; padding: 5px 9px; border-left: 2px solid var(--accent);
  background: var(--panel-2); font-size: 12px;
}
.fb-acts { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }




.tc-report { color: var(--faint); }
.tc-report:hover { color: var(--warn); border-color: var(--warn); }
.tc-reported { color: var(--faint); font-size: 11px; }
.tc-reportbox { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }




.fq-panel { border-color: var(--warn); margin-bottom: 10px; }
.fq-head {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--warn); margin-bottom: 7px;
}
.fq-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-top: 1px solid var(--line); font-size: 12px;
}
.fq-n { color: var(--warn); font-weight: 800; white-space: nowrap; }
.fq-net, .fq-why { white-space: nowrap; }


.fq-txt {
  flex: 1 1 200px; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--text-2);
}
.fq-acts { display: flex; gap: 5px; margin-left: auto; flex: 0 0 auto; }
.fq-foot { margin-top: 8px; }






.tc-catsep {
  width: 1px; align-self: stretch; margin: 5px 4px;
  background: var(--line); flex: 0 0 auto;
}




.tc-clubfold { flex: 0 0 auto; }
.tc-clubfold[open] { flex: 1 0 100%; }
.tc-clubfold > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 5px;
  height: var(--ctl-h); padding: 0 9px; box-sizing: border-box;
  font-size: var(--fs-ui); font-weight: 600; color: var(--text-2);
  white-space: nowrap;
}
.tc-clubfold > summary::-webkit-details-marker { display: none; }
.tc-clubfold > summary::after { content: '\25be'; font-size: 9px; opacity: .7; }
.tc-clubfold[open] > summary::after { content: '\25b4'; }
.tc-clubfold > summary:hover { color: var(--text); background: var(--raised); }
.tc-clubfold[open] > summary { background: var(--accent-dim); color: var(--accent); }





.tc-clubfold > summary:has(~ .tc-clublist button.on) {
  background: var(--accent-dim); color: var(--accent);
}
.tc-clublist {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 2px 8px 8px; border-top: 1px solid var(--line);
}



.tc-cats .tc-clublist button {
  height: 26px; border-radius: 5px;



  border-left: 4px solid var(--kit, var(--line));
  padding: 0 8px 0 7px;
}



.pr-clock {
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 9px;
  border: 1px solid var(--line); color: var(--faint);
}
.pr-clock.warm { border-color: var(--warn); color: var(--warn); }
.pr-clock.hot  { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.pr-clock.past { border-style: dashed; }





[hidden] { display: none !important; }
.pr-claims { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 9px; }

.pr-claimbtn {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px;
  margin: 6px 0 4px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel-2); color: var(--text-2); font-size: var(--fs-ui); cursor: pointer;
}
.pr-claimbtn i { font-style: normal; opacity: .5; }
.pr-claimbtn .c-out { color: var(--bad); font-weight: 650; }
.pr-claimbtn .c-doubt { color: var(--warn); font-weight: 650; }
.pr-claimbtn .pr-caret { width: 12px; height: 12px; transition: transform .15s; }
.pr-claimbtn.open .pr-caret { transform: rotate(180deg); }










.pr-other {
  font-style: italic; color: var(--text-2);
  border-bottom: 1px dotted currentColor;
  cursor: help;
}






.tc-cats { flex-wrap: wrap; height: auto; margin: 0 0 8px; }






.tc-cats button { padding: 0 9px; }
.pr-claim {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 8px; border-radius: 11px; font-size: 11px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.pr-claim b { color: var(--text); font-weight: 650; }
.pr-claim i { font-style: normal; font-size: 10px; opacity: .8; }
.pr-claim[data-pc] { cursor: pointer; }
.pr-claim[data-pc]:hover { border-color: var(--accent); }
.pr-claim.bad  { background: var(--bad-bg);  border-color: var(--bad);  color: var(--bad); }
.pr-claim.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.pr-claim.good { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.pr-claim.bad b, .pr-claim.warn b, .pr-claim.good b { color: inherit; }
.pr-claim.count { opacity: .8; }







.pr-title { font-size: 14px; font-weight: 400; margin-bottom: 6px; color: var(--text-2); }


.pr-quote {
  margin: 8px 0; padding: 8px 12px;



  border-left: 3px solid var(--edge, var(--accent));
  background: var(--panel-2); border-radius: 0 7px 7px 0;
  font-size: 14px; line-height: 1.5; color: var(--text-2); font-style: italic;
}
.pr-quote cite {
  display: block; margin-top: 5px; font-style: normal; font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.pr-quote cite::before { content: '- '; }







.pr-name {
  color: var(--text); font-weight: 700;
  border-bottom: 1px dotted var(--accent); cursor: pointer;
}




.pr-name.mine { border-bottom: 1.5px solid var(--accent); }




.pr-name.theirs { font-weight: 400; color: var(--text-2); }



.pr-name.plain { cursor: default; }


.pr-name:has(+ .pr-why) { color: var(--bad); border-bottom-color: var(--bad); }
.pr-name:hover { color: var(--accent); }
.pr-name.unsure {
  border-bottom-style: none; cursor: default; color: var(--text-2);
}
.pr-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pr-why {
  font-style: normal; font-size: 10px; margin-left: 3px;
  padding: 0 5px; border-radius: 8px;
  background: var(--bad-bg); border: 1px solid var(--bad); color: var(--bad);
}
.pr-body { font-size: 13px; line-height: 1.6; color: var(--text-2); }





























.pos.inline, .tc-kind, .tc-edited, .cb-fx-v, .cb-fx-k,
.mp-stats dt, .cmp-fx-k, .fx-dgw, .proxy, .inv, .corow .cflag {
  font-size: 10px;
}

.pos.inline {
  padding: 0 4px; vertical-align: middle;
  margin-left: 2px; opacity: .9;
}


.pr-card .panel-body { padding-top: 9px; padding-bottom: 9px; }
.pr-card .tc-meta { margin-bottom: 4px; }
.pr-claims { margin: 5px 0 6px; }



.pr-head {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  padding: 2px 0; background: none; border: 0; cursor: pointer;
  text-align: left; color: inherit;
}
.pr-head .pr-title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--text-2);


  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}




.tc-card.open .pr-head .pr-title {
  -webkit-line-clamp: unset; display: block; overflow: visible;
}




.pr-head:hover .pr-caret { color: var(--accent); }
.pr-caret {
  flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3px;
  color: var(--faint); transition: transform .15s;
}
.tc-card.open .pr-head .pr-caret { transform: rotate(180deg); }
.pr-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
.pr-more { margin-top: 4px; }


.pr-claim.count { cursor: pointer; padding-right: 5px; }
.pr-claim.count .pr-caret { width: 12px; height: 12px; margin: 0 0 0 1px; color: inherit; }
.pr-claim.count.open { border-color: var(--accent); color: var(--accent); }
.pr-claim { position: relative; }







.pr-pop {






  position: fixed; z-index: 60; top: 0; left: 0;





  width: max-content; min-width: 200px;
  max-width: min(340px, calc(100vw - 24px));
  max-height: min(62vh, 460px); overflow-y: auto;
  padding: 5px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);


  color: var(--text-2); font-weight: 400;
}
.pr-pop-h {
  display: flex; gap: 6px; align-items: baseline;
  padding: 2px 6px 5px; font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line-soft); margin-bottom: 3px;
}
.pr-pop-h i { font-style: normal; color: var(--text); font-weight: 700; }
.pr-pop-row {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 4px 6px; border-radius: 5px; border: 0; background: none;
  color: var(--text-2); font-size: 12px; text-align: left; cursor: pointer;
}
.pr-pop-row:hover { background: var(--raised); color: var(--text); }








.tr-run {
  display: flex; gap: 1px; width: 100%; margin-top: 3px;
  justify-content: center; flex-wrap: nowrap;
}




















.tr-chip {
  flex: 1 1 0; min-width: 0; max-width: 29px; height: 16px;
  display: grid; place-items: center; border-radius: 3px;
  font-size: var(--fs-ui); font-weight: 700; letter-spacing: -.03em;
  color: #10141a; overflow: hidden;
}















.sq-man .tr-run { flex-wrap: wrap; row-gap: 1px; }
.sq-man .tr-chip {
  flex: 0 0 calc((100% - (var(--tr-cols) - 1) * 1px) / var(--tr-cols) - .5px);
  max-width: none;
}
.tr-chip.blank {
  background: none; border: 1px dashed var(--line-soft); color: var(--faint);
}

.tr-chip.dbl { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35); }
.tr-chip.d1 { background: var(--fdr-1); }
.tr-chip.d2 { background: var(--fdr-2); }
.tr-chip.d3 { background: var(--fdr-3); }
.tr-chip.d4 { background: var(--fdr-4); }
.tr-chip.d5 { background: var(--fdr-5); }


.tr-gwstep { display: flex; align-items: stretch; gap: 3px; }




















.tr-gwstep input[type=number] { width: 58px; min-width: 0; text-align: center; }
.tr-gwstep .btn { padding: 4px 9px; font-size: 15px; line-height: 1; }
















@media (max-width: 620px) {
  .tr-run { flex-wrap: wrap; row-gap: 1px; }






  .sq-man .tr-chip { font-size: 11px; height: 14px; }
}








.subnav-here { color: var(--accent); background: var(--accent-dim); font-weight: 600; }




.hb-invite { border-color: var(--accent); }
.hb-invite b { color: var(--accent); }



.predict-back { margin-right: 10px; font-weight: 600; }
.predict-back:hover { border-color: var(--accent); color: var(--accent); }

.predict-gw { font-size: 15px; color: var(--accent); }




.price-warn {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 8px 11px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--warn);
}
.price-warn.hot { border-color: var(--bad); background: var(--bad-bg); }
.price-warn > b { font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.price-warn.hot > b { color: var(--bad); }
.price-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 8px; border-radius: 11px; font-size: 12px;
  border: 1px solid var(--line); background: var(--bg);
}
.price-chip i { font-style: normal; font-size: 10px; opacity: .85; }
.price-chip.rise { border-color: var(--good); color: var(--good); }
.price-chip.fall { border-color: var(--bad); color: var(--bad); }
.price-chip.imminent { font-weight: 700; }


.tr-price {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  color: inherit; font: inherit; border-bottom: 1px dotted var(--line);
}
.tr-price:hover { color: var(--accent); border-bottom-color: var(--accent); }
.tr-price.mine { color: var(--accent); border-bottom-style: solid; }
.tr-price i {
  font-style: normal; font-size: 9px; margin-left: 3px; opacity: .8;
  text-transform: uppercase; letter-spacing: .05em;
}
.sq-badge.mine { border-color: var(--accent); color: var(--accent); }







.fx[data-fx] { cursor: pointer; }
.fx[data-fx]:hover { filter: brightness(1.08); }
.fx.open { outline: 2px solid var(--text); outline-offset: 1px; }

.fx-proj {
  position: fixed;
  z-index: 60;
  width: min(300px, calc(100vw - 16px));



  max-height: calc(100dvh - 16px); overflow-y: auto;
  padding: 11px 12px 10px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .45);
  font-size: 13px;
}
.fx-proj-h {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 8px; font-size: 13.5px;
}
.fx-proj-h .note { margin-left: auto; font-size: 11px; }
.fx-proj-x {
  background: none; border: 0; color: var(--text-2);
  font-size: 19px; line-height: 1; cursor: pointer;


  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px; padding: 0; margin: -8px -8px -8px 0;
}
.fx-proj-x:hover { color: var(--text); }


.fx-odds { display: flex; height: 20px; border-radius: 6px; overflow: hidden; }
.fx-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #fff;
  min-width: 0; transition: width .18s ease;
}
.fx-seg.w { background: var(--good); color: #0e1116; }
.fx-seg.d { background: var(--panel-2); color: var(--text-2); }
.fx-seg.l { background: var(--bad); color: #0e1116; }
.fx-odds-key {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-2); margin: 2px 1px 8px;
}

.fx-pts { display: flex; gap: 8px; margin-bottom: 4px; }
.fx-pt {
  flex: 1; text-align: center; padding: 7px 4px;
  border-radius: 9px; background: var(--panel-2);
}
.fx-pt b { display: block; font-size: 19px; line-height: 1.1; }
.fx-pt span { font-size: 10.5px; color: var(--text-2); }
.fx-pt.for b { color: var(--good); }
.fx-pt.vs b { color: var(--bad); }

.fx-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin: 8px 0 6px; text-align: center;
}
.fx-grid b { display: block; font-size: 15px; }
.fx-grid span { font-size: 10.5px; color: var(--text-2); }

.fx-def { margin-top: 6px; }
.fx-defrow { display: flex; gap: 8px; margin-top: 4px; }
.fx-defpt {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: 7px;
  background: var(--panel-2);
}
.fx-defpt b { font-size: 13px; }
.fx-fine { font-size: 10.5px; margin-top: 7px; line-height: 1.35; }


















.mt-teams {
  display: grid; gap: 3px; max-width: 620px;
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.mt-teams .mt-team { text-align: center; padding-left: 2px; padding-right: 2px; }
@media (max-width: 760px) {














  .panel > h2 .right:has(.mt-teams) { flex: 1 1 100%; margin-left: 0; }
  .mt-teams { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%;
              max-width: 340px; }
}
.mt-team {
  padding: 3px 7px; font-size: 11px; font-weight: 700;
  background: var(--bg); border: 1px solid transparent; color: var(--text-2);
  border-radius: 5px; cursor: pointer;
}
.mt-team:hover { background: var(--panel-2); color: var(--text); }
.mt-team.on { background: var(--accent); color: var(--bg); }

.mt-list { display: flex; flex-direction: column; gap: 2px; }
.mt-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 6px;
  background: var(--bg); color: var(--text); cursor: pointer; text-align: left;
}
.mt-row:hover { background: var(--panel-2); }
.mt-when { display: flex; flex-direction: column; min-width: 52px; }
.mt-when b { font-size: 11.5px; }
.mt-when i { font-size: 10px; color: var(--text-2); font-style: normal; }
.mt-res {
  width: 19px; height: 19px; border-radius: 50%; flex: 0 0 19px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800;
  color: var(--bg);
}
.mt-res.win { background: var(--good); }
.mt-res.draw { background: var(--text-2); }
.mt-res.loss { background: var(--bad); }
.mt-teamsline { display: flex; align-items: center; gap: 9px; flex: 1; }
.mt-teamsline b { font-weight: 600; color: var(--text-2); min-width: 34px; }
.mt-teamsline b.mine { color: var(--text); font-weight: 800; }
.mt-teamsline b:last-of-type { text-align: right; }


.mt-mom { background: var(--panel-2); border-radius: 6px; }
.mt-mom-key {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  margin-top: 5px; font-size: 10.5px; color: var(--text-2);
}
.mt-mom-key span { display: inline-flex; align-items: center; gap: 5px; }
.mt-mom-key i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

.mt-crest {
  position: relative; display: inline-grid; place-items: center;
  width: 20px; height: 20px; flex: 0 0 auto; cursor: pointer; vertical-align: -4px;
}
.mt-crest img { width: 100%; height: 100%; object-fit: contain; }
.mt-crest i { font-style: normal; font-size: 9px; font-weight: 800; color: var(--text-2); }


.mt-crest img + i { display: none; }
.mt-crest:hover { filter: brightness(1.25); }
.mt-crest:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.mt-score-big .mt-crest { width: 34px; height: 34px; }










@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .mt-crest { width: 24px; height: 24px; vertical-align: -6px; }
}
.mt-score { font-variant-numeric: tabular-nums; font-weight: 700; }
.mt-xg { font-size: 10.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }


.mt-head .panel-body { position: relative; }
.mt-back { position: absolute; top: 10px; left: 12px; }
.mt-score-big {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 6px 0 2px; text-align: center;
}
.mt-score-big .mt-side { flex: 1; font-weight: 700; font-size: 14px; }
.mt-score-big .home { text-align: right; }
.mt-score-big .away { text-align: left; }
.mt-goals {
  font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mt-goals i { color: var(--text-2); font-style: normal; font-weight: 400; }
.mt-when-big { text-align: center; font-size: 11px; }
.mt-goals-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px;
}
.mt-goals-side { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.mt-goals-side.away { align-items: flex-end; }
.mt-goal {
  background: none; border: 0; color: var(--text); cursor: pointer;





  font-size: 11.5px; padding: 3px 3px; border-radius: 4px;



  min-height: 24px; display: inline-flex; align-items: center; gap: 3px;
}
.mt-goal:hover { background: var(--panel-2); }
.mt-goal b { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600; }
.mt-goal.og { color: var(--text-2); }
.og-tag {
  font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase;
  background: var(--panel-2); border-radius: 3px; padding: 0 3px; margin-left: 3px;
}









.mt-map { position: relative; max-width: 560px; margin: 0 auto; }
.mt-ends {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-2); margin-top: 3px;
}
.mt-legend {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 7px;
  font-size: 10.5px; color: var(--text-2); align-items: center;
}
.mt-legend .lg { display: flex; align-items: center; gap: 4px; }
.shotkey {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  border: 1.5px solid var(--text-2);
}
.shotkey.goal { background: var(--goal); border-color: #ffffff; }
.shotkey.saved { background: rgba(240, 190, 90, .55); border-color: #f0be5a; }
.shotkey.blocked { border-color: var(--text-2); background: rgba(127, 127, 127, .25); }
.shotkey.missed { border-color: var(--line); }

.shot { cursor: pointer; stroke-width: .35; }
.shot.h { stroke: var(--accent); }
.shot.a { stroke: #d98cc4; }
.shot.missed { fill: none; }
.shot.blocked { fill: rgba(127, 127, 127, .28); }
.shot.saved { fill: rgba(240, 190, 90, .5); }
.shot.post { fill: none; stroke-dasharray: 1.4 1; }
.shot.goal { fill: var(--goal); stroke: #ffffff; stroke-width: .55; }
.shot.goal.og { fill: var(--bad); }
.shot:hover, .shot.on { stroke-width: .9; }

.mt-shotinfo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;






  min-height: 48px; margin-top: 7px; font-size: 12px;
}
@media (max-width: 620px) {
  .mt-shotinfo { min-height: 92px; align-content: flex-start; }
}
.mt-min { color: var(--text-2); font-variant-numeric: tabular-nums; }
.mt-verdict {
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  background: var(--panel-2);
}
.mt-verdict.goal { background: var(--goal); color: #0b1a12; }
.mt-verdict.saved { background: #f0be5a; color: var(--bg); }













.shot-hit { -webkit-tap-highlight-color: transparent; outline: none; }
.shot-hit:focus-visible + .shot { stroke-width: 1.1; stroke: var(--text); }
.mt-map svg, .mp-map svg { -webkit-tap-highlight-color: transparent; }

.mt-shooter {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 2px 8px 2px 2px; border-radius: 20px; background: var(--panel-2);
}
.mt-shooter:hover { background: var(--raised); }
.mt-shooter b { font-size: 12px; }
.mt-shooter em { font-style: normal; font-size: 10px; color: var(--text-2); }
.mt-shooter .mp-av { width: 24px; height: 24px; }
.mt-shooter .mp-av i { font-size: 9px; }
.mt-shooter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mt-xgchip {
  font-size: 10.5px; padding: 1px 6px; border-radius: 4px;
  background: var(--bg); font-variant-numeric: tabular-nums;
}





.mt-shooter .mt-xgchip { margin-left: 2px; background: var(--bg); }
.mt-shooter .mt-xgchip.xG { color: var(--text); }
.mt-shooter .mt-xgchip.xA { color: var(--text-2); }





.mt-cmp {
  display: flex; flex-direction: column; gap: 5px;
  max-width: 560px; margin: 0 auto;
}
.mt-cmp-row {
  display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 8px;
}
.mt-cmp-row > b {
  font-variant-numeric: tabular-nums; font-size: 12.5px;
  color: var(--text-2); font-weight: 600;
}
.mt-cmp-row > b.lead { color: var(--text); font-weight: 800; }
.mt-cmp-row > b:last-child { text-align: right; }
.mt-cmp-mid { display: flex; flex-direction: column; gap: 2px; }
.mt-cmp-mid .lbl { font-size: 10.5px; color: var(--text-2); text-align: center; }
.mt-bar {
  height: 5px; border-radius: 3px; background: #d98cc4; overflow: hidden;
  display: block;
}
.mt-bar i { display: block; height: 100%; background: var(--accent); }


.mt-sheets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mt-sheet h3 {
  font-size: 12px; margin: 0 0 5px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.mt-subhead {
  font-size: 10px; color: var(--text-2); text-transform: uppercase;
  letter-spacing: .06em; margin: 7px 0 3px;
}
.mt-p {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 4px 6px; border: 0; border-radius: 5px; cursor: pointer;
  background: none; color: var(--text); text-align: left; font-size: 12px;
}
.mt-p:hover { background: var(--panel-2); }
.mt-p.open { background: var(--panel-2); }
.mt-pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }




.mt-p-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mt-p-top { display: flex; align-items: center; gap: 6px; min-width: 0; }















.mt-rs { display: flex; flex-wrap: wrap; gap: 2px 8px;
         font-size: 11px; color: var(--faint); line-height: 1.3; }
.mt-rs-i { white-space: nowrap; }
.mt-rs-i b { font-variant-numeric: tabular-nums; color: var(--text-2);
             font-weight: 600; }
.mt-marks { display: flex; gap: 2px; }
.mk {
  font-style: normal; font-size: 9px; font-weight: 800; line-height: 12px;
  display: inline-block; text-align: center;
}
.mk.goal { font-size: 10px; }
.mk.ast { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); color: var(--bg); }
.mk.yc { width: 8px; height: 11px; border-radius: 1.5px; background: #e8c33c; }
.mk.rc { width: 8px; height: 11px; border-radius: 1.5px; background: var(--bad); }
.mt-rating {
  font-size: 10.5px; font-weight: 700; padding: 1px 4px; border-radius: 4px;
  font-variant-numeric: tabular-nums; min-width: 26px; text-align: center;
}
.mt-rating.r5 { background: var(--good); color: var(--bg); }
.mt-rating.r4 { background: rgba(91, 205, 138, .3); }
.mt-rating.r3 { background: var(--panel-2); }
.mt-rating.r2 { background: rgba(237, 139, 130, .25); }
.mt-rating.r1 { background: var(--bad); color: var(--bg); }




.mt-rating.none, .mp-r.none { background: none; color: var(--faint); font-weight: 600; }
.mt-mins {
  font-size: 10.5px; color: var(--text-2); min-width: 28px; text-align: right;
  font-variant-numeric: tabular-nums;
}

.mt-pcard {
  margin: 3px 0 8px; padding: 9px 10px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line);
}

.mt-pcard-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }





.mt-pclose {
  flex: 0 0 auto; margin-left: 6px;
  width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  font-size: 19px; line-height: 1;
  background: var(--raised, var(--panel-2)); border: 1px solid var(--line);
  border-radius: 6px; color: var(--text-2); cursor: pointer;
}
.mt-pclose:hover { background: var(--bad-bg, var(--panel-2)); border-color: var(--bad); color: var(--bad); }
.mt-pclose:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mt-fpl {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--panel-2); border-radius: 4px; padding: 1px 6px;
}
.mt-pstats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 5px; margin: 8px 0; text-align: center;
}
.mt-pstats b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }


.mt-pstats span { font-size: var(--fs-cap); color: var(--text-2); }
.mt-nomap { margin: 6px 0; }
.avgpos { stroke: var(--text); stroke-width: .55; fill: none; }



.mp-av {
  position: relative; flex: 0 0 auto; width: 34px; height: 34px;
  border-radius: 50%; overflow: hidden; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.mp-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-av i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--text-2); }













.mp-av img[data-ok] + i { display: none; }


















#page-lineups > .panel > h2.h2-tight {
  position: sticky; top: 0; z-index: 5;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  border-radius: 7px 7px 0 0;
}
.mp-av:hover { border-color: var(--accent); }









































.pm-intro {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; margin-bottom: 12px;
}
.pm-facts { flex: 1 1 auto; min-width: 0; width: 100%; }
@media (min-width: 430px) {
  .pm-intro { flex-direction: row; }
  .pm-facts { width: auto; }
}
.mp-av.av-xl {
  width: 72px; height: 72px; border-radius: 10px; cursor: default;
}
.mp-av.av-xl i { font-size: 26px; }
.mp-av.av-xl:hover { border-color: var(--line); }
@media (min-width: 430px) {
  .mp-av.av-xl { width: 112px; height: 112px; }
  .mp-av.av-xl i { font-size: 38px; }
}


.mp-av.av-xl img { object-position: 50% 12%; }

.mp-av.av-lg { width: 34px; height: 34px; flex: 0 0 auto; }
.mp-av.av-lg i { font-size: 13px; }




.cmp-face { display: block; margin: 0 0 4px auto; width: 34px; }


.mp-av.av-sm { width: 20px; height: 20px; }
.mp-av.av-sm i { font-size: 8px; }
.mp-av:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mt-pcard-h .mt-pmore { margin-top: 0; }

@media (max-width: 700px) {
  .mt-sheets { grid-template-columns: 1fr; }
  .mt-back { position: static; margin-bottom: 6px; }
  .mt-score-big .mt-side { font-size: 12.5px; }
  .mt-goals { font-size: 23px; }
  .mt-cmp-row { grid-template-columns: 40px 1fr 40px; }
}








.lg-head, .lg-thead {



  display: grid; gap: 8px; padding: 0 8px;
  font-size: var(--fs-cap); color: var(--text-2);
  text-transform: uppercase; letter-spacing: .06em;
}
.lg-head { grid-template-columns: 1fr 62px 56px 44px 14px; }
.lg-thead { grid-template-columns: 46px 1fr 40px 56px; }
.lg-head span:not(:first-child), .lg-thead span:not(:nth-child(2)) { text-align: right; }

.lg-pick {
  display: grid; grid-template-columns: 1fr 62px 56px 44px 14px;
  gap: 8px; align-items: center; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 5px;
  background: none; color: var(--text); cursor: pointer;
  text-align: left; font-size: 12px;
}
.lg-pick:hover { background: var(--panel-2); }
.lg-pick.on { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }


.lg-pick.toobig .lg-name, .lg-pick.toobig .lg-size { opacity: .55; }
.lg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-size, .lg-rank {
  text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2);
}
.lg-rank { color: var(--text); font-weight: 700; }


.lg-divider {
  font-size: var(--fs-cap); color: var(--text-2); text-transform: uppercase;
  letter-spacing: .06em; margin: 9px 0 3px; padding-top: 7px;
  border-top: 1px solid var(--line);
}
.lg-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--good);
  display: inline-block;
}


.lg-dot.none { background: none; }
.lg-move { font-size: 10px; font-style: normal; text-align: right; }
.lg-move.up { color: var(--good); }
.lg-move.down { color: var(--bad); }
.lg-move.flat { color: var(--text-2); }

.lg-table { display: flex; flex-direction: column; gap: 1px; }
.lg-row {
  display: grid; grid-template-columns: 46px 1fr 40px 56px;
  gap: 8px; align-items: center; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 5px;
  background: var(--bg); color: var(--text); cursor: pointer;
  text-align: left; font-size: 12px;
}
.lg-row:hover { background: var(--panel-2); }
.lg-row.mine { box-shadow: inset 2px 0 0 var(--accent); background: var(--panel-2); }
.lg-row.rival { box-shadow: inset 2px 0 0 #d98cc4; background: var(--panel-2); }
.lg-pos {
  display: flex; align-items: baseline; gap: 3px;
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.lg-team { display: flex; flex-direction: column; min-width: 0; }
.lg-team b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-team i { font-size: 10px; color: var(--text-2); font-style: normal; }
.lg-gw, .lg-tot { text-align: right; font-variant-numeric: tabular-nums; }
.lg-gw { color: var(--text-2); }
.lg-tot { font-weight: 700; }
.lg-hint { margin-top: 6px; }
.lg-capped { color: var(--warn, #e8c33c); }

.lg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lg-two h3, .lg-h2h-side h3 { font-size: 12px; margin: 0 0 3px; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lg-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 7px; border-radius: 5px; background: var(--bg);
  border: 1px solid var(--line); font-size: 11.5px;
}
.lg-chip i { font-size: 10px; color: var(--text-2); font-style: normal; }
.lg-chip.capt { border-color: var(--accent); }

.lg-owntbl tbody tr.mine td { background: rgba(91, 205, 138, .09); }

.lg-h2h { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0; }
.lg-h2h-p {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 5px; border-radius: 4px; font-size: 12px;
}
.lg-h2h-p:nth-child(even) { background: var(--bg); }
.lg-h2h-p.benched { opacity: .55; }
.lg-h2h-p i { font-size: 10px; color: var(--text-2); font-style: normal; }
.lg-c {
  font-size: 9px; font-weight: 800; background: var(--accent); color: var(--bg);
  border-radius: 3px; padding: 0 3px;
}
.lg-shared { margin-bottom: 8px; }

@media (max-width: 700px) {
  .lg-two, .lg-h2h { grid-template-columns: 1fr; }
  .lg-head, .lg-pick { grid-template-columns: 1fr 52px 46px 38px 10px; }
  .lg-thead, .lg-row { grid-template-columns: 40px 1fr 34px 48px; }
}


.lg-squads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lg-sq h3 {
  font-size: 12.5px; margin: 0 0 4px; display: flex; align-items: baseline; gap: 6px;
}
.lg-sq h3 .note { font-size: 10.5px; font-weight: 400; }
.lg-sq.mine h3 { box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 3px; }
.lg-sq.theirs h3 { box-shadow: inset 0 -2px 0 #d98cc4; padding-bottom: 3px; }






.lg-sq-who {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 1px 5px; border-radius: 4px;
  background: var(--panel-2); color: var(--text-2);
}
.lg-sq.mine .lg-sq-who { background: var(--accent-dim); color: var(--accent); }
.lg-sq.theirs .lg-sq-who { background: rgba(217, 140, 196, .16); color: #d98cc4; }
.lg-sq-line {
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--text-2); margin-bottom: 6px;
}
.lg-sq-line b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.lg-sq-line em {
  font-style: normal; font-size: 10px; font-weight: 700;
  background: var(--panel-2); border-radius: 4px; padding: 1px 5px;
}
.lg-sq-line em.hit { color: var(--bad); }


.lg-sq .sq-man.flag .kit, .lg-sq .sq-man.flag svg { filter: drop-shadow(0 0 0 transparent); }
.lg-sq .sq-man.flag { outline: 1.5px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.lg-sq.theirs .sq-man.flag { outline-color: #d98cc4; }

@media (max-width: 700px) {
  .lg-squads { grid-template-columns: 1fr; }
}


.mp-wrap { position: relative; max-width: 760px; margin: 0 auto; }
.mp-men { position: absolute; inset: 0; }





.mp-man {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--text);




  width: 44px;
}
.mp-dot b {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 0;
}















.mp-dot b.nopts { opacity: .6; font-weight: 700; }


























.mp-nm {
  position: absolute; transform: translate(-50%, 0);
  font-size: 13px; line-height: 17px; white-space: nowrap;
  background: rgba(8, 14, 20, .78); color: #f4f7fa; font-weight: 600;
  padding: 0 5px; border-radius: 3px;
}
.mp-mk { display: flex; gap: 1px; height: 11px; }



.pill.spent { opacity: .45; text-decoration: line-through; }
.mk.on { color: var(--good); font-size: 10px; }



.mp-switches { margin: 0 auto 8px; max-width: 760px; gap: 8px; flex-wrap: wrap; }
.mp-switches .btn.on { border-color: var(--accent); color: var(--accent); }
.mp-man:hover .mp-dot b, .mp-man.open .mp-dot b { transform: scale(1.14); }
.mp-man.open { z-index: 3; }
.mk.off { color: var(--bad); font-size: 10px; }

.mp-ends {
  display: flex; justify-content: space-between; max-width: 760px;
  margin: 3px auto 0; font-size: 10px; color: var(--text-2);
}
.mp-benches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }


.mp-bench-t {
  font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-2); display: block; margin-bottom: 3px;
}
.mp-sub {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 3px 6px; border: 0; border-radius: 5px; background: none;
  color: var(--text); cursor: pointer; text-align: left; font-size: 11.5px;
}
.mp-sub:hover, .mp-sub.open { background: var(--panel-2); }
.mp-sub b { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-r {
  font-style: normal; font-size: 10px; font-weight: 700; border-radius: 3px;
  padding: 0 3px; font-variant-numeric: tabular-nums;
}
.mp-r.r5 { background: var(--good); color: var(--bg); }
.mp-r.r4 { background: rgba(91, 205, 138, .3); }
.mp-r.r3 { background: var(--panel-2); }
.mp-r.r2 { background: rgba(237, 139, 130, .25); }
.mp-r.r1 { background: var(--bad); color: var(--bg); }
.mp-for { font-size: 10px; color: var(--text-2); margin-left: auto; }

.mp-sub .note.unused { margin-left: auto; opacity: .6; }


.mp-subline { margin: 4px 0 8px; font-size: 11.5px; }
.mp-swap {
  cursor: pointer; padding: 2px 7px; border-radius: 5px;
  background: var(--panel-2); display: inline-block;
}
.mp-swap:hover { background: var(--raised, var(--line)); }
.mp-swap.on { color: var(--good); }
.mp-swap.off { color: var(--bad); }
.mp-swap b { color: var(--text); }



.pn { border-left: 3px solid var(--warn); padding-left: 9px; }
.pn-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  padding: 4px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px;
}
.pn-row:last-child { border-bottom: 0; }
.pn-row i { font-style: normal; color: var(--muted); font-size: 10.5px; }
.pn-said { flex: 1 1 100%; color: var(--text-2); font-size: 11.5px; white-space: pre-wrap; }

.mp-group { margin-top: 9px; }





.mp-group h4 {
  font-size: var(--fs-note); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-2); margin: 0 0 4px; padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
}



.mp-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0 22px; margin: 0;
}
.mp-stats > div {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line-soft);
}
.mp-stats dt { font-size: 11.5px; color: var(--text-2); min-width: 0; }
.mp-stats dd {
  margin: 0; font-size: 12.5px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .mp-benches { grid-template-columns: 1fr; }
  .mp-man { width: 46px; }




  .mp-dot b { width: 24px; height: 24px; font-size: 11px; }






}


tr.gl-go { cursor: pointer; }
tr.gl-go:hover td { background: var(--panel-2); }














.cmp-mv { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.cmp-mv .btn { min-width: 26px; padding: 4px 6px; line-height: 1; }
.cmp-mv .btn:disabled { opacity: .3; }

.cmp-mscroll { overflow-x: auto; padding-bottom: 3px; }
.cmp-mrow { display: flex; align-items: center; gap: 8px; margin-top: 7px;
            width: max-content; }




.cmp-mname {
  flex: 0 0 130px; width: 130px; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-left: 3px solid var(--accent); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  position: sticky; left: 0; z-index: 1; background: var(--panel);
}
@media (max-width: 700px) {
  .cmp-mname { flex-basis: 84px; width: 84px; font-size: 10px; }
}


.pb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.pb-block { margin-bottom: 10px; }
.pb-foot { margin-top: 9px; }


.price-news::before { background: var(--warn) !important; }
.price-news .pr-crest {
  background: var(--warn-bg); color: var(--warn); border-color: var(--warn);
}
.pb-two h3, #hbPrices h3 { font-size: 12px; margin: 0 0 3px; }
.pb-list { display: flex; flex-direction: column; gap: 1px; margin-top: 5px; }
.pb-row {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 4px 7px; border: 0; border-radius: 5px; background: var(--bg);
  color: var(--text); cursor: pointer; text-align: left; font-size: 12px;
}
.pb-row:hover { background: var(--panel-2); }
.pb-arrow { flex: 0 0 auto; font-size: 10px; }
.pb-row.rise .pb-arrow { color: var(--good); }
.pb-row.fall .pb-arrow { color: var(--bad); }
.pb-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-name i { font-style: normal; font-size: 10px; color: var(--text-2); margin-left: 5px; }
.pb-money { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 11.5px; }
.pb-money b { color: var(--text-2); font-weight: 400; }
.pb-bar {
  flex: 0 0 46px; height: 5px; border-radius: 3px;
  background: var(--panel-2); overflow: hidden;
}
.pb-bar i { display: block; height: 100%; background: var(--text-2); }
.pb-row.rise .pb-bar i { background: var(--good); }
.pb-row.fall .pb-bar i { background: var(--bad); }
.pb-pct {
  flex: 0 0 34px; text-align: right; font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.pb-row.imminent .pb-pct { font-weight: 800; }
.pb-own { flex: 0 0 38px; text-align: right; font-style: normal; font-size: 10px; color: var(--text-2); }

@media (max-width: 700px) {
  .pb-two { grid-template-columns: 1fr; }
  .pb-own { display: none; }
}


.pp-row { padding: 7px 0; border-top: 1px solid var(--line); }
.pp-row:first-child { border-top: 0; }
.pp-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.pp-team { color: var(--text-2); }
.pp-score { font-weight: 700; }
.pp-pts {
  font-size: 11px; font-weight: 700; background: var(--panel-2);
  border-radius: 4px; padding: 1px 6px;
}
.pp-perfect {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; background: var(--good); color: var(--bg);
  border-radius: 4px; padding: 1px 6px;
}
.pp-row.pending { opacity: .82; }
.pp-picks { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.pp-p {
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--line); color: var(--text-2);
}


.pp-p.yes { border-color: var(--good); color: var(--good); }
.pp-p.no { border-color: var(--bad); color: var(--bad); opacity: .75; }


.cb-fixtures { display: flex; flex-wrap: wrap; gap: 4px; }
.cb-fx {
  display: flex; align-items: baseline; gap: 4px;
  padding: 5px 9px; border-radius: 6px; cursor: pointer;
  background: var(--bg); border: 1px solid transparent; color: var(--text);
  font-size: 12px;
}
.cb-fx:hover { background: var(--panel-2); }
.cb-fx.on { border-color: var(--accent); background: var(--panel-2); }






.cb-fx.mine { border-color: var(--gold); }
.cb-fx.mine::before {
  content: '\2713'; color: var(--gold); font-weight: 800; margin-right: 4px;
}


.cb-fx.mine.both { background: rgba(217, 164, 65, .16); }
.cb-fx.played.mine::before { opacity: .5; }


.cb-side.cb-saved > h2 { border-left: 3px solid var(--gold); padding-left: 8px; }
.cb-tick { color: var(--gold); }
.cb-edit { color: var(--warn); }




.cb-pitch.crowd { outline: 2px solid var(--gold); outline-offset: -2px; }



.cb-pitch.crowd .cb-man { gap: 1px; display: flex; flex-direction: column; align-items: center; }
.cb-man-p {
  font-size: 9px; color: var(--gold); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cb-fx[disabled] { opacity: .45; cursor: default; }
.cb-fx-t { font-weight: 700; }
.cb-fx-v { color: var(--text-2); font-size: 10px; }
.cb-fx-k { color: var(--text-2); font-size: 10px; margin-left: 3px; }

.cb-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cb-side .cb-n { color: var(--accent); }



.cb-pitch {



  --sq-w: 72px; --sq-jw: 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 4px; padding: 10px 6px; border-radius: 8px;





  aspect-ratio: 68 / 105;



  width: 100%; max-width: 330px; margin-inline: auto;


  max-height: 520px;
  background: var(--stripe), var(--pitch);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.cb-pitch.over { outline: 2px dashed var(--accent); outline-offset: -3px; }

.cb-pitch.leaving { outline: 2px dashed var(--bad); outline-offset: -3px; }
.cb-man.dragging { opacity: .35; }

.cb-man.swap svg { filter: drop-shadow(0 0 0 transparent); }
.cb-man.swap { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 7px; }





.cb-man[data-pull] { touch-action: none; }
.cb-row.held { background: var(--accent-dim); }
.cb-ghost.off { background: var(--bad); }
.cb-sort { margin-bottom: 6px; }
.cb-pitch.shut { opacity: .6; }
.cb-line {
  display: flex; justify-content: center; gap: 4px; flex-wrap: wrap;
  min-height: 54px; align-items: center;
}


.cb-empty {
  font-size: var(--fs-cap); letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-turf-2);
}
.cb-man {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: none; border: 0; padding: 0; cursor: pointer;









  flex: 1 1 0; min-width: 44px; max-width: var(--sq-w, 72px);
}
.cb-man svg {





  width: 48px; max-width: none; height: auto;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.cb-man-n {
  display: block; width: 100%; margin-top: 2px; padding: 2px 3px;
  background: var(--panel); border: 1px solid var(--line);




  border-radius: 4px 4px 0 0; border-bottom: 0;




  font-size: var(--fs-ui); font-weight: 600; text-align: center; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 620px) {
  .cb-man svg { width: 32px; }

  .cb-man-n { font-size: 11px; }
}
.cb-man:hover .cb-man-n { text-decoration: line-through; }
.cb-shape { margin: 5px 0 3px; }
.cb-msg { min-height: 15px; }



.cb-listwrap {
  max-height: 300px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg);
}
.cb-list { display: flex; flex-direction: column; }
.cb-row {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 5px 7px; border: 0; border-bottom: 1px solid var(--line-soft, var(--line));
  background: none; color: var(--text); cursor: grab; text-align: left;
  font-size: 12px; touch-action: pan-y;
}
.cb-row:last-child { border-bottom: 0; }
.cb-row:hover { background: var(--panel-2); }
.cb-row.on { background: var(--accent-dim); }
.cb-row.dragging { opacity: .4; }
.cb-row[disabled] { cursor: default; opacity: .6; }
.cb-row-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-xi {
  font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .04em;
  background: var(--accent); color: var(--bg); border-radius: 3px; padding: 0 3px;
}
.cb-p {
  flex: 0 0 34px; text-align: right; font-size: 11px;
  font-variant-numeric: tabular-nums; color: var(--text-2);
}
.cb-row.b3 .cb-p { color: var(--good); font-weight: 700; }
.cb-row.b2 .cb-p { color: var(--text); }
.cb-row.b0 .cb-p { opacity: .55; }
.cb-comm {
  flex: 0 0 34px; text-align: right; font-size: 10px; color: var(--text-2);
}
.cb-legend { margin-top: 6px; }


.cb-ghost {
  position: fixed; z-index: 90; pointer-events: none;
  transform: translate(-50%, -140%);
  padding: 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 700;
  background: var(--accent); color: var(--bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

@media (max-width: 760px) {
  .cb-sides { grid-template-columns: 1fr; }
  .cb-listwrap { max-height: 260px; }
}




td.has-working { text-decoration: underline dotted var(--line); text-underline-offset: 3px; }


.help-pop {
  position: fixed; z-index: 95; max-width: min(300px, calc(100vw - 16px));
  padding: 9px 11px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
  font-size: 12.5px; line-height: 1.4; color: var(--text);
  white-space: pre-wrap;
}
.help-pop-b { max-height: 46vh; overflow-y: auto; }



.tc-kind.k-news { background: var(--warn-bg); color: var(--warn); }
.tc-kind.k-help { background: var(--accent-dim); color: var(--accent); }













.console.job { font-family: var(--sans); white-space: normal; padding: 10px 12px; }
.job-line { font-size: 13px; font-weight: 600; }
.job-line.run { color: var(--text-2); }
.job-line.run::after {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-left: 7px;
  border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: job-spin .7s linear infinite;
  vertical-align: -1px;
}
@keyframes job-spin { to { transform: rotate(360deg); } }
.job-line.ok { color: var(--good); }
.job-line.bad { color: var(--bad); }

.mt-pclose {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel-2); color: var(--text-2);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.mt-pclose:hover { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.mt-pclose:active { transform: translateY(1px); }

.mt-pop-bg {
  position: fixed; inset: 0 0 var(--tabbar-h) 0;
  z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: 14px;
  background: rgba(6, 8, 11, .74);
}
.mt-pcard.mt-pop {
  width: 100%; max-width: 700px; margin: 0;

  max-height: min(86dvh, 900px); overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}


.mt-pop .mt-pcard-h {
  position: sticky; top: -10px; z-index: 2;
  margin: -9px -10px 6px; padding: 10px 10px 8px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}













.mp-maps {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.mp-maps > * { min-width: 0; }
.mp-map { max-width: 340px; }
.mp-map .note, .mp-nomap { font-size: 10px; margin-top: 3px; }

@media (max-width: 700px) {
  .mt-pop-bg { padding: 8px; align-items: flex-end; }
  .mt-pcard.mt-pop { max-height: 88dvh; }
  .mp-maps { grid-template-columns: 1fr; }
  .mp-map { max-width: 100%; }
}

.mp-map h5 {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-2); margin: 0 0 4px; font-weight: 600;
}













.tp { fill: #10161d; opacity: .42; }

.heat-key.scale { display: flex; align-items: center; gap: 8px; }
.heat-key.scale .bar { position: relative; flex: 1 1 120px; max-width: 260px; height: 10px;
  border-radius: 3px; margin-bottom: 12px;





  background-color: var(--pitch, #17301f);
  background-blend-mode: normal; }
.heat-key.scale .tick { position: absolute; top: 12px; transform: translateX(-50%);


  font-style: normal; font-size: var(--fs-cap); color: var(--text-2); white-space: nowrap; }
.heat-key.scale .tick::before { content: ''; position: absolute; left: 50%; top: -3px; width: 1px; height: 3px;
  background: var(--text-2); }



.tr-actions {
  position: fixed; z-index: 65; display: flex; flex-direction: column;
  min-width: 150px; padding: 4px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}
.tr-actions button {
  background: none; border: 0; color: var(--text); cursor: pointer;
  text-align: left; padding: 8px 10px; border-radius: 6px;




  font-size: var(--fs-body); min-height: var(--ctl-h);
  display: flex; align-items: center;
}
.tr-actions button:hover { background: var(--raised); }
.sq-man.acting { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }


.col-ghost {
  position: fixed; z-index: 90; pointer-events: none;
  transform: translate(-50%, -150%);
  padding: 4px 9px; border-radius: 5px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  background: var(--accent); color: var(--bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}


.col-ghost.off { background: var(--bad); }


.col-ghost.off::after { content: ' - remove'; font-weight: 400; }






.cadd-ghost {
  position: fixed; z-index: 90; pointer-events: none;
  transform: translate(-50%, -150%);
  padding: 4px 9px; border-radius: 5px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  background: var(--accent); color: var(--bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.cadd-ghost.off { background: var(--raised); color: var(--muted);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.cadd-ghost.off::after { content: ' ↑ drop on the order list';
  font-weight: 400; opacity: .8; }



.col-caret {
  position: fixed; z-index: 89; pointer-events: none;
  width: 2px; background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
th.dragging { opacity: .4; }












@media (hover: none) and (pointer: coarse), (max-width: 760px) {

  .mt-team, .rx, .pr-head, .cb-fx, .lg-row, .tc-kind-pick {
    min-height: 36px; display: inline-flex; align-items: center;
  }
  .lg-row, .pr-head { width: 100%; }



  a.pdetail, a.tdetail { display: inline-block; padding: 8px 2px; }
















  .pos.inline, .tc-kind, .tc-edited, .cb-fx-v, .cb-fx-k,
  .cmp-fx-k { font-size: 10px; }
}








@media (min-width: 1940px) {



  body > header, .tabbar, .rangebar {
    padding-left: calc((100vw - var(--shell-max)) / 2 + env(safe-area-inset-left, 0px));
    padding-right: calc((100vw - var(--shell-max)) / 2 + env(safe-area-inset-right, 0px));
  }
}

















.rm-card { border-color: var(--line); position: relative; }
.rm-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 8px 0 0 8px;
  background: var(--spine, var(--edge, var(--line))); opacity: .9;
}
.rm-card .panel-body { padding-left: 14px; }
.rm-card .tc-meta { align-items: center; gap: 8px; flex-wrap: wrap; }
.rm-tier {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text-2); cursor: help;
}
.rm-tier.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.rm-tier.ok   { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.rm-tier.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.rm-who { font-size: 13px; }
.rm-when { margin-left: auto; }
.rm-quote {
  margin: 8px 0 6px; padding: 0 0 0 12px;
  border-left: 2px solid var(--line);
  font-size: 14px; line-height: 1.5; color: var(--text);
  max-width: 92ch;
}
.rm-quote::before { content: '\201C'; }
.rm-quote::after  { content: '\201D'; }
.rm-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
           font-size: 11px; }
.rm-flag {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
}
.rm-stage, .rm-route {
  padding: 2px 7px; border-radius: 4px; background: var(--panel-2);
  color: var(--text-2);
}
.rm-via { margin-left: auto; cursor: help; }






.rm-foot a, .pr-card .tc-meta a { display: inline-flex; align-items: center;
                                  padding: 4px 2px; }
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .rm-when { margin-left: 0; }
  .rm-via { margin-left: 0; }
  .rm-tier, .rm-flag { font-size: 10px; }




  .rm-foot a, .pr-card .tc-meta a { display: inline-flex; align-items: center;
                                    min-height: 36px; padding: 0 6px; }
}




.moved {
  font-family: var(--mono); font-size: 10px; padding: 0 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--gold); cursor: help; white-space: nowrap;
}
.pitch-shirt .moved { font-size: 9px; }





.tr-xp {
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
  white-space: nowrap; margin-left: 8px; cursor: help;
}
.tr-xp i { font-style: normal; font-size: 10px; color: var(--muted); margin-left: 2px; }
.tr-xp.stale { color: var(--faint); }
.tr-xp.stale i::after { content: '?'; margin-left: 1px; }










.cmp-grip {
  display: none; cursor: grab; color: var(--faint); user-select: none;
  font-size: 11px; letter-spacing: -2px; padding: 0 4px; margin-right: 2px;
  touch-action: none;
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .cmp-grip { display: inline-block; }
}
.cmp-grip:active { cursor: grabbing; color: var(--accent); }
tr.cmp-lift > td { background: var(--panel-2); opacity: .75; }
tr.cmp-drop > td { box-shadow: inset 0 2px 0 var(--accent); }





















.tr-run.tall {
  display: flex; gap: 2px; width: auto; margin-top: 4px;
  justify-content: flex-start; flex-wrap: nowrap; align-items: flex-start;
}
.tr-run.tall .tr-cell {
  flex: 0 0 44px; width: 44px;
  display: flex; flex-direction: column; gap: 1px;
  text-align: center; border-radius: 3px; padding: 0;
}
.tr-run.tall .tr-bands { display: flex; flex-direction: column; gap: 1px; }
.tr-run.tall .tr-chip {
  flex: 0 0 auto; width: 100%; max-width: none; height: 22px;
  font-size: 11px; line-height: 22px; display: block;
}
.tr-run.tall .tr-chip b { font-weight: 700; margin-left: 2px; }


.tr-run.tall .tr-cell.turn { border-left: 2px solid var(--line); padding-left: 3px; }
.tr-run.tall i {
  display: block; height: 15px; line-height: 15px;
  font-style: normal; font-size: 10px;
  font-variant-numeric: tabular-nums; border-radius: 2px;
}









.tr-run.tall i .xgk, .tr-run.tall i.xgk {
  display: inline; height: auto; line-height: inherit;
}







.tr-run.tall .tr-xp {
  color: var(--accent); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 9%, transparent);














  margin-left: 0;
}





.tr-run.tall .tr-pts { font-weight: 700; }






.tr-run.tall .tr-key {
  flex: 0 0 26px; width: 26px; text-align: right; padding-right: 3px;
  border-right: 1px solid var(--line-soft); margin-right: 2px;
}
.tr-run.tall .tr-key .tr-bands { height: 22px; }
.tr-run.tall .tr-key i {
  background: none; color: var(--faint); font-weight: 600;
  text-transform: none; letter-spacing: -.02em;
}






.tr-run.tall .tr-cell.done {
  background: var(--panel-2); border: 1px solid var(--line);
  padding: 2px; margin: -2px 0;
}
.tr-run.tall .tr-cell.done.turn { margin-left: 0; }







.tr-run.tall.club .tr-cell { flex: 0 0 54px; width: 54px; }





.tr-run.tall.club .tr-key { flex: 0 0 38px; width: 38px; }









.tr-run.tall i.xgk.up { color: var(--good); }
.tr-run.tall i.xgk.dn { color: var(--bad); }


.tr-run.tall .tr-pts.p4 { background: var(--good); color: var(--bg); font-weight: 700; }
.tr-run.tall .tr-pts.p3 { background: rgba(91, 205, 138, .35); color: var(--text); }
.tr-run.tall .tr-pts.p2 { background: var(--panel-2); color: var(--text); }
.tr-run.tall .tr-pts.p1 { background: rgba(237, 139, 130, .25); color: var(--text); }

.tr-run.tall .tr-pts.none { color: var(--faint); }




.run-scroll { overflow-x: auto; padding-bottom: 3px; }
.run-foot { margin-top: 6px; }


.cmp-mhead .cmp-run { align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cmp-run .tr-run.tall { margin-top: 0; }
.cmp-run .null { color: var(--faint); font-size: var(--fs-ui); }


.tr-run.tall .tr-cell.go { cursor: pointer; background: none; border: 0; }
.tr-run.tall .tr-cell.go:hover .tr-chip { outline: 1px solid var(--accent); }
.tr-run.tall .tr-cell.go:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }





.tr-price-set {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
}
.tr-price-set .px {
  width: var(--ctl-h); height: var(--ctl-h); padding: 0;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 4px; color: var(--text); cursor: pointer;
  font-size: var(--fs-ui); line-height: 1;
}
.tr-price-set .px:hover { border-color: var(--accent); color: var(--accent); }
.tr-price-set .pxv {
  width: 52px; height: var(--ctl-h); min-width: 0; padding: 0 4px;
  text-align: center; font-variant-numeric: tabular-nums;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); font-size: var(--fs-ui);
}


.tr-price-set.mine .pxv { border-color: var(--accent); color: var(--accent); }
.tr-price-set .pxg {
  font-style: normal; font-size: var(--fs-ui); font-variant-numeric: tabular-nums;
}



.tr-cand .sortv { color: var(--text); font-variant-numeric: tabular-nums; }
.tr-cand .sortn { color: var(--faint); }











.tr-cand .tr-figs {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 2px 8px;
  font-size: var(--fs-ui); color: var(--muted);
}
.tr-cand .tr-figs i {
  font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 760px) { .tr-cand .tr-figs { flex: 1 1 100%; } }
.tr-price-set .pxg.up { color: var(--good); }
.tr-price-set .pxg.dn { color: var(--bad); }






.proj-formula { margin-top: 10px; }
.proj-formula > summary {
  cursor: pointer; font-size: var(--fs-note); color: var(--text-2);
  padding: 4px 0;
}
.proj-formula > summary:hover { color: var(--text); }
.proj-formula .kv { margin-top: 6px; grid-template-columns: 1fr; }
.proj-formula dt { text-transform: none; }





.st-group { margin-bottom: 10px; }
.st-group > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 13px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel);
}
.st-group > summary::-webkit-details-marker { display: none; }



.st-group > summary::before {
  content: ''; flex: 0 0 auto; width: 0; height: 0;
  border-left: 5px solid var(--text-2);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: translateY(-1px); transition: transform .12s ease;
}
.st-group[open] > summary::before { transform: rotate(90deg) translateX(-1px); }
.st-group > summary:hover { border-color: var(--accent); }
.st-group > summary b { font-size: var(--fs-note); }
.st-group > summary .note { flex: 1 1 200px; min-width: 0; }
.st-group > summary .st-count {
  font-style: normal; color: var(--faint); font-size: 11px; flex: 0 0 auto;
}
.st-group[open] > summary { margin-bottom: 10px; }


.st-group > .panel, .st-group > .grid2 { margin-bottom: 10px; }














.filters.quick {
  padding: 0 13px 11px;
  border-bottom: 1px solid var(--line);
}
.filters.quick:empty { padding: 0; border-bottom: 0; }







.filters .field > span:not(.pair) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


















@media (max-width: 700px) {
  .filters.quick { gap: 8px 10px; }
  .filters.quick > .field.wide { flex: 1 1 84px; min-width: 0; }
  .filters.quick > .field.wide input { min-width: 0; width: 100%; }
  .filters.quick > .field.sortf { flex: 1 1 208px; min-width: 0; }






  .filters.quick > .field.sortf select { min-width: 0; flex: 1 1 0; }
  .filters.quick > .field.sortf .toggle { flex: 0 0 auto; }


  .filters.quick > .field.statf { flex: 1 0 100%; }













  .filters.quick > .field.wide { flex: 1 1 66px; }
  .filters.quick > .field.sortf { flex: 1 1 160px; }
  .filters.quick > .field.mins { flex: 0 1 72px; }
  .filters.quick > .field.mins input { width: 100%; min-width: 0; }
}













@media (max-width: 360px) {



  .filters.quick > .field.wide { flex: 1 1 58px; }
  .filters.quick > .field.sortf { flex: 1 1 130px; }
  .filters.quick > .field.mins { flex: 0 1 64px; }
}

.panel > .filters.quick + .panel-body[hidden] { border-top: 0; }

































.mp-stats > div, .pm-facts > div { padding-left: 6px; padding-right: 6px; }
.mp-stats, .pm-facts { margin-left: -6px; margin-right: -6px; }


@media (max-width: 700px) {
  .mp-stats { grid-template-columns: 1fr; }
  .mp-stats > div:nth-child(2n) { background: var(--panel-2); }
}
@media (max-width: 430px) {
  .pm-facts { grid-template-columns: 1fr; }
  .pm-facts > div:nth-child(2n) { background: var(--panel-2); }
}

@media (min-width: 701px) and (max-width: 1099px) {
  .mp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-stats > div:nth-child(4n+3),
  .mp-stats > div:nth-child(4n+4) { background: var(--panel-2); }
}
@media (min-width: 431px) and (max-width: 760px) {
  .pm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-facts > div:nth-child(4n+3),
  .pm-facts > div:nth-child(4n+4) { background: var(--panel-2); }
}

@media (min-width: 1100px) {
  .mp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-stats > div:nth-child(6n+4),
  .mp-stats > div:nth-child(6n+5),
  .mp-stats > div:nth-child(6n+6) { background: var(--panel-2); }
}
@media (min-width: 761px) {
  .pm-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-facts > div:nth-child(6n+4),
  .pm-facts > div:nth-child(6n+5),
  .pm-facts > div:nth-child(6n+6) { background: var(--panel-2); }
}





.searchbox { position: relative; display: block; }
.searchbox > input { width: 100%; padding-right: 26px; }
.searchbox-x {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 24px;
  display: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--faint); border-radius: 0 4px 4px 0;
}
.searchbox.has > .searchbox-x { display: block; }
.searchbox-x:hover { color: var(--text); background: var(--panel-2); }









.kj-help {
  position: fixed; z-index: 9500; pointer-events: none;
  max-width: min(280px, calc(100vw - 16px));
  padding: 7px 10px; border-radius: 7px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); font-size: var(--fs-ui); line-height: 1.35;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}


.toggle button > em { font-style: inherit; }





.kj-help.wide { max-width: min(340px, calc(100vw - 16px)); }
.kj-help b { color: var(--text); font-variant-numeric: tabular-nums; }
.kj-help i { color: var(--faint); font-style: normal; }


.kj-help .kjh-k {
  color: var(--faint); text-transform: uppercase;
  font-size: 10px; letter-spacing: .05em; margin-right: 3px;
}






.tr-ahead > span > b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--text-2);
}







.tr-ahead { flex: 0 0 auto; }
.tr-ahead > .toggle { flex: 0 0 auto; width: max-content; }









.mt-momwrap { position: relative; }
.mt-shot {
  position: absolute; transform: translate(-50%, -50%);
  width: 22px; height: 22px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center; z-index: 2;
}


.mt-shot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid currentColor; background: var(--bg);
  box-shadow: 0 0 0 1.5px var(--bg);
}



.mt-shot.goal::after { background: currentColor; }
.mt-shot.h { color: var(--accent); }
.mt-shot.a { color: #d98cc4; }
.mt-shot:hover::after, .mt-shot:focus-visible::after {
  box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3.5px currentColor;
}


.ch-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.ch-head strong { font-size: 15px; }
.ch-what { color: var(--muted); font-size: 12px; }
.ch-head .btn { margin-left: auto; }
.ch-body { display: flex; flex-direction: column; gap: 10px; }
.ch-who {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2);
}
.ch-who.none { color: var(--muted); font-size: 12px; }
.ch-who .mp-av { width: 44px; height: 44px; flex: 0 0 auto; }
.ch-who .mp-av i { font-size: 15px; }
.ch-nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ch-nm b { font-size: 14px; }
.ch-nm em { font-style: normal; color: var(--muted); font-size: 11.5px; }


.ch-figs { display: flex; gap: 14px; margin-left: auto; }
.ch-fig {
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600; text-align: right;
}
.ch-fig i {
  font-style: normal; font-family: inherit; font-size: 9.5px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
}
@media (max-width: 420px) {
  .ch-figs { margin-left: 0; width: 100%; }
  .ch-fig { text-align: left; }
}








.mp-names { position: absolute; inset: 0; pointer-events: none; z-index: 2; }



.mp-nm.tethered { background: rgba(8, 12, 18, .92); }







@media (max-width: 560px) {
  .mp-nm { font-size: 11px; line-height: 15px; padding: 0 4px; }
}
.mp-tethers {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  width: 100%; height: 100%;
}
.mp-tethers line {
  stroke: var(--line); stroke-width: 1; stroke-opacity: .85;
  vector-effect: non-scaling-stroke;
}







.who-chain { margin-top: 7px; border-top: 1px solid var(--line); padding-top: 6px; }
.who-chain-t {
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 3px;
}
.who-chain ol { margin: 0; padding: 0; list-style: none; }
.who-chain li {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12px; line-height: 1.5;
}



.who-chain li::before {
  content: "92"; color: var(--faint); font-size: 11px;
}
.who-chain li.moves::before { content: "C4"; color: var(--accent); }
.who-chain li em {
  font-style: normal; color: var(--muted); font-size: 11px;
}
.who-chain .ch-p {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--text-2); font-size: 11.5px;
}


.who-chain li + li { padding-left: 10px; }
.who-chain li + li + li { padding-left: 20px; }












.hb-card {
  display: flex; gap: 10px; align-items: stretch; margin: 8px 0 0;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--panel-2); text-decoration: none; color: inherit;
}
.hb-card:hover { border-color: var(--accent); }
.hb-card-i { flex: 0 0 92px; display: block; background: var(--panel); }
.hb-card-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-card-t {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  padding: 8px 10px 8px 0; min-width: 0;
}


.hb-card.noimg .hb-card-t { padding-left: 10px; }
.hb-card-t b {
  font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}



.hb-card-d {
  font-size: 11.5px; line-height: 1.35; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hb-card-t em {
  font-style: normal; font-size: 10.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .04em;
}
@media (max-width: 560px) {
  .hb-card { flex-direction: column; }
  .hb-card-i { flex: 0 0 auto; height: 150px; }
  .hb-card-t { padding: 9px 10px; }
}
@media (max-width: 420px) {
  .hb-card-d { display: none; }
}




















.tmatch:nth-child(even) { background: var(--panel-2); }
.lg-row:nth-child(even) { background: var(--panel-2); }
.lg-pick:nth-child(even) { background: var(--panel-2); }
.cmpfx-row:nth-child(even) { background: var(--panel-2); }







.tr-row.alt { background: var(--panel-2); }




.pr-also { font-size: 11px; color: var(--muted); display: inline-flex;
           gap: 6px; align-items: baseline; flex-wrap: wrap; }
.pr-also a { color: var(--muted); text-decoration: underline dotted; }
.pr-also a:hover, .pr-also a:focus { color: var(--accent); }



.fb-kit { margin-top: 10px; }
.fb-kit td.mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-dev { text-transform: capitalize; color: var(--text); }


.code-mint { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px;
             margin-bottom: 10px; }


.code-field { display: flex; flex-direction: column; gap: 3px; }
.code-field.wide { flex: 1 1 180px; min-width: 150px; }
.code-mint label { font-size: 11px; color: var(--muted); }









.code-mint input {
  padding: 0 7px; height: var(--ctl-h); box-sizing: border-box;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  font-size: var(--fs-body);
}
.code-mint input:focus { outline: 1px solid var(--accent); outline-offset: -1px; }
.code-mint input[type=text] { width: 100%; }
.code-mint input[type=number] { width: 72px; font-family: var(--mono); }
.code-fresh { border: 1px solid var(--accent); border-radius: 6px;
              padding: 10px 12px; margin-bottom: 12px; background: var(--panel-2); }
.code-fresh b { display: block; margin-bottom: 6px; }
.code-plain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.code-plain code, .code-plain-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; letter-spacing: .02em; user-select: all;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 7px; word-break: break-all; }
.code-plain-cell { font-size: 12px; padding: 2px 5px; }
.code-table tr.gone td { opacity: .55; }





.fb-scroll { overflow-x: auto; margin-bottom: 10px; }
.fb-scroll > .fb-grid { margin-bottom: 0; }





.sq-statpick { min-width: 0; }
.sq-statpick select { max-width: 168px; min-width: 0; }
@media (max-width: 700px) {
  .sq-statpick { flex: 1 1 140px; }
  .sq-statpick select { max-width: none; width: 100%; }








  #mySquadBody .tc-row > #sqView { order: 1; }
  #mySquadBody .tc-row > .sq-statpick { order: 2; }
  #mySquadBody .tc-row > .fdr-inline { order: 3; }
  #mySquadBody .tc-row > .note { order: 4; }
}




.sq-man .sq-sub.stat { color: var(--text-2); }
.sq-man .sq-sub.none { color: var(--faint); }
.us-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
        color: var(--muted); margin: 14px 0 6px; font-weight: 600; }
.us-h:first-child { margin-top: 0; }
.us-screens { max-width: 320px; font-size: 11px; color: var(--muted); }




.pp-table td, .pp-table th { vertical-align: top; }
.pp-table tr.gone td { opacity: .6; }
.pp-kits { max-width: 260px; }
.pp-kit { display: inline-block; margin: 0 5px 2px 0; white-space: nowrap;
          font-size: 11px; color: var(--text-2); }
.pp-kit i { font-style: normal; color: var(--muted); }
.pp-tag { display: inline-block; font-size: 10px; text-transform: uppercase;
          letter-spacing: .04em; padding: 1px 5px; border-radius: 3px;
          border: 1px solid var(--line); color: var(--muted); }
.pp-tag.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.pp-tag.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.pp-tag.admin { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }



.btn.danger { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.btn.danger:hover, .btn.danger:focus {
  background: color-mix(in srgb, var(--bad) 18%, var(--panel));
  border-color: var(--bad); color: var(--text);
}




















@media (hover: none) and (pointer: coarse) {





  input, select, textarea,
  .field input, .field select, .field textarea,
  .filters input, .filters select,
  .statf-row input, .statf-row select,
  .colfilter, input.colfilter,




  .sw-box, select.btn { font-size: 16px; }
}