/* One width governs the existing game and the decorative side fields. */
:root {
  --game-width: 480px;
  --slate-wall-width: calc(100vh * 657 / 866);
  --slate-panel-width: calc(100vh * 672 / 866);
  --slate-overlap: calc(100vh * 15 / 866);
}
@supports (height: 100dvh) {
  :root {
    --slate-wall-width: calc(100dvh * 657 / 866);
    --slate-panel-width: calc(100dvh * 672 / 866);
    --slate-overlap: calc(100dvh * 15 / 866);
  }
}
/* Replace the old blurred background in one place. No containing-block transform. */
.desktop-backdrop.slate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: none;
  filter: none;
  transform: none;
  pointer-events: none;
  user-select: none;
}
.slate-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: max(0px, calc((100% - var(--game-width)) / 2));
  overflow: hidden;
}
.slate-side--left { left: 0; }
.slate-side--right { right: 0; }
.slate-side::before, .slate-side::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background-size: auto 100%;
}
.slate-side::before { background-repeat: repeat-x; }
.slate-side::after { width: var(--slate-panel-width); background-repeat: no-repeat; }
.slate-side--left::before {
  left: 0;
  right: var(--slate-wall-width);
  background-image: url('./assets/slate-oak-backdrop-v1/stone-left.webp');
  background-position: right top;
}
.slate-side--right::before {
  left: var(--slate-wall-width);
  right: 0;
  background-image: url('./assets/slate-oak-backdrop-v1/stone-right.webp');
  background-position: left top;
}
.slate-side--left::after {
  right: calc(-1 * var(--slate-overlap));
  background-image: url('./assets/slate-oak-backdrop-v1/panel-left.webp');
  background-position: right top;
}
.slate-side--right::after {
  left: calc(-1 * var(--slate-overlap));
  background-image: url('./assets/slate-oak-backdrop-v1/panel-right.webp');
  background-position: left top;
}
.game-shell { z-index: 1; width: min(100%, var(--game-width)); }
.veil:not(.settings-oak-veil) { width: min(100%, var(--game-width)); }
.modal.settings-oak-shell { max-width: var(--game-width); }