/**
 * Style kości — klient lokalny (body.dice-view--*).
 * Klasyczne = domyślne style z styles.css (bez klasy).
 */

/* ── Marmur — jasny kamień, ciemne oczka ── */
body.dice-view--marble .die {
  border-color: color-mix(in srgb, #8a9098 55%, transparent);
  background:
    linear-gradient(
      145deg,
      #f4f6f8 0%,
      #d8dde3 42%,
      #b8bec6 100%
    );
  box-shadow:
    inset 0 2px 4px color-mix(in srgb, #ffffff 55%, transparent),
    inset 0 -2px 5px color-mix(in srgb, #6a7078 22%, transparent),
    0 2px 6px var(--shadow-28);
}

body.dice-view--marble .die--red {
  background:
    linear-gradient(
      145deg,
      #f0ece8 0%,
      #d4ccc4 42%,
      #b0a498 100%
    );
}

body.dice-view--marble .die--white .pip,
body.dice-view--marble .die--red .pip,
body.dice-view--marble .pip {
  background: #2a3038;
  box-shadow: 0 0 1px color-mix(in srgb, #000000 18%, transparent);
}

body.dice-view--marble .die--undoable.die--used::before {
  background: color-mix(in srgb, #5a6068 58%, transparent);
}

body.dice-view--marble .die__undo-badge {
  background:
    linear-gradient(
      145deg,
      #eef0f2 0%,
      #c8ced6 100%
    );
}

/* ── Obsydian — ciemne kości, jasne oczka ── */
body.dice-view--obsidian .die {
  border-color: color-mix(in srgb, #3a4048 75%, transparent);
  background:
    linear-gradient(
      145deg,
      #4a5058 0%,
      #2a3038 45%,
      #12161c 100%
    );
  box-shadow:
    inset 0 2px 4px color-mix(in srgb, #7a828c 18%, transparent),
    inset 0 -2px 6px color-mix(in srgb, #000000 45%, transparent),
    0 2px 8px var(--shadow-35);
}

body.dice-view--obsidian .die--red {
  background:
    linear-gradient(
      145deg,
      #3a3438 0%,
      #241e22 45%,
      #100c10 100%
    );
}

body.dice-view--obsidian .die--white .pip,
body.dice-view--obsidian .die--red .pip,
body.dice-view--obsidian .pip {
  background: #e8eaee;
  box-shadow: 0 0 2px color-mix(in srgb, #ffffff 35%, transparent);
}

body.dice-view--obsidian .die--undoable.die--used::before {
  background: color-mix(in srgb, #080a0c 68%, transparent);
}

body.dice-view--obsidian .die__undo-badge {
  background:
    linear-gradient(
      145deg,
      #5a626a 0%,
      #2a3038 100%
    );
}

body.dice-view--obsidian .die__undo-icon {
  background-color: #f0f2f5;
}

/* ── Podgląd w panelu ── */
.checker-style-preview--dice {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--palette-die-amber-deep) 65%, transparent);
  background:
    linear-gradient(
      145deg,
      var(--palette-die-amber-light) 0%,
      var(--palette-die-amber) 50%,
      var(--palette-die-amber-deep) 100%
    );
  box-shadow: inset 0 1px 2px color-mix(in srgb, #ffffff 30%, transparent);
  position: relative;
}

.checker-style-preview--dice::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--die-pip-light);
}

.checker-style-option[data-dice="marble"] .checker-style-preview--dice {
  border-color: color-mix(in srgb, #8a9098 55%, transparent);
  background: linear-gradient(145deg, #f4f6f8 0%, #b8bec6 100%);
}

.checker-style-option[data-dice="marble"] .checker-style-preview--dice::after {
  background: #2a3038;
}

.checker-style-option[data-dice="obsidian"] .checker-style-preview--dice {
  border-color: color-mix(in srgb, #3a4048 75%, transparent);
  background: linear-gradient(145deg, #4a5058 0%, #12161c 100%);
}

.checker-style-option[data-dice="obsidian"] .checker-style-preview--dice::after {
  background: #e8eaee;
}