/**
 * Styl pionków — klient lokalny (body.checker-view--*).
 * Ramka (.checker) i środek (::before / --leather-*) niezależnie.
 */

/* ── Ramka (obwódka) ── */
body.checker-view--rim-none .checker {
  --checker-rim-px: 0px;
  background: transparent;
  box-shadow:
    0 2px 6px var(--shadow-20),
    0 4px 10px var(--shadow-12);
}

body.checker-view--rim-none .off-board .checker--borne-off {
  border: none;
}

body.checker-view--rim-brass .checker {
  background: linear-gradient(155deg, #f8e8a8 0%, #d4aa38 38%, #8a6210 56%, #c89828 100%);
  box-shadow: 0 0 0 0.5px #6a4a08, 0 2px 6px var(--shadow-22), 0 4px 10px var(--shadow-14);
}

body.checker-view--rim-obsidian .checker {
  background: linear-gradient(155deg, #b0b8c0 0%, #5a626a 40%, #2a3038 58%, #4a525a 100%);
  box-shadow: 0 0 0 0.5px #1a2028, 0 2px 5px var(--shadow-25), 0 4px 9px var(--shadow-15);
}

body.checker-view--rim-copper .checker {
  background: linear-gradient(155deg, #f0d0c8 0%, #b87868 40%, #703828 58%, #a86858 100%);
  box-shadow: 0 0 0 0.5px #502818, 0 2px 6px var(--shadow-22), 0 4px 10px var(--shadow-14);
}

/* ── Środek: orzech ── */
body.checker-view--face-walnut .checker--black {
  --leather-base: #2a2018;
  --leather-mid: #3a3028;
  --leather-deep: #141008;
  --leather-highlight: #504840;
}

body.checker-view--face-walnut .checker--red {
  --leather-base: #6a4830;
  --leather-mid: #7a5838;
  --leather-deep: #4a3018;
  --leather-highlight: #987050;
}

body.checker-view--face-walnut .off-board .checker--borne-off.checker--black {
  background: linear-gradient(180deg, #3a3028 0%, #2a2018 45%, #141008 100%);
}

body.checker-view--face-walnut .off-board .checker--borne-off.checker--red {
  background: linear-gradient(180deg, #7a5838 0%, #6a4830 45%, #4a3018 100%);
}

/* ── Środek: noc ── */
body.checker-view--face-midnight .checker::before {
  background-blend-mode: multiply, normal, normal, normal;
  filter: saturate(0.78) brightness(0.92);
}

body.checker-view--face-midnight .checker--black {
  --leather-base: #0a0a0c;
  --leather-mid: #161618;
  --leather-deep: #040406;
  --leather-highlight: #2e2e32;
}

body.checker-view--face-midnight .checker--red {
  --leather-base: #301c18;
  --leather-mid: #402820;
  --leather-deep: #180e0c;
  --leather-highlight: #503830;
}

body.checker-view--face-midnight .off-board .checker--borne-off.checker--black {
  background: linear-gradient(180deg, #161618 0%, #0a0a0c 45%, #040406 100%);
}

body.checker-view--face-midnight .off-board .checker--borne-off.checker--red {
  background: linear-gradient(180deg, #402820 0%, #301c18 45%, #180e0c 100%);
}

/* ── Środek: piasek ── */
body.checker-view--face-sand .checker::before {
  background-blend-mode: overlay, normal, normal, normal;
}

body.checker-view--face-sand .checker--black {
  --leather-base: #4a4438;
  --leather-mid: #5a5448;
  --leather-deep: #322c24;
  --leather-highlight: #6e6860;
}

body.checker-view--face-sand .checker--red {
  --leather-base: #9a7858;
  --leather-mid: #aa8868;
  --leather-deep: #705838;
  --leather-highlight: #c0a080;
}

body.checker-view--face-sand .off-board .checker--borne-off.checker--black {
  background: linear-gradient(180deg, #5a5448 0%, #4a4438 45%, #322c24 100%);
}

body.checker-view--face-sand .off-board .checker--borne-off.checker--red {
  background: linear-gradient(180deg, #aa8868 0%, #9a7858 45%, #705838 100%);
}

/* ── Środek: wino ── */
body.checker-view--face-wine .checker--black {
  --leather-base: #1a1418;
  --leather-mid: #2a2028;
  --leather-deep: #0a080a;
  --leather-highlight: #403038;
}

body.checker-view--face-wine .checker--red {
  --leather-base: #782838;
  --leather-mid: #883040;
  --leather-deep: #501020;
  --leather-highlight: #a84858;
}

body.checker-view--face-wine .off-board .checker--borne-off.checker--black {
  background: linear-gradient(180deg, #2a2028 0%, #1a1418 45%, #0a080a 100%);
}

body.checker-view--face-wine .off-board .checker--borne-off.checker--red {
  background: linear-gradient(180deg, #883040 0%, #782838 45%, #501020 100%);
}

/* ── Środek: węgiel — ciemny grafit vs jaskrawy koral ── */
body.checker-view--face-charcoal .checker--black {
  --leather-base: #121316;
  --leather-mid: #2a2c31;
  --leather-deep: #050506;
  --leather-highlight: #4a4d54;
}

body.checker-view--face-charcoal .checker--red {
  --leather-base: #e53935;
  --leather-mid: #ff5252;
  --leather-deep: #b71c1c;
  --leather-highlight: #ff8a80;
}

body.checker-view--face-charcoal .off-board .checker--borne-off.checker--black {
  background: linear-gradient(180deg, #2a2c31 0%, #121316 45%, #050506 100%);
}

body.checker-view--face-charcoal .off-board .checker--borne-off.checker--red {
  background: linear-gradient(180deg, #ff5252 0%, #e53935 45%, #b71c1c 100%);
}

/* ── Środek: ceramika — matowy szary vs krwisty czerwony ── */
body.checker-view--face-ceramic .checker--black {
  --leather-base: #222428;
  --leather-mid: #3a3d42;
  --leather-deep: #101114;
  --leather-highlight: #6b6f78;
}

body.checker-view--face-ceramic .checker--red {
  --leather-base: #8e0000;
  --leather-mid: #c62828;
  --leather-deep: #5c0000;
  --leather-highlight: #ef5350;
}

body.checker-view--face-ceramic .off-board .checker--borne-off.checker--black {
  background: linear-gradient(180deg, #3a3d42 0%, #222428 45%, #101114 100%);
}

body.checker-view--face-ceramic .off-board .checker--borne-off.checker--red {
  background: linear-gradient(180deg, #c62828 0%, #8e0000 45%, #5c0000 100%);
}

/* ── Środek: płomień — jasny łupkowy vs pomarańcz ── */
body.checker-view--face-slate-flame .checker::before {
  background-blend-mode: overlay, normal, normal, normal;
}

body.checker-view--face-slate-flame .checker--black {
  --leather-base: #4a515c;
  --leather-mid: #7a828e;
  --leather-deep: #2a3038;
  --leather-highlight: #b8bec8;
}

body.checker-view--face-slate-flame .checker--red {
  --leather-base: #e65100;
  --leather-mid: #ff7043;
  --leather-deep: #bf360c;
  --leather-highlight: #ffb74d;
}

body.checker-view--face-slate-flame .off-board .checker--borne-off.checker--black {
  background: linear-gradient(180deg, #7a828e 0%, #4a515c 45%, #2a3038 100%);
}

body.checker-view--face-slate-flame .off-board .checker--borne-off.checker--red {
  background: linear-gradient(180deg, #ff7043 0%, #e65100 45%, #bf360c 100%);
}

/* ── Środek: atrament-złoto — głęboka czerń vs bursztyn ── */
body.checker-view--face-ink-gold .checker--black {
  --leather-base: #0a0c10;
  --leather-mid: #1a1e28;
  --leather-deep: #030405;
  --leather-highlight: #2a3040;
}

body.checker-view--face-ink-gold .checker--red {
  --leather-base: #ff8f00;
  --leather-mid: #ffb300;
  --leather-deep: #c68400;
  --leather-highlight: #ffe082;
}

body.checker-view--face-ink-gold .off-board .checker--borne-off.checker--black {
  background: linear-gradient(180deg, #1a1e28 0%, #0a0c10 45%, #030405 100%);
}

body.checker-view--face-ink-gold .off-board .checker--borne-off.checker--red {
  background: linear-gradient(180deg, #ffb300 0%, #ff8f00 45%, #c68400 100%);
}

/* ── Środek: mono — klasyczna czerń vs perłowa biel ── */
body.checker-view--face-mono .checker::before {
  background-blend-mode: overlay, normal, normal, normal;
}

body.checker-view--face-mono .checker--black {
  --leather-base: #18181a;
  --leather-mid: #2c2c30;
  --leather-deep: #08080a;
  --leather-highlight: #4a4a52;
}

body.checker-view--face-mono .checker--red {
  --leather-base: #ddd9d0;
  --leather-mid: #f0eeea;
  --leather-deep: #b8b4aa;
  --leather-highlight: #fafaf8;
}

body.checker-view--face-mono .off-board .checker--borne-off.checker--black {
  background: linear-gradient(180deg, #2c2c30 0%, #18181a 45%, #08080a 100%);
}

body.checker-view--face-mono .off-board .checker--borne-off.checker--red {
  background: linear-gradient(180deg, #f0eeea 0%, #ddd9d0 45%, #b8b4aa 100%);
}

/* ── Podgląd w panelu ── */
.checker-style-preview {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}

.checker-style-preview::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  pointer-events: none;
}

.checker-style-preview--rim-only::before {
  display: none;
}

.checker-style-preview--face {
  background: linear-gradient(
    155deg,
    var(--palette-metal-light) 0%,
    var(--palette-metal-mid) 42%,
    var(--palette-metal-dark) 58%,
    var(--palette-metal-mid) 100%
  );
}

.checker-style-preview--face-only {
  background: linear-gradient(
    155deg,
    var(--palette-metal-light) 0%,
    var(--palette-metal-mid) 42%,
    var(--palette-metal-dark) 58%,
    var(--palette-metal-mid) 100%
  ) !important;
  box-shadow: none !important;
}

.checker-style-preview--face-only::before {
  inset: 1px;
}

/* Ramka — podgląd */
.checker-style-option[data-rim="none"] .checker-style-preview--rim {
  background: transparent;
  border: 1px dashed var(--on-dark-28);
  box-shadow: inset 0 0 0 1px var(--on-dark-08);
}

.checker-style-option[data-rim="none"] .checker-style-preview--rim::before {
  display: none;
}

.checker-style-option[data-rim="chrome"] .checker-style-preview--rim {
  background: linear-gradient(155deg, var(--palette-metal-light) 0%, var(--palette-metal-mid) 42%, var(--palette-metal-dark) 58%, var(--palette-metal-mid) 100%);
}

.checker-style-option[data-rim="brass"] .checker-style-preview--rim {
  background: linear-gradient(155deg, #f8e8a8 0%, #d4aa38 50%, #8a6210 100%);
}

.checker-style-option[data-rim="obsidian"] .checker-style-preview--rim {
  background: linear-gradient(155deg, #b0b8c0 0%, #5a626a 50%, #2a3038 100%);
}

.checker-style-option[data-rim="copper"] .checker-style-preview--rim {
  background: linear-gradient(155deg, #f0d0c8 0%, #b87868 50%, #703828 100%);
}

/* Środek — podgląd (czarny + czerwony pionek) */
.checker-style-option[data-face="classic"] .checker-style-preview--face::before {
  background: linear-gradient(
    135deg,
    var(--palette-leather-black-highlight) 0%,
    var(--palette-leather-black) 46%,
    var(--palette-leather-black) 50%,
    var(--palette-leather-brown-highlight) 54%,
    var(--palette-leather-brown) 100%
  );
}

.checker-style-option[data-face="walnut"] .checker-style-preview--face::before {
  background: linear-gradient(135deg, #504840 0%, #2a2018 46%, #2a2018 50%, #987050 54%, #6a4830 100%);
}

.checker-style-option[data-face="midnight"] .checker-style-preview--face::before {
  background: linear-gradient(135deg, #2e2e32 0%, #0a0a0c 46%, #0a0a0c 50%, #503830 54%, #301c18 100%);
}

.checker-style-option[data-face="sand"] .checker-style-preview--face::before {
  background: linear-gradient(135deg, #6e6860 0%, #4a4438 46%, #4a4438 50%, #c0a080 54%, #9a7858 100%);
}

.checker-style-option[data-face="wine"] .checker-style-preview--face::before {
  background: linear-gradient(135deg, #403038 0%, #1a1418 46%, #1a1418 50%, #a84858 54%, #782838 100%);
}

.checker-style-option[data-face="charcoal"] .checker-style-preview--face::before {
  background: linear-gradient(135deg, #4a4d54 0%, #121316 46%, #121316 50%, #ff8a80 54%, #e53935 100%);
}

.checker-style-option[data-face="ceramic"] .checker-style-preview--face::before {
  background: linear-gradient(135deg, #6b6f78 0%, #222428 46%, #222428 50%, #ef5350 54%, #8e0000 100%);
}

.checker-style-option[data-face="slate-flame"] .checker-style-preview--face::before {
  background: linear-gradient(135deg, #b8bec8 0%, #4a515c 46%, #4a515c 50%, #ffb74d 54%, #e65100 100%);
}

.checker-style-option[data-face="ink-gold"] .checker-style-preview--face::before {
  background: linear-gradient(135deg, #2a3040 0%, #0a0c10 46%, #0a0c10 50%, #ffe082 54%, #ff8f00 100%);
}

.checker-style-option[data-face="mono"] .checker-style-preview--face::before {
  background: linear-gradient(135deg, #4a4a52 0%, #18181a 46%, #18181a 50%, #fafaf8 54%, #ddd9d0 100%);
}