body{--skin-sheet: url(assets/skins/royal.png);--skin-cell-ratio: .5}body[data-piece-skin=royal]{--skin-sheet: url(assets/skins/royal.png)}body[data-piece-skin=crystal]{--skin-sheet: url(assets/skins/crystal.png)}body[data-piece-skin=sentinel]{--skin-sheet: url(assets/skins/sentinel.png)}body.skin-ready .piece.skin-piece[data-piece][data-color]{display:inline-block;width:1em;height:1em;flex:0 0 auto;color:transparent;-webkit-text-stroke:0;text-shadow:none;vertical-align:middle}body.skin-ready #board .piece.skin-piece{font-size:10.8cqw}body.skin-ready .piece.skin-piece[data-piece][data-color]:before,.skin-card.skin-preview-ready .skin-preview:before{content:"";position:absolute;top:0;left:50%;width:calc(1em * var(--skin-cell-ratio, .5));height:1em;background-image:var(--skin-sheet);background-repeat:no-repeat;background-size:600% 200%;background-position:var(--piece-x, 80%) var(--piece-y, 0%);transform:translate(calc(-50% + var(--piece-shift-x, 0em)));filter:drop-shadow(0 2px 1px #00000033);pointer-events:none}.skin-piece[data-piece=k][data-color=w],.skin-preview[data-piece=k][data-color=w]{--piece-shift-x: var(--skin-shift-w-k, 0em)}.skin-piece[data-piece=q][data-color=w],.skin-preview[data-piece=q][data-color=w]{--piece-shift-x: var(--skin-shift-w-q, 0em)}.skin-piece[data-piece=r][data-color=w],.skin-preview[data-piece=r][data-color=w]{--piece-shift-x: var(--skin-shift-w-r, 0em)}.skin-piece[data-piece=b][data-color=w],.skin-preview[data-piece=b][data-color=w]{--piece-shift-x: var(--skin-shift-w-b, 0em)}.skin-piece[data-piece=n][data-color=w],.skin-preview[data-piece=n][data-color=w]{--piece-shift-x: var(--skin-shift-w-n, 0em)}.skin-piece[data-piece=p][data-color=w],.skin-preview[data-piece=p][data-color=w]{--piece-shift-x: var(--skin-shift-w-p, 0em)}.skin-piece[data-piece=k][data-color=b],.skin-preview[data-piece=k][data-color=b]{--piece-shift-x: var(--skin-shift-b-k, 0em)}.skin-piece[data-piece=q][data-color=b],.skin-preview[data-piece=q][data-color=b]{--piece-shift-x: var(--skin-shift-b-q, 0em)}.skin-piece[data-piece=r][data-color=b],.skin-preview[data-piece=r][data-color=b]{--piece-shift-x: var(--skin-shift-b-r, 0em)}.skin-piece[data-piece=b][data-color=b],.skin-preview[data-piece=b][data-color=b]{--piece-shift-x: var(--skin-shift-b-b, 0em)}.skin-piece[data-piece=n][data-color=b],.skin-preview[data-piece=n][data-color=b]{--piece-shift-x: var(--skin-shift-b-n, 0em)}.skin-piece[data-piece=p][data-color=b],.skin-preview[data-piece=p][data-color=b]{--piece-shift-x: var(--skin-shift-b-p, 0em)}body.skin-ready .drag-ghost.skin-piece:before{filter:drop-shadow(0 8px 6px #00000055)}body.skin-ready .promo-btn .piece.skin-piece{font-size:52px}#captured-w,#captured-b{display:flex;align-items:center;flex-wrap:wrap;gap:1px}.piece.captured-piece{display:inline-block;width:1em;height:1em;font-size:27px;line-height:1;cursor:default}body.skin-ready .piece.captured-piece{font-size:30px}.skin-panel{overflow:hidden;padding:0;border-color:#5a5c4b;background:linear-gradient(160deg,#2a302b,var(--panel) 55%)}.skin-cover{position:relative;min-height:80px;overflow:hidden;background:#19221f;border-bottom:1px solid #bca77c38}.skin-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#11171510,#11171538 35%,#111715ee);pointer-events:none}.skin-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%}.skin-panel-heading{position:absolute;z-index:1;right:16px;bottom:12px;left:16px;display:flex;align-items:center;justify-content:space-between;gap:8px}.skin-panel .skin-panel-heading h2{margin:0;color:#fff9ec;font-size:14px;font-weight:650;letter-spacing:.2px}.skin-count{flex:0 0 auto;padding:3px 7px;border:1px solid #dfc3976b;border-radius:5px;background:#141819b3;color:#f2d6a8;font-size:9px;font-weight:700;line-height:1.3;letter-spacing:1px}.skin-panel-content{padding:13px 14px 14px}.skin-intro{margin-bottom:11px;color:var(--muted);font-size:11px;line-height:1.5}.skin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.skin-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;min-height:106px;padding:7px 4px 9px;overflow:visible;border:1px solid #738180;border-radius:10px;background:radial-gradient(ellipse at 50% 26%,#685d3d55,transparent 70%),#191f1e;color:var(--muted);text-align:center}.skin-card[data-skin=crystal]{background:radial-gradient(ellipse at 50% 26%,#497b8b55,transparent 70%),#191f23}.skin-card[data-skin=sentinel]{background:radial-gradient(ellipse at 50% 26%,#83704455,transparent 70%),#20211e}.skin-card.is-selected,.skin-card[aria-pressed=true]{border-color:var(--accent);color:var(--text);box-shadow:inset 0 -3px var(--accent)}.skin-card.is-selected:after,.skin-card[aria-pressed=true]:after{content:"";position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #dfc39722}.skin-preview{position:relative;display:block;width:1em;height:1em;flex:0 0 auto;margin-bottom:5px;color:#f6eddc;font-family:Segoe UI Symbol,"Noto Sans Symbols 2",DejaVu Sans,sans-serif;font-size:58px;font-weight:400;line-height:1;-webkit-text-stroke:.7px #3e443c}.skin-card.skin-preview-ready .skin-preview{color:transparent;-webkit-text-stroke:0;text-shadow:none}.skin-card-name{display:block;max-width:100%;min-height:2.8em;font-size:10px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.skin-current{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:18px;margin-top:11px;color:var(--muted);font-size:10px}.skin-current-dot{width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:var(--accent2)}.skin-current strong{margin-left:auto;color:var(--accent);font-size:11px;font-weight:600}.skin-note{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.5}.skin-load-status{margin-top:8px;color:var(--accent);font-size:11px;line-height:1.5}.skin-load-status:empty,body.skin-ready .skin-load-status{display:none}@media(hover:hover)and (pointer:fine){.skin-card:hover:not(:disabled){border-color:var(--accent);background-color:#313a32}.skin-card:hover .skin-preview{transform:translateY(-2px)}.skin-preview{transition:transform .16s var(--ease)}}@media(max-width:1000px)and (min-width:761px){.skin-panel{padding:0}.skin-panel-content{padding-inline:11px}.skin-grid{gap:6px}.skin-card-name{font-size:9px}}@media(max-width:760px){.skin-panel{padding:0}.skin-panel-content{padding:14px}.skin-cover{min-height:88px}.skin-grid{gap:8px}.skin-card{min-height:116px;padding-top:8px}.skin-preview{font-size:64px}.skin-card-name,.skin-intro,.skin-current,.skin-note{font-size:11px}.skin-current strong{font-size:12px}}@media(max-width:360px){.skin-panel-content{padding-inline:10px}.skin-grid{gap:6px}.skin-preview{font-size:58px}.skin-card-name{font-size:10px}body.skin-ready .promo-btn .piece.skin-piece{font-size:44px}}@media(prefers-reduced-motion:reduce){.skin-preview{transition:none}.skin-card:hover .skin-preview{transform:none}}