.game-board,
.editor-board {
  --board-pad: clamp(7px, 1vw, 11px);
  position: relative;
  display: grid;
  aspect-ratio: 1;
  padding: var(--board-pad);
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: clamp(3px, 0.42vw, 5px);
  overflow: hidden;
  border: clamp(7px, 1.2vw, 13px) solid #2b3952;
  border-radius: clamp(16px, 2.2vw, 26px);
  background:
    radial-gradient(circle at 50% 22%, rgba(109, 151, 210, 0.13), transparent 58%),
    #080d17;
  box-shadow:
    inset 0 5px 9px rgba(2, 5, 11, 0.85),
    inset 0 0 0 2px rgba(255, 255, 255, 0.045),
    0 11px #080e19,
    0 23px 38px rgba(0, 0, 0, 0.53);
  touch-action: none;
  user-select: none;
}

.brick-cell,
.editor-cell {
  --brick-face: #253044;
  --brick-rim: #101827;
  --drag-x: 0px;
  --drag-y: 0px;
  --plate-radius: clamp(6px, 0.82vw, 10px);
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brick-face), white 38%);
  border-radius: var(--plate-radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0 2%, rgba(255, 255, 255, 0.2) 8%, transparent 30%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--brick-face), white 18%) 0 63%,
      var(--brick-face) 64% 78%,
      color-mix(in srgb, var(--brick-face), black 14%) 79% 88%,
      var(--brick-rim) 89% 100%);
  box-shadow:
    inset 2px 2px 1px rgba(255, 255, 255, 0.42),
    inset -2px 0 2px rgba(0, 0, 0, 0.14),
    inset 0 -5px 2px rgba(0, 0, 0, 0.16),
    0 3px 0 var(--brick-rim),
    0 6px 5px rgba(0, 0, 0, 0.58);
  transform: translate(var(--drag-x), var(--drag-y));
  transition: transform 0.14s cubic-bezier(0.2, 0.75, 0.25, 1), filter 0.14s, box-shadow 0.14s, opacity 0.14s;
  will-change: transform;
}

.brick-cell::before,
.editor-cell::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  border-radius: inherit;
  background:
    radial-gradient(circle at 27% 27%, rgba(255, 255, 255, 0.78) 0 3%, color-mix(in srgb, var(--brick-face), white 25%) 4% 13%, var(--brick-face) 14% 16%, color-mix(in srgb, var(--brick-face), black 32%) 17% 20%, transparent 21%),
    radial-gradient(circle at 73% 27%, rgba(255, 255, 255, 0.68) 0 3%, color-mix(in srgb, var(--brick-face), white 22%) 4% 13%, var(--brick-face) 14% 16%, color-mix(in srgb, var(--brick-face), black 33%) 17% 20%, transparent 21%),
    radial-gradient(circle at 27% 73%, rgba(255, 255, 255, 0.58) 0 3%, color-mix(in srgb, var(--brick-face), white 18%) 4% 13%, var(--brick-face) 14% 16%, color-mix(in srgb, var(--brick-face), black 35%) 17% 20%, transparent 21%),
    radial-gradient(circle at 73% 73%, rgba(255, 255, 255, 0.5) 0 3%, color-mix(in srgb, var(--brick-face), white 16%) 4% 13%, var(--brick-face) 14% 16%, color-mix(in srgb, var(--brick-face), black 36%) 17% 20%, transparent 21%);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2));
  pointer-events: none;
}

.brick-cell::after,
.editor-cell::after {
  position: absolute;
  /* Keep the face sheen beneath the studs so each stud reads as a raised part. */
  z-index: 1;
  inset: 2px 3px 7px;
  content: "";
  border-radius: calc(var(--plate-radius) - 2px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.23), transparent 27% 72%, rgba(0, 0, 0, 0.1));
  box-shadow:
    inset 1px 1px rgba(255, 255, 255, 0.24),
    inset -1px -1px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.color-red { --brick-face: var(--red); --brick-rim: var(--red-dark); }
.color-blue { --brick-face: var(--blue); --brick-rim: var(--blue-dark); }
.color-yellow { --brick-face: var(--yellow); --brick-rim: var(--yellow-dark); }
.color-green { --brick-face: var(--green); --brick-rim: var(--green-dark); }
.color-purple { --brick-face: var(--purple); --brick-rim: var(--purple-dark); }

.brick-cell.color-empty,
.editor-cell.color-empty {
  border-color: rgba(255, 255, 255, 0.03);
  background: radial-gradient(circle at 45% 38%, #182338, #09101d 73%);
  box-shadow: inset 2px 4px 8px rgba(0, 0, 0, 0.75), inset -1px -1px rgba(255, 255, 255, 0.04), 0 1px #000;
  transform: none;
}

.brick-cell.color-empty::before,
.editor-cell.color-empty::before {
  display: none;
}

.palette-swatch {
  position: relative;
  width: 47px;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), transparent 32%),
    linear-gradient(180deg, var(--brick-face) 0 76%, color-mix(in srgb, var(--brick-face), black 16%) 77% 100%);
  box-shadow: inset 0 -5px rgba(0, 0, 0, 0.17), 0 5px var(--brick-rim), 0 9px 14px rgba(0, 0, 0, 0.32);
  transition: 0.18s var(--ease-brick);
}

.palette-swatch::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  background:
    radial-gradient(circle at 27% 27%, rgba(255,255,255,.72) 0 3%, color-mix(in srgb,var(--brick-face),white 22%) 4% 14%, color-mix(in srgb,var(--brick-face),black 30%) 15% 19%, transparent 20%),
    radial-gradient(circle at 73% 27%, rgba(255,255,255,.61) 0 3%, color-mix(in srgb,var(--brick-face),white 18%) 4% 14%, color-mix(in srgb,var(--brick-face),black 31%) 15% 19%, transparent 20%),
    radial-gradient(circle at 27% 73%, rgba(255,255,255,.52) 0 3%, color-mix(in srgb,var(--brick-face),white 15%) 4% 14%, color-mix(in srgb,var(--brick-face),black 33%) 15% 19%, transparent 20%),
    radial-gradient(circle at 73% 73%, rgba(255,255,255,.43) 0 3%, color-mix(in srgb,var(--brick-face),white 13%) 4% 14%, color-mix(in srgb,var(--brick-face),black 34%) 15% 19%, transparent 20%);
}

.palette-swatch.color-empty {
  --brick-face: #253044;
  --brick-rim: #101827;
  color: #d4deec;
  background: #0a111d;
  box-shadow: inset 0 3px 7px #000, 0 5px #040810;
}

.palette-swatch.color-empty::before {
  display: none;
}

.palette-swatch:hover {
  transform: translateY(-4px);
}

.palette-swatch.is-selected {
  border-color: #fff;
  transform: translateY(-5px) scale(1.08);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.2), 0 5px var(--brick-rim), 0 0 0 4px var(--accent), 0 12px 19px rgba(0, 0, 0, 0.38);
}