/* Материалы игрового поля. Текстуры повторяются в исходных пропорциях.
   Геометрия, элементы управления и состояния клеток остаются у самих игр. */
[data-surface='sever'] {
  --surface-base: #253b49;
  --surface-pale: #dbe8ed;
  --surface-mid: #819da8;
  --surface-line: #8da9b7;
  --surface-weave: url('/collections/surfaces/sever.svg');
}
[data-surface='obsidian'] {
  --surface-base: #25252e;
  --surface-pale: #e0d9d9;
  --surface-mid: #8c818d;
  --surface-line: #9b909d;
  --surface-weave: url('/collections/surfaces/obsidian.svg');
}
[data-surface='chertezh'] {
  --surface-base: #20334d;
  --surface-pale: #dae8f2;
  --surface-mid: #809db8;
  --surface-line: #8eafd0;
  --surface-weave: url('/collections/surfaces/chertezh.svg');
}
[data-surface='terracotta'] {
  --surface-base: #50342b;
  --surface-pale: #f0d5b9;
  --surface-mid: #b17b63;
  --surface-line: #c4997f;
  --surface-weave: url('/collections/surfaces/terracotta.svg');
}
[data-surface='orbita'] {
  --surface-base: #342941;
  --surface-pale: #e6deed;
  --surface-mid: #9684a5;
  --surface-line: #a596b7;
  --surface-weave: url('/collections/surfaces/orbita.svg');
}
[data-surface='porcelain'] {
  --surface-base: #24404e;
  --surface-pale: #e6eef0;
  --surface-mid: #789cac;
  --surface-line: #93b8c8;
  --surface-weave: url('/collections/surfaces/porcelain.svg');
}

[data-surface] :is(.ch-board, .bs-grid, .nd-board, .col-sample-grid),
.surface-felt[data-surface],
.surface-preview[data-surface] {
  background-color: var(--surface-base);
  background-image: var(--surface-weave, none);
  background-position: center;
}

body[data-screen='poker'] .felt.surface-felt,
body[data-screen='durak'] .dk-cloth.surface-felt,
.cl-felt.surface-felt {
  background-color: var(--surface-base);
  background-image: var(--surface-weave, none);
  background-position: center;
  outline: 1px solid var(--surface-line, var(--border-color));
  outline-offset: -1px;
  box-shadow: none;
}

.ch-frame[data-surface], .bs-frame[data-surface] { background-color: var(--surface-base); }
.surface-felt[data-surface] { background-size: 96px auto; }
.cl-felt[data-surface],
.col-sample-hand[data-surface] { background-size: 132px auto; }
[data-surface] :is(.ch-board, .col-sample-grid) { background-size: 78px auto; }

[data-surface] :is(.ch-sq, .col-sample-cell) {
  background-color: color-mix(in srgb, var(--surface-pale) 93%, transparent);
}
[data-surface] :is(.ch-sq, .col-sample-cell).dark {
  background-color: color-mix(in srgb, var(--surface-mid) 81%, transparent);
}

.bs-frame[data-surface] {
  --sea-grid-line: color-mix(in srgb, var(--surface-line) 84%, var(--surface-base));
}
[data-surface] .bs-grid { border-color: var(--sea-grid-line); background-size: 86px auto; }
[data-surface] .bs-grid.mini { background-size: 44px auto; }
.bs-own[data-surface] .bs-grid {
  background-color: color-mix(in srgb, var(--surface-base) 95%, var(--surface-pale));
}
:where([data-surface]) .bs-cell { box-shadow: inset -1px -1px 0 var(--sea-grid-line); }
/* В статической примерке линии те же, но прицелу не нужно их переопределять. */
.col-sample-sea[data-surface] .bs-cell {
  border-right: 1px solid var(--sea-grid-line);
  border-bottom: 1px solid var(--sea-grid-line);
  box-shadow: none;
}
.col-sample-sea .bs-ship { border: 1px solid var(--bg-main); box-shadow: none; }
[data-surface] .bs-cell.around::after { background: var(--surface-line); }

:is(.nd-wrap, .col-sample-nardy)[data-surface] {
  --nd-pt-light: var(--surface-pale);
  --nd-pt-dark: var(--surface-mid);
  --nd-bar: color-mix(in srgb, var(--surface-base) 74%, var(--surface-line));
}
[data-surface] .nd-board {
  outline: 1px solid var(--surface-line);
  outline-offset: -1px;
  background-size: 156px auto;
}
[data-surface] .nd-pt::before {
  background-image: var(--surface-weave);
  background-position: center;
  background-size: 68px auto;
}
[data-surface] .nd-no { opacity: 1; }

.col-sample[data-surface] { background-color: var(--surface-base); }
.col-sample.table[data-surface] { outline: 1px solid var(--surface-line); outline-offset: -1px; }

.surface-preview > svg { width: 100%; height: 100%; display: block; }