/* Bot piece styles (skins): the layered piece on the board (replacement and overlay as <img>, stacked in one grid cell)
   and the "Piece styles" gallery (#styles). */
.piece.skin > *{grid-area:1/1}
.piece > img.pl{width:92%;height:92%;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.piece > img.pl.ov{z-index:1}

.stfilter{display:inline-flex;gap:8px;align-items:center;font-size:12px;background:var(--panel2);border-radius:99px;padding:3px 4px 3px 12px}
.stbot header .av{width:22px;height:22px;display:inline-grid;place-items:center;align-self:center}
/* the skin preview in the leaderboard info card */
.stprev{display:flex}
.stprev .stsq{width:34px;height:34px;--sq:34px}
.sthead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.sthead h2{margin:0;font-size:18px}
.sthead .spacer{flex:1}
.sthead .seg{min-width:150px}
.sthead .seg button{padding:4px 8px}
.stlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--st,44px) * 11 + 80px)),1fr));gap:14px;margin-top:12px}
.stbot{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0}
.stbot header{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.stbot header .av{font-size:16px}
.stbot .stnote{flex-basis:100%;color:var(--text);font-size:12px}
.stbot .stnote i{color:var(--muted)}
.stbot .stfiles{flex-basis:100%;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.stgrid{display:grid;justify-content:start;grid-template-columns:auto repeat(var(--cols,11),var(--st,44px));grid-auto-rows:var(--st,44px);align-items:center;overflow-x:auto;padding-bottom:2px}
.stlbl{font-size:11px;font-weight:700;color:var(--muted);padding-right:8px;white-space:nowrap}
.stsq{position:relative;width:var(--st,44px);height:var(--st,44px);background:var(--light-sq);--sq:var(--st,44px)}
.stsq.d{background:var(--dark-sq)}
.stsq .piece{cursor:default}
.stplainbox{margin-top:18px;font-size:12px}
.stplain{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.stplain span{background:var(--panel2);border-radius:4px;padding:2px 7px}
@media (max-width:600px){.stlist{grid-template-columns:1fr}}