:root{
  --bg:#f5f6f8; --panel:#ffffff; --ink:#1d2433; --muted:#687184; --faint:#9aa2b1;
  --line:#dde1e8; --line2:#eef0f4; --hover:#f1f3f7;
  --walnut:#8a5a32; --walnut-soft:#f4ebe1; --sel:#f6e7cf;
  --win:47,98,201; --loss:200,66,59;          /* rgb triplets for tints */
  --wincol:#2f62c9; --losscol:#c8423b;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:6px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:13px/1.45 var(--font);font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--walnut);outline-offset:1px}
.n{font-stretch:75%}                         /* narrow width for dense data */

/* ---------- top bar ---------- */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 14px;background:var(--panel);
  border-bottom:1px solid var(--line);flex:none;position:relative;z-index:50}
.brand{font-weight:750;font-size:15px;letter-spacing:-.01em;margin-right:4px;white-space:nowrap}
.brand small{font-weight:450;color:var(--muted);font-size:12px;margin-left:6px}
.search{width:170px;padding:5px 9px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.search:focus{background:#fff}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.seg button{border:0;background:none;padding:5px 10px;cursor:pointer;color:var(--muted);white-space:nowrap}
.seg button.on{background:var(--ink);color:#fff}
.sortbox{display:inline-flex;align-items:center;gap:4px}
.sortbox select{padding:5px 6px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);max-width:210px}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:5px 10px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--faint)}
.btn.icon{padding:5px 8px}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.danger:hover{border-color:var(--losscol);color:var(--losscol)}
.menus{display:flex;gap:4px}
.menus .btn[aria-expanded="true"]{background:var(--walnut-soft);border-color:var(--walnut)}
.top .meta{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.status{flex:none;padding:4px 14px;font-size:12px;color:var(--muted);background:var(--panel);border-bottom:1px solid var(--line);
  min-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status b{color:var(--ink);font-weight:650}

/* ---------- popovers (menus, notes, column menu) ---------- */
.pop{position:fixed;z-index:300;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 10px 30px rgba(29,36,51,.16);padding:12px;display:none;max-height:calc(100vh - 80px);overflow:auto}
.pop.open{display:block}
.pop h4{margin:0 0 8px;font-size:13px;font-weight:700}
.pop .sec{border-top:1px solid var(--line2);margin-top:10px;padding-top:10px}
.pop .sec:first-child{border-top:0;margin-top:0;padding-top:0}
.pop .hint{color:var(--muted);font-size:12px;margin:4px 0 0}
.pop label.chk{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer}
.pop label.chk input{accent-color:var(--walnut)}
.pop .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.pop .row input[type=number],.pop .row input[type=text]{width:64px;padding:4px 6px;border:1px solid var(--line);border-radius:5px}
.pop .row select{padding:4px 6px;border:1px solid var(--line);border-radius:5px;max-width:230px}
.pop .grid2{display:grid;grid-template-columns:auto auto;gap:4px 14px}
.pop .list{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}
.pop .list label{display:flex;gap:8px;align-items:center;padding:3px 2px;cursor:pointer}
.pop .list .qi{margin-left:auto;color:var(--faint);cursor:help;border:1px solid var(--line);border-radius:50%;width:16px;height:16px;
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;flex:none}
.pop .item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 6px;border-radius:5px;cursor:pointer}
.pop .item:hover{background:var(--hover)}
.pop .item .x{color:var(--faint);border:0;background:none;cursor:pointer;padding:0 4px}
.pop .item .x:hover{color:var(--losscol)}
.pop .menuitem{display:block;width:100%;text-align:left;border:0;background:none;padding:6px 8px;border-radius:5px;cursor:pointer}
.pop .menuitem:hover{background:var(--hover)}
.w-view{width:300px}.w-cmp{width:330px}.w-rank{width:280px}.w-rate{width:320px}.w-data{width:280px}

/* ---------- matrix ---------- */
main{flex:1;min-height:0;display:flex;flex-direction:column}
.wrap{flex:1;min-height:0;overflow:auto;background:var(--panel);position:relative}
#tbl{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:11px}
#tbl th,#tbl td{padding:0;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}
#tbl thead th{position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);height:118px;vertical-align:bottom}
#tbl th.corner{left:0;z-index:40;text-align:left;padding:8px 10px;border-right:1px solid var(--line)}
.corner .legend{color:var(--muted);font-size:11px;line-height:1.5;font-weight:400}
.corner .legend b{font-weight:650;color:var(--ink)}
.corner .legend .w{color:var(--wincol)} .corner .legend .l{color:var(--losscol)}
#tbl th.colh{cursor:pointer;font-weight:600;padding-bottom:6px}
#tbl th.colh .rot{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11.5px;white-space:nowrap;display:inline-block;max-height:96px;overflow:hidden;text-overflow:ellipsis}
#tbl th.colh .ix{display:block;color:var(--faint);font-size:9.5px;font-weight:400;margin-top:3px}
#tbl th.colh:hover{background:var(--hover)}
#tbl th.rowh{position:sticky;left:0;z-index:10;background:var(--panel);text-align:left;height:28px;cursor:pointer;user-select:none;
  border-right:1px solid var(--line);font-weight:400}
#tbl tbody tr:hover th.rowh{background:var(--hover)}
.rh{display:flex;align-items:center;height:28px;padding:0 8px 0 4px;gap:8px}
.rh .rk{color:var(--faint);font-size:10.5px;min-width:30px;text-align:right;flex:none;white-space:nowrap}
.rh .rk i{font-style:normal;font-size:9.5px;color:var(--faint)}
.rh .nm{font-weight:600;font-size:12.5px;width:var(--nw,110px);flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh .note{flex:none;width:16px;height:16px;border:0;background:none;cursor:pointer;padding:0;color:var(--line);font-size:12px;line-height:1}
.rh .note.has{color:var(--walnut)}
.rh .note:hover{color:var(--walnut)}
.rh .st{display:flex;gap:10px;align-items:baseline;flex:none;color:var(--ink)}
.rh .st span{display:inline-block;text-align:right}
.st .rec{width:86px;text-align:left!important}.st .g{width:34px;color:var(--muted)}.st .pct{width:40px;font-weight:600}
.st .mt{width:58px}.st .mt .mw{color:var(--wincol)}.st .mt .ml{color:var(--losscol)}.st .mt .md{color:var(--muted)}
.st .mn{width:26px;color:var(--muted)}
#tbl td.c{text-align:center;height:28px;cursor:pointer;white-space:nowrap;letter-spacing:-.2px;font-size:10.5px}
#tbl td.c:hover{outline:2px solid var(--ink);outline-offset:-2px}
#tbl td.c.cg::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--walnut);vertical-align:top;margin-left:2px}
#tbl td.c.ed{font-style:italic}
#tbl td.self{background:repeating-linear-gradient(-45deg,#c9ced8 0 1px,var(--panel) 1px 6px)}
#tbl .dim{opacity:.22}
#tbl tr.hid th.rowh,#tbl tr.hid td,#tbl th.colh.hid{opacity:.4}
#tbl th.sel{background:var(--sel)!important;box-shadow:inset 3px 0 0 var(--walnut)}
#tbl th.colh.sel{box-shadow:inset 0 -3px 0 var(--walnut)}
#tbl th.rowh.drop-before{box-shadow:inset 0 3px 0 var(--walnut)}
#tbl tr.dragging th.rowh{opacity:.5}
/* extra data columns */
#tbl th.xh{background:var(--panel);font-weight:600;padding:0 2px 6px;cursor:pointer}
#tbl th.xh .rot{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;white-space:nowrap;display:inline-block;max-height:92px;overflow:hidden}
#tbl th.xh.on{background:var(--walnut-soft)}
#tbl th.xh .xm{display:block;margin:0 auto 4px;border:0;background:none;color:var(--faint);cursor:pointer;font-size:13px;line-height:1}
#tbl th.xh .xm:hover{color:var(--ink)}
#tbl td.x{position:sticky;z-index:9;background:var(--panel);text-align:center;font-size:11px;padding:0 4px;white-space:nowrap;cursor:pointer}
#tbl td.x.calc{cursor:default;color:var(--muted)}
#tbl td.x.on{background:#fbf7f1}
#tbl .xlast{border-right:1px solid var(--line)!important}

/* ---------- below the matrix ---------- */
.below{flex:none;background:var(--panel);border-top:1px solid var(--line);display:flex;flex-direction:column;max-height:42vh}
.below.collapsed .panel{display:none}
.tabs{display:flex;align-items:center;gap:2px;padding:0 10px;border-bottom:1px solid var(--line2)}
.tabs button{border:0;background:none;padding:8px 10px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--walnut);font-weight:600}
.tabs .grow{flex:1}
.panel{overflow:auto;padding:8px 14px 14px;min-height:0}
.ctl{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-bottom:8px;color:var(--muted);font-size:12px}
.ctl input[type=number]{width:56px;padding:3px 6px;border:1px solid var(--line);border-radius:5px}
.ctl select{padding:3px 6px;border:1px solid var(--line);border-radius:5px;background:var(--panel)}
.ctl .seg button{padding:3px 8px;font-size:12px}
.dt{border-collapse:collapse;width:100%;font-size:12px}
.dt th{position:sticky;top:0;background:var(--panel);text-align:left;font-weight:600;color:var(--muted);padding:5px 10px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
.dt td{padding:5px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.dt tbody tr{cursor:pointer}
.dt tbody tr:hover td{background:var(--hover)}
.dt .num{text-align:right}
.dt .muted{color:var(--muted)}
.dt .vs{color:var(--faint);padding:0 4px}
.dt .lead{font-weight:650}
.tag{display:inline-block;font-size:11px;padding:0 6px;border-radius:9px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.ok{border-color:#b8c8e8;color:var(--wincol)} .tag.df{border-color:#e6b9b5;color:var(--losscol)}
.tag.cl{border-color:#e3cfb6;color:var(--walnut)} .tag.nw{border-color:var(--line)}
.vbtn{border:1px solid var(--line);background:var(--panel);border-radius:5px;padding:1px 8px;cursor:pointer;font-size:11.5px}
.vbtn:hover{border-color:var(--faint)}
.about{max-width:760px;font-size:13px}
.about p{margin:0 0 10px}
.about h4{margin:14px 0 6px;font-size:13px}

/* ---------- selection bar ---------- */
#selbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:250;background:var(--ink);color:#fff;border-radius:10px;
  padding:7px 8px 7px 14px;display:none;align-items:center;gap:6px;box-shadow:0 10px 30px rgba(29,36,51,.3);max-width:calc(100vw - 24px);flex-wrap:wrap}
#selbar.open{display:flex}
#selbar .cnt{margin-right:6px;white-space:nowrap}
#selbar button{border:1px solid rgba(255,255,255,.25);background:none;color:#fff;border-radius:6px;padding:4px 9px;cursor:pointer;white-space:nowrap}
#selbar button:hover{background:rgba(255,255,255,.12)}
#selbar button[hidden]{display:none}

/* ---------- small dialogs ---------- */
#editor{width:236px;z-index:450}
#note{z-index:320}
#editor .who{color:var(--muted);font-size:12px;margin-bottom:8px}
#editor .flds{display:flex;gap:8px}
#editor .fld{flex:1;text-align:center}
#editor .fld label{display:block;font-size:11px;color:var(--muted)}
#editor .fld input{width:100%;font-size:16px;text-align:center;padding:5px 2px;border:1px solid var(--line);border-radius:5px}
#editor .mir{color:var(--muted);font-size:11.5px;margin:8px 0}
#editor .act,#note .act,#blend .act{display:flex;gap:6px;margin-top:10px;justify-content:flex-end}
#note{width:380px}
#note .view{white-space:pre-wrap;max-height:300px;overflow:auto;border:1px solid var(--line2);border-radius:6px;padding:8px 10px;background:var(--bg)}
#note textarea{width:100%;min-height:150px;padding:8px;border:1px solid var(--line);border-radius:6px;resize:vertical}
#blend{width:340px}
#blend .brow{display:flex;gap:8px;align-items:center;padding:3px 0}
#blend .brow input[type=number]{width:60px;margin-left:auto;padding:3px 6px;border:1px solid var(--line);border-radius:5px}

/* ---------- game viewer ---------- */
#gv{position:fixed;inset:0;z-index:400;display:none;background:rgba(29,36,51,.42)}
#gv.open{display:block}
#gv .box{position:absolute;inset:16px;background:var(--panel);border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden}
#gv .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:12px 16px;border-bottom:1px solid var(--line)}
#gv .head h3{margin:0;font-size:19px;font-weight:750;letter-spacing:-.01em}
#gv .head h3 span{color:var(--faint);font-weight:400;font-size:14px;padding:0 6px}
#gv .sum{display:flex;flex-wrap:wrap;gap:2px 14px;color:var(--muted);font-size:12px}
#gv .sum b{color:var(--ink);font-weight:650}
#gv .sum .cgn{color:var(--walnut)}
#gv .head .x{margin-left:auto;display:flex;gap:6px}
#gv .body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto}
#gv .left{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
#gv .filt{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line2);color:var(--muted);font-size:12px}
#gv .filt .seg button{padding:4px 9px;font-size:12px}
#gv .filt input{padding:4px 8px;border:1px solid var(--line);border-radius:6px;width:180px}
#gv .list{flex:1;overflow:auto}
#gvtbl th{cursor:pointer;user-select:none}
#gvtbl td.ev{white-space:normal;min-width:150px;max-width:330px}
#gvtbl td.res{font-weight:700;text-align:center}
#gvtbl td.res.w{color:var(--wincol)} #gvtbl td.res.l{color:var(--losscol)}
#gvtbl tr.on td{background:var(--sel)}
#gv .right{display:flex;flex-direction:column;gap:8px;padding:12px 16px;overflow:auto;width:min(500px,46vw)}
#gv .pl{display:flex;justify-content:space-between;align-items:baseline;font-weight:650;font-size:13px}
#gv .pl span{color:var(--muted);font-weight:400;font-size:12px}
#gv .meta{color:var(--muted);font-size:12px;min-height:18px}
#board{position:relative;width:100%;aspect-ratio:1/1;background:var(--wood) center/cover;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.15);
  display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);user-select:none}
#board .sq{position:relative}
#board .sq.hl{background:rgba(155,199,0,.41)}
#board .pc{position:absolute;inset:0;background:center/100% no-repeat}
#board .co{position:absolute;font-size:10px;font-weight:600;pointer-events:none;color:rgba(80,50,20,.75)}
#board .co.f{right:3px;bottom:1px} #board .co.r{left:3px;top:1px}
#gv .nav{display:flex;gap:6px;justify-content:center;align-items:center}
#gv .nav button{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:6px 12px;cursor:pointer;font-size:14px;line-height:1}
#gv .nav button:hover{border-color:var(--faint)}
#gv .nav .ply{min-width:76px;text-align:center;color:var(--muted);font-size:12px}
#moves{border:1px solid var(--line2);border-radius:6px;padding:6px 8px;max-height:200px;overflow:auto;background:var(--bg);line-height:1.8;min-height:56px}
#moves .mn{color:var(--faint);padding-right:3px}
#moves .mv{cursor:pointer;padding:1px 4px;border-radius:4px;margin-right:2px}
#moves .mv:hover{background:var(--line2)}
#moves .mv.on{background:var(--ink);color:#fff}
#moves .res{font-weight:700;padding-left:4px}
#moves .warn{display:block;color:var(--walnut);font-size:12px;margin-top:4px;line-height:1.4}
#gv .tools{display:flex;gap:6px;flex-wrap:wrap}
#gv .tools .btn{font-size:12px;padding:5px 9px}
#gv .empty{padding:28px;color:var(--muted);text-align:center}
.toast{position:fixed;left:50%;top:64px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:600;
  font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.25);display:none;max-width:90vw}
.toast.open{display:block}

@media (max-width:900px){
  .top{padding:6px 8px;gap:6px}
  .search{width:120px}
  .top .meta{display:none}
  #gv .box{inset:0;border-radius:0}
  #gv .body{display:flex;flex-direction:column;overflow:auto}
  #gv .right{width:auto;order:-1;border-bottom:1px solid var(--line);overflow:visible}
  #gv .left{border-right:0;flex:none}
  #gv .list{overflow:visible}
  #board{max-width:min(100%,62vh);margin:0 auto}
  .below{max-height:55vh}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- rating curve ---------- */
#tbl td.x.whr{cursor:pointer}
#tbl td.x.whr:hover{background:var(--walnut-soft);color:var(--ink)}
.curve{position:fixed;z-index:420;display:none;width:min(720px,calc(100vw - 16px));max-height:calc(100vh - 24px);overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px rgba(29,36,51,.22);padding:12px 14px 10px}
.curve.open{display:block}
.curve .cvhead{display:flex;align-items:baseline;gap:10px}
.curve .cvhead h4{margin:0;font-size:15px;font-weight:700;font-stretch:92%}
.curve .cvhead .sub{color:var(--muted);font-size:12px}
.curve .cvhead .x{margin-left:auto;border:0;background:none;font-size:15px;color:var(--muted);cursor:pointer;padding:2px 6px}
.curve .cvhead .x:hover{color:var(--ink)}
.cvlegend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 2px;font-size:12px;color:var(--muted)}
.cvlegend span{display:inline-flex;align-items:center;gap:6px}
.cvlegend i{display:inline-block;width:14px;height:2px;border-radius:1px}
.cvlegend .band{width:14px;height:8px;border-radius:2px;background:var(--walnut-soft);border:1px solid #e6d3bd}
.cvplot{position:relative}
.cvplot svg{display:block;width:100%;height:auto;overflow:visible}
.cvplot .ax{fill:var(--muted);font-size:11px}
.cvplot .gl{stroke:var(--line2);stroke-width:1}
.cvplot .lab{font-size:11px;font-weight:650;fill:var(--ink);paint-order:stroke;stroke:var(--panel);stroke-width:3px}
.cvplot .xh{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 3}
.cvtip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;border-radius:6px;padding:6px 8px;font-size:12px;line-height:1.4;white-space:nowrap;z-index:2}
.cvtip b{font-weight:650}
.cvtip .sw{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.cvtbl{margin-top:8px;width:100%}
.cvtbl th{font-weight:600;color:var(--muted);font-size:11.5px;text-align:right;white-space:nowrap}
.cvtbl th:first-child,.cvtbl td:first-child{text-align:left}
.cvtbl td{text-align:right;white-space:nowrap}
.cvtbl td .sw{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.cvtbl .sub{color:var(--muted);font-size:11px;margin-left:3px}
.curve .hint{color:var(--muted);font-size:12px;margin:6px 0 0}
.curve .cvbar{display:flex;gap:8px;align-items:center;margin:6px 0 0;flex-wrap:wrap}
.curve .cvbar input{padding:4px 8px;border:1px solid var(--line);border-radius:var(--r);width:190px}
.cvlegend .rm{border:0;background:none;color:var(--faint);cursor:pointer;padding:0 2px;font-size:13px;line-height:1}
.cvlegend .rm:hover{color:var(--losscol)}
#rltbl th[data-k]{cursor:pointer;user-select:none}
#rltbl th.on{color:var(--ink)}
#rltbl tbody tr{cursor:pointer}
#rltbl tbody tr:hover{background:var(--hover)}
#tab-list .ctl input[type=search]{padding:4px 8px;border:1px solid var(--line);border-radius:var(--r);width:200px}
.agecharts{display:flex;flex-wrap:wrap;gap:12px 28px}
.agefig{margin:4px 0 0;flex:1 1 320px;max-width:600px}
.agefig figcaption{font-weight:650;font-size:12.5px;margin-bottom:2px}
.agefig svg{width:100%;height:auto;display:block}
.agefig .ax{fill:var(--muted);font-size:11px}
.agefig .gl{stroke:var(--line2);stroke-width:1}

/* ---------- hosted site: fonts, player page ---------- */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"),url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations"),url(/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

[hidden]{display:none!important}
#tbl th.rowh .nm{cursor:pointer}
#tbl th.rowh .nm:hover{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--faint)}

#pp{position:fixed;inset:0;z-index:350;background:var(--bg);display:flex;flex-direction:column}
#pp[hidden]{display:none}
#pp .ppbox{flex:1;overflow:auto}
#pp .pphead{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 16px;
  background:var(--panel);border-bottom:1px solid var(--line)}
#pp .ppwho{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0}
#pp .pphead h2{margin:0;font-size:24px;font-weight:780;font-stretch:88%;letter-spacing:-.015em;line-height:1.15}
#pp .pplife{color:var(--muted);font-size:13px}
#pp .badge{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:10px;background:var(--walnut-soft);color:var(--walnut);font-size:12px;font-weight:600}
#pp .grow{flex:1}
#pp #ppGo{padding:5px 9px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);width:190px}
#pp .ppbody{max-width:1180px;margin:0 auto;padding:14px 16px 40px}
#pp .ppnote{margin:0 0 12px;color:var(--ink);font-size:13px;max-width:820px}
#pp .ppfacts{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:14px}
#pp .fact{flex:1 1 150px;background:var(--panel);padding:8px 12px;display:flex;flex-direction:column;min-width:0}
#pp .fact .l{color:var(--muted);font-size:11.5px}
#pp .fact b{font-size:20px;font-weight:720;font-stretch:90%;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pp .fact .s{color:var(--muted);font-size:12px}
#pp .ppsec{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:14px;min-width:0}
#pp .ppsec h3{margin:0 0 6px;font-size:15px;font-weight:720}
#pp .ppsec h3 .sub{font-weight:400;color:var(--muted);font-size:12px;margin-left:6px}
#pp .cvbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:6px}
#pp .cvbar input[list]{padding:4px 8px;border:1px solid var(--line);border-radius:6px;width:180px}
#pp .cvplot{position:relative}
#pp .cvplot svg{width:100%;height:auto;display:block}
#pp .ppcols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px;align-items:start}
#pp .ppcols .ppsec{margin-bottom:0}
#pp .pplist{max-height:520px;overflow:auto}
#pp .dt td.rec.w{color:var(--wincol)}
#pp .dt td.rec.l{color:var(--losscol)}
#pp .dt td.res{font-weight:650;text-align:center}
#pp .dt td.res.w{color:var(--wincol)}
#pp .dt td.res.l{color:var(--losscol)}
#pp .dt td.ev{max-width:260px;overflow:hidden;text-overflow:ellipsis}
#pp .dt th[data-hk],#pp .dt th[data-ck]{cursor:pointer}
#pp .dt th.on{color:var(--ink)}
#pp .pcol{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid #6b7385;vertical-align:-1px}
#pp .pcol.b{background:#2b2f38;border-color:#2b2f38}
#pp #ppMore{margin-top:8px}
#pp #ppGamesSec .ctl input{padding:4px 8px;border:1px solid var(--line);border-radius:6px;width:240px}
#pp .cmfacts{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:8px;font-size:12.5px;color:var(--muted)}
#pp .cmfacts b{color:var(--ink)}
#pp .cmfacts i{font-style:normal;color:var(--faint)}
#tab-cm .dt tr.link td{cursor:pointer}
#tab-cm select{padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
body.pp-open #selbar{display:none}
@media (max-width:820px){
  #pp .ppcols{grid-template-columns:minmax(0,1fr)}
  #pp .pphead h2{font-size:20px}
  #pp #ppGo{width:140px}
  #pp .ppbody{padding:10px 10px 30px}
  #pp .fact b{font-size:17px}
}

/* ---------- layout 2: one top bar with pages, controls in the table's corner ---------- */
.top{flex-wrap:nowrap;gap:10px;padding:6px 12px;min-height:44px}
.brand{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;font-size:15px}
.brand svg{width:22px;height:22px;flex:none}
.views{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.views::-webkit-scrollbar{display:none}
.views a{padding:6px 10px;border-radius:6px;color:var(--muted);text-decoration:none;white-space:nowrap;font-weight:500}
.views a:hover{background:var(--hover);color:var(--ink)}
.views a.on{background:var(--ink);color:#fff}
.top .grow{flex:1}
.top .search{width:180px}
.info{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:4px;padding:0;border-radius:50%;
  border:1px solid var(--faint);background:none;color:var(--muted);font:600 9.5px/1 var(--font);font-style:italic;cursor:pointer;vertical-align:1px;flex:none}
.info:hover,.info:focus-visible{border-color:var(--walnut);color:var(--walnut)}
.infopop{position:fixed;z-index:700;background:var(--ink);color:#fff;border-radius:8px;padding:10px 12px;font-size:12.5px;line-height:1.5;
  box-shadow:0 10px 30px rgba(0,0,0,.25)}
.status{position:fixed;left:14px;bottom:14px;z-index:240;max-width:min(560px,calc(100vw - 28px));padding:8px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);box-shadow:0 6px 24px rgba(0,0,0,.12);white-space:normal;min-height:0;display:none}
.status.open{display:block}
main{position:relative}
.view{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--panel)}
.view[hidden]{display:none!important}
#tab-list,#tab-mu,#tab-dom,#tab-age,#tab-cm,#tab-about{overflow:auto;padding:14px 18px 40px}
.vhead h2{margin:0 0 4px;font-size:20px;font-weight:760;font-stretch:90%;letter-spacing:-.01em}
.vhead h2 .sub{font-size:12px;font-weight:400;color:var(--muted);margin-left:8px;font-stretch:100%;letter-spacing:0}
.vhead .lead{margin:0 0 12px;color:var(--muted);max-width:900px}
.vbody{min-width:0}
.dt th.on{color:var(--ink)}
.dt th[data-k],.dt th[data-dk]{cursor:pointer}
.tag.w{border-color:#e7b7cf;color:#a2477a;font-size:10px;padding:0 5px}
/* the table's corner: sort, menus and toggles sit over the empty corner cell */
.wrap{--hh:108px}
#tbl thead th{height:var(--hh)}
.cornerbox{position:sticky;top:0;left:0;z-index:45;width:var(--hw,420px);height:calc(var(--hh) - 26px);margin-bottom:calc(26px - var(--hh));
  display:flex;flex-direction:column;gap:5px;padding:7px 8px 0 8px;background:var(--panel);box-sizing:border-box}
.cornerbox .sortbox{display:flex;align-items:center;gap:4px;min-width:0}
.cornerbox .sortbox label{color:var(--muted);font-size:12px}
.cornerbox .sortbox select{flex:1;min-width:0;max-width:none;padding:3px 6px}
.cornerbox .btn{padding:3px 8px;font-size:12px}
.cornerbox .menus{gap:3px;flex-wrap:wrap}
.cmeta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11.5px;white-space:nowrap;min-width:0}
.cmeta #meta2::before{content:"·";margin-right:8px}
.cmeta .tgls{margin-left:auto;display:flex;align-items:center;gap:4px}
.tgl{border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:10px;padding:0 8px;font-size:11px;line-height:18px;cursor:pointer}
.tgl.on{background:var(--walnut-soft);border-color:#dcc6ad;color:var(--walnut)}
.tgl::before{content:"▸ ";font-size:9px}.tgl.on::before{content:"▾ "}
#tbl th.corner{padding:0;vertical-align:bottom}
/* row header: fixed columns, the corner labels share them */
.rh{display:grid;grid-template-columns:30px var(--nw,110px) 16px auto;column-gap:8px;align-items:center;height:28px;padding:0 8px 0 4px}
.rh .nm,.rh .rk{width:auto;min-width:0}
.rh .st{display:grid;grid-template-columns:86px 36px 40px 58px 28px;column-gap:8px;align-items:baseline}
.rh .st.min{grid-template-columns:44px}
.rh .st span{text-align:right;width:auto!important;white-space:nowrap}
.rh .st .rec{text-align:left!important}
.rh .st .mt{text-align:center}
.rh.hd{height:24px;border-top:1px solid var(--line2);color:var(--muted);font-size:10.5px;font-weight:600}
.rh.hd .nm{font-size:10.5px;font-weight:600}
.rh.hd [data-sk]{cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-end}
.rh.hd .rec[data-sk]{justify-content:flex-start}.rh.hd .mt[data-sk]{justify-content:center}
.rh.hd [data-sk]:hover{color:var(--ink)}
.rh.hd .info{width:13px;height:13px;font-size:8.5px;margin-left:3px}
#tbl td.c.flash{animation:flash .5s ease-out}
@keyframes flash{0%{background:#e7e9ee}100%{background:transparent}}
/* dominance page */
.domtop{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,2fr);gap:18px;align-items:start;margin-bottom:12px}
.domfig{margin:0}.domfig figcaption{font-weight:650;font-size:13px;margin-bottom:4px}
.domfig svg{width:100%;height:auto;display:block}
.dommeta h4{margin:0 0 4px;font-size:13px}.dommeta ul{margin:0;padding-left:18px;color:var(--muted);font-size:12px;line-height:1.55}
/* chessmetrics pages */
.subnav{display:flex;gap:4px;margin:4px 0 12px}
.subnav a{padding:4px 10px;border:1px solid var(--line);border-radius:14px;color:var(--muted);text-decoration:none;font-size:12.5px}
.subnav a.on,.subnav a:hover{border-color:var(--walnut);color:var(--walnut)}
.seg a.segbtn{display:inline-block;padding:3px 9px;color:var(--muted);text-decoration:none;font-size:12px}
.seg a.segbtn.on{background:var(--ink);color:#fff}
.cmplayer h3{margin:0 0 6px;font-size:18px}.cmplayer h3 .sub{font-size:12.5px;font-weight:400;color:var(--muted);margin-left:6px}
.cmplayer .cmfacts,#pp .cmfacts{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:8px;font-size:12.5px;color:var(--muted)}
.cmfacts b{color:var(--ink)}.cmfacts i{font-style:normal;color:var(--faint)}
.cmfig{margin:0 0 12px}.cmfig figcaption{font-size:12.5px;font-weight:650}.cmfig svg{width:100%;height:auto;display:block}
.cmplayer .ppcols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:14px}
.cmplayer .ppsec{border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.cmplayer .ppsec h3{font-size:14px}.cmplayer .pplist{max-height:560px;overflow:auto}
#pp .pplinks a{color:var(--walnut)}
#pp .fact .l{display:flex;align-items:center}
@media (max-width:900px){
  .top{flex-wrap:wrap}.views{order:3;width:100%}.top .grow{display:none}.top .search{flex:1;min-width:120px}
  .domtop,.cmplayer .ppcols{grid-template-columns:minmax(0,1fr)}
}
#domtbl,#rltbl,#mutbl,#cmList,#cmPeaks,#cmPl,#cmEv{width:auto;min-width:min(100%,760px)}
#domtbl td,#domtbl th{padding-left:14px;padding-right:14px}
.rh{grid-template-columns:var(--rkw,30px) var(--nw,110px) 16px auto}
@media (max-width:700px){
  .wrap{--hh:150px}
  .cornerbox{gap:4px;padding:6px 6px 0}
  .cornerbox .menus .btn{padding:2px 6px;font-size:11.5px}
  .cmeta{flex-wrap:wrap;white-space:normal}
  .top{padding:6px 8px;gap:6px}
}

/* ---------- layout 3: four pages, table controls in three labelled menus ---------- */
.views a{font-weight:560;padding:6px 12px}
.info{border:0;width:14px;height:14px;color:var(--faint);font-size:0;margin-left:3px;position:relative}
.info::before{content:"i";font:italic 600 10px/14px Georgia,serif;width:14px;height:14px;border-radius:50%;border:1px solid currentColor;display:block;box-sizing:border-box;line-height:12px;text-align:center}
.info:hover,.info:focus-visible{color:var(--walnut)}
.cornerbox{height:calc(var(--hh) - 25px);margin-bottom:calc(25px - var(--hh));padding:8px 8px 0;gap:7px;justify-content:flex-start}
.cornerbox .menus{display:flex;gap:5px;flex-wrap:nowrap}
.mbtn{display:inline-flex;align-items:center;gap:6px;padding:4px 9px!important;font-size:12.5px!important;border-radius:7px}
.mbtn .k{color:var(--ink);font-weight:600}
.mbtn b{font-weight:500;color:var(--muted);font-size:11.5px}
.mbtn::after{content:"▾";font-size:9px;color:var(--faint);margin-left:1px}
.mbtn.icon::after{content:none}
.mbtn.act{border-color:var(--walnut);background:var(--walnut-soft)}
.mbtn.act b{color:var(--walnut)}
.cornerbox .sortbox label{font-size:12px;color:var(--muted);white-space:nowrap}
.cornerbox .sortbox select{padding:4px 6px;font-size:12.5px}
.rh.hd{height:25px;background:var(--bg);border-top:1px solid var(--line)}
.rh.hd .info{margin-left:5px}
.pop h4{display:flex;align-items:center}
.w-players{width:430px}.w-cols{width:680px;max-width:calc(100vw - 16px);max-height:calc(100vh - 90px);overflow:auto}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 10px}
.chips button{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:3px 11px;cursor:pointer;color:var(--ink);font-size:12.5px}
.chips button:hover{border-color:var(--faint)}
.chips button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.w-players h4{margin:10px 0 5px}.w-players h4:first-child{margin-top:0}
.w-players .row{display:flex;align-items:center;gap:6px;margin:5px 0;flex-wrap:wrap;color:var(--muted)}
.w-players input[type=number]{width:70px;padding:3px 6px;border:1px solid var(--line);border-radius:5px}
.w-players select{padding:3px 6px;border:1px solid var(--line);border-radius:5px;background:var(--panel)}
.w-players .chk{display:flex;align-items:center;gap:6px;margin:5px 0}
.w-players .foot,.w-cols .foot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line2)}
.pop .grow{flex:1}
.colhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid var(--line2)}
.colhead h4{margin:0 8px 0 0}
.colhead .sw{display:flex;align-items:center;gap:6px;font-weight:600}
.colhead .sw .muted{font-weight:400;color:var(--muted);font-size:12px}
.colgrid{columns:3 190px;column-gap:20px}
.colgrid section{break-inside:avoid;margin-bottom:12px}
.colgrid h5{margin:0 0 4px;font-size:12px;font-weight:700;color:var(--ink)}
.colgrid h5 span{display:block;font-weight:400;color:var(--muted);font-size:11px;line-height:1.3;margin-top:1px}
.ci{display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer;font-size:12.5px}
.ci span{flex:0 1 auto}
.cset{margin:0 0 4px 21px;font-size:11.5px;color:var(--muted)}
.cset select{padding:1px 4px;border:1px solid var(--line);border-radius:4px;background:var(--panel);font-size:11.5px;max-width:150px}
.btn.sm{padding:3px 9px;font-size:12px}
.w-cols .hint{margin:0}
/* inner pages */
#tab-list,#tab-mu,#tab-dom,#tab-cm,#tab-about{padding:18px 22px 48px;background:var(--bg)}
.vhead{max-width:1240px}
.vhead h2{font-size:22px;margin-bottom:8px}
.subnav{display:flex;flex-wrap:wrap;gap:0;margin:0 0 12px;border-bottom:1px solid var(--line)}
.subnav a{padding:7px 14px;border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:560}
.subnav a:hover{color:var(--ink);border-color:var(--line)}
.subnav a.on{color:var(--ink);border-bottom-color:var(--walnut)}
.vhead .lead{font-size:13px;margin:0 0 12px}
.ctl input[type=search]{padding:5px 9px;border:1px solid var(--line);border-radius:6px;background:var(--panel);width:240px}
.vbody{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:auto;max-width:1240px}
.vbody .dt{width:100%;min-width:0}
.vbody .dt th{background:#fafbfc;padding:7px 12px}.vbody .dt td{padding:6px 12px}
.vbody .dt th .info{vertical-align:-2px}
.vbody > .btn{margin:10px 12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0 0 14px;max-width:1240px;min-width:0}
.card h3{margin:0 0 8px;font-size:14.5px;font-weight:700}.card h3 a{color:inherit}
.card h3 .sub,.cmplayer h3 .sub{font-weight:400;color:var(--muted);font-size:12px;margin-left:6px}
.card p{margin:8px 0 0;font-size:12.5px}
.card a,.prose a,.cmhits a,.cmgate a:not(.btn),.cmplayer .hint a{color:var(--walnut)}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1240px}
.cards3 .card{margin:0}
.reigns{width:100%;height:auto;display:block}
.cmhits{display:flex;flex-wrap:wrap;gap:4px 14px}
.cmgate{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px 20px;max-width:640px}
.cmgate p{margin:0 0 12px}.cmgate .btn{display:inline-block;text-decoration:none;padding:7px 14px}
.cmplayer{max-width:1240px}
.cmplayer > h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:20px;font-weight:760;font-stretch:90%}
.cmplayer > h3 .btn{font-size:12px;font-weight:500;font-stretch:100%;text-decoration:none;color:var(--ink)}
.cmplayer .ppcols{grid-template-columns:minmax(0,2fr) minmax(0,5fr);margin-bottom:14px}
.cmplayer .ppcols .card{margin:0}
.cmplayer .pplist{max-height:520px;overflow:auto}.cmplayer .pplist.wide{max-height:none;overflow-x:auto}
details.card summary{cursor:pointer;font-weight:700;font-size:14px}
.mgrid td{white-space:nowrap}.mgrid small{display:block;color:var(--faint);font-size:9.5px;line-height:1}
#cmPlot svg{width:100%;height:auto;display:block}
.prose{max-width:820px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 22px 18px;font-size:13.5px;line-height:1.6}
.prose h4{margin:18px 0 6px;font-size:14.5px}.prose p{margin:0 0 10px}
.prose .agecharts{display:flex;flex-wrap:wrap;gap:12px}.prose .agefig{margin:0;flex:1 1 300px}
.domtop{max-width:1240px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
@media (max-width:900px){.cards3{grid-template-columns:minmax(0,1fr)}.colgrid{columns:2 150px}.w-players{width:calc(100vw - 16px)}
  .cmplayer .ppcols{grid-template-columns:minmax(0,1fr)}#tab-list,#tab-mu,#tab-dom,#tab-cm,#tab-about{padding:12px 10px 40px}}
@media (max-width:700px){.cornerbox .menus{flex-wrap:wrap}.mbtn b{display:none}}

/* layout 3b: cards fit their table, quiet links, switches only where they apply */
.vbody{width:fit-content;max-width:min(1240px,100%)}
.vbody > p,.vbody > .hint{margin:0;padding:10px 12px 8px;font-size:12.5px;color:var(--muted)}
.dt a,.cvlegend a,.cmhits a{color:inherit;text-decoration:none}
.dt a:hover,.cvlegend a:hover,.cmhits a:hover{text-decoration:underline;color:var(--walnut)}
.dt th[data-es],.dt th[data-k]{cursor:pointer}
.dt th.on{color:var(--ink)}.dt th[data-es]:not([data-es=date]).on::after{content:" ↓";color:var(--walnut)}
.prose{padding-top:16px}.prose > p:first-child{margin-top:0}
body[data-view=cm] #scopeSeg,body[data-view=cm] #absSeg,body[data-view=about] #scopeSeg,body[data-view=about] #absSeg{display:none}
.reigns{height:30px}
.reignax{position:relative;height:18px;font-size:11.5px;color:var(--muted)}
.reignax span{position:absolute;top:2px;transform:translateX(-50%)}
@media (max-width:700px){.reignax .minor{display:none}}

/* ---------- layout 4: phone ---------- */
@media (max-width:700px){
  /* top bar: the pages in the first row, search and the two switches in the second */
  .top{flex-wrap:wrap;gap:6px;padding:6px 8px;min-height:0}
  .brand{font-size:0;gap:0}.brand svg{width:26px;height:26px}
  .top .views{order:1;width:auto;flex:1 1 auto;flex-wrap:nowrap;gap:0;overflow-x:auto;scrollbar-width:none}
  .top .views a{padding:5px 8px;font-size:13.5px;white-space:nowrap}
  .top > .info{order:2}
  .top .search{order:3;flex:1 1 80px;min-width:80px;width:auto}
  #scopeSeg{order:4}#absSeg{order:5}
  .top .seg button{padding:4px 7px;font-size:11.5px}
  /* inner pages */
  #tab-list,#tab-mu,#tab-dom,#tab-cm,#tab-about{padding:10px 8px 40px}
  .vhead h2{font-size:20px;margin-bottom:4px}
  .vhead .lead,.lead{font-size:12.5px}
  .subnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.subnav a{padding:6px 10px;white-space:nowrap;font-size:13px}
  .ctl{gap:6px}.ctl input[type=search]{width:100%;flex:1 1 160px}
  .seg{flex-wrap:wrap}
  /* wide tables scroll sideways inside their card; the name column stays put */
  .vbody .dt th,.vbody .dt td{padding:5px 8px}
  #rltbl :is(th,td):nth-child(3){display:none}
  :is(#rltbl,#domtbl,#mutbl,#cmList,#cmPeaks,#cmPl,#cmEv,#cmEvIdx,#cmEvList) :is(th,td):nth-child(2){position:sticky;left:0;background:var(--panel);box-shadow:inset -1px 0 0 var(--line2)}
  :is(#rltbl,#domtbl,#mutbl,#cmList,#cmPeaks,#cmPl,#cmEv,#cmEvIdx,#cmEvList) td:nth-child(2){z-index:1}
  :is(#rltbl,#domtbl,#mutbl,#cmList,#cmPeaks,#cmPl,#cmEv,#cmEvIdx,#cmEvList) th:nth-child(2){z-index:3;background:#fafbfc}
  :is(#cmEvIdx,#cmEvList) td:nth-child(2){white-space:normal;min-width:150px;max-width:180px}
  .cmplayer > h3{font-size:18px}
  .card{padding:10px 10px}
  .prose{padding:12px 14px 14px}
  /* player page: back button and player search in one row, the name below */
  #pp .pphead{padding:8px 10px;gap:6px 8px}
  #pp .pphead .grow{display:none}
  #pp #ppGo{order:2;flex:1;width:auto;min-width:0}
  #pp .ppwho{order:3;width:100%}
  #pp .pphead h2{font-size:19px}
}
@media (max-width:700px){.top .search{padding:5px 7px;font-size:13px}}
details.dommeta summary{list-style:none;cursor:pointer}details.dommeta summary::-webkit-details-marker{display:none}
details.dommeta summary h4{display:inline-flex;align-items:center;gap:6px}
details.dommeta:not([open]) summary h4::after{content:"▸";font-size:10px;color:var(--faint)}
details.dommeta[open] summary h4::after{content:"▾";font-size:10px;color:var(--faint)}
@media (max-width:700px){
  /* the row names take ~190px so that the matrix gets the rest of the screen */
  .rh{grid-template-columns:var(--rkw,22px) var(--nw,92px) 12px auto;column-gap:6px;padding:0 6px 0 4px}
  .rh .st.min{grid-template-columns:38px}
  .rh .note{width:12px}
  .rh .rk{min-width:0}
  .cornerbox{padding:6px 4px 0}
  .cornerbox .sortbox{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;width:100%}
  .cornerbox .sortbox select{flex:1;min-width:0;width:auto}
}
#tbl.nofreeze td.x{position:static}
#tbl.nofreeze th.xh{left:auto!important}

:root{--wood:url(/img/wood4.jpg)}
#board .pc.wK{background-image:url(/img/p/wK.svg)}
#board .pc.wQ{background-image:url(/img/p/wQ.svg)}
#board .pc.wR{background-image:url(/img/p/wR.svg)}
#board .pc.wB{background-image:url(/img/p/wB.svg)}
#board .pc.wN{background-image:url(/img/p/wN.svg)}
#board .pc.wP{background-image:url(/img/p/wP.svg)}
#board .pc.bK{background-image:url(/img/p/bK.svg)}
#board .pc.bQ{background-image:url(/img/p/bQ.svg)}
#board .pc.bR{background-image:url(/img/p/bR.svg)}
#board .pc.bB{background-image:url(/img/p/bB.svg)}
#board .pc.bN{background-image:url(/img/p/bN.svg)}
#board .pc.bP{background-image:url(/img/p/bP.svg)}