/**
 * Style kostki podwajającej — klient lokalny (body.cube-view--*).
 * Klasyczne = domyślne style z styles.css (bez klasy).
 */

/* ── Marmur — jasny kamień, ciemne cyfry ── */
body.cube-view--marble .doubling-cube {
  --cube-text: var(--frame);
  --cube-text-shadow: none;
  --cube-pulse: #8a9098;
  border-color: color-mix(in srgb, #8a9098 58%, transparent);
  background:
    linear-gradient(
      148deg,
      #f4f6f8 0%,
      #d8dde3 38%,
      #b8bec6 72%,
      #9aa0a8 100%
    );
  box-shadow:
    inset 0 2px 4px color-mix(in srgb, #ffffff 62%, transparent),
    inset 0 -3px 6px color-mix(in srgb, #6a7078 24%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #ffffff 28%, transparent),
    0 3px 8px var(--shadow-28);
}

body.cube-view--marble .doubling-cube::before {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #ffffff 72%, transparent) 0%,
    transparent 55%
  );
}

body.cube-view--marble .doubling-cube::after {
  border-color: color-mix(in srgb, #6a7078 22%, transparent);
}

/* ── Obsydian — ciemna kostka, jasne cyfry ── */
body.cube-view--obsidian .doubling-cube {
  --cube-text: var(--frame);
  --cube-text-shadow: none;
  --cube-pulse: #5a626a;
  border-color: color-mix(in srgb, #3a4048 78%, transparent);
  background:
    linear-gradient(
      148deg,
      #4a5058 0%,
      #2a3038 42%,
      #181c22 78%,
      #0a0c10 100%
    );
  box-shadow:
    inset 0 2px 5px color-mix(in srgb, #7a828c 22%, transparent),
    inset 0 -4px 8px color-mix(in srgb, #000000 52%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #8a9098 12%, transparent),
    0 4px 10px var(--shadow-35);
}

body.cube-view--obsidian .doubling-cube::before {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #ffffff 14%, transparent) 0%,
    transparent 48%
  );
}

body.cube-view--obsidian .doubling-cube::after {
  border-color: color-mix(in srgb, #ffffff 8%, transparent);
}

/* ── Mosiądz — metaliczna złota kostka ── */
body.cube-view--brass .doubling-cube {
  --cube-text: var(--frame);
  --cube-text-shadow: none;
  --cube-pulse: #c8a038;
  border-color: color-mix(in srgb, #8a6820 72%, transparent);
  background:
    linear-gradient(
      148deg,
      #f0d878 0%,
      #d4aa38 34%,
      #b88820 68%,
      #8a6010 100%
    );
  box-shadow:
    inset 0 2px 4px color-mix(in srgb, #fff8d8 48%, transparent),
    inset 0 -3px 7px color-mix(in srgb, #5a4010 38%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff0a8 22%, transparent),
    0 3px 9px color-mix(in srgb, #3a2808 28%, transparent);
}

body.cube-view--brass .doubling-cube::before {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #fff8d0 58%, transparent) 0%,
    transparent 52%
  );
}

body.cube-view--brass .doubling-cube::after {
  border-color: color-mix(in srgb, #6a5018 28%, transparent);
}

/* ── Podgląd w panelu ustawień ── */
.checker-style-preview--cube {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid var(--cube-border-85);
  background:
    linear-gradient(
      148deg,
      var(--palette-die-amber-light) 0%,
      var(--palette-die-amber) 48%,
      var(--palette-die-amber-deep) 100%
    );
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, #ffffff 35%, transparent),
    inset 0 -1px 2px color-mix(in srgb, #000000 18%, transparent);
  position: relative;
  flex-shrink: 0;
}

.checker-style-preview--cube::after {
  content: '2';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  color: var(--frame);
  text-shadow: none;
}

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

.checker-style-option[data-cube="marble"] .checker-style-preview--cube::after {
  color: var(--frame);
  text-shadow: none;
}

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

.checker-style-option[data-cube="obsidian"] .checker-style-preview--cube::after {
  color: var(--frame);
  text-shadow: none;
}

.checker-style-option[data-cube="brass"] .checker-style-preview--cube {
  border-color: color-mix(in srgb, #8a6820 72%, transparent);
  background: linear-gradient(148deg, #f0d878 0%, #8a6010 100%);
}

.checker-style-option[data-cube="brass"] .checker-style-preview--cube::after {
  color: var(--frame);
  text-shadow: none;
}