/* Quiet pixel grain, a rounded frame, and the same paper lip as the buttons. */
.pp-a { --pp-color: var(--piece-a); }
.pp-b { --pp-color: var(--piece-b); }
.pp-pattern-base { fill: var(--pp-color); }
.pp-pixel-light { fill: #fff; opacity: .16; }
.pp-pixel-dark { fill: #35303e; opacity: .07; }
.pp-pixel-base { flood-color: color-mix(in srgb, var(--pp-color) 65%, var(--piece-ink)); }
[data-theme="dark"] .pp-pixel-base { flood-color: color-mix(in srgb, var(--pp-color) 72%, var(--paper)); }
.pp-pixel-shadow { flood-color: var(--shadow); }

[data-canvas="pixel-panel"] .board {
  border-radius: 22px;
  background: color-mix(in srgb, var(--background) 95%, var(--piece-a));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--paper) 75%, transparent);
}
[data-canvas="pixel-panel"] #scene { position: relative; z-index: 2; }
[data-canvas="pixel-panel"] .board::before, [data-canvas="pixel-panel"] .board::after { position: absolute; pointer-events: none; }
[data-canvas="pixel-panel"] .board::after { content: ''; z-index: 3; inset: 7px; border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 15px; }
[data-canvas="pixel-panel"] #cut-badge { z-index: 4; }
[data-canvas="pixel-panel"] :is(#whole-face, #aim-a, #aim-b, #path-a, #path-b) {
  fill: url(#pp-pixel-a);
  filter: url(#pp-paper-a);
  stroke: color-mix(in srgb, var(--piece-ink) 78%, transparent);
  stroke-width: 1;
  stroke-linejoin: round;
}
[data-canvas="pixel-panel"] :is(#aim-b, #path-b) { fill: url(#pp-pixel-b); filter: url(#pp-paper-b); }
[data-canvas="pixel-panel"] .board.is-drawing::after { opacity: .55; }

@media (prefers-reduced-motion: no-preference) {
  [data-canvas="pixel-panel"] .board::after { transition: opacity 160ms ease-out; }
}