body, html {
  background-color: #aaa;
  margin:0;
  padding:0;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
* {
  box-sizing:border-box;
}

grid-system {
  display: grid;
  grid-template-columns: repeat(var(--columns, 50), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 50), minmax(0, 1fr));
  width:100%;
  height:100vh;
  container-type: size;
  cell {
    position: relative;
    grid-area: var(--landscape, var(--portrait));
    z-index:var(--layer);
    @container (max-aspect-ratio: 1/1) { grid-area: var(--portrait, var(--landscape)); }
  }
  cell > * {
      height:100%;
      width:100%;
      overflow:hidden;
  }
  cell[data-locked="true"] {
    pointer-events:none;
  }
}

input, select {
  width: 100%;
  height:100%;
}


.grid-item {
  border-image: url('./button-dark4.png');
  border-image-width: 16px;
  border-image-slice: 64 fill;
  border-radius: 8px;
}

.grid-item--green {
  background:
    linear-gradient(oklch(45.463% 0.15345 142.54) 10%,
      oklch(20% 84% 156));
  box-shadow: 0 1px 5px rgba(23, 49, 2, 0.437), 0 1px 2px rgb(5, 72, 48);
}

.grid-item--purple {
  background:
    linear-gradient(oklch(43.595% 0.22032 310.207) 10%,
      oklch(29.057% 0.14503 312.571));
  box-shadow: 0 1px 5px rgba(101, 5, 128, 0.52), 0 1px 2px rgb(136, 20, 208);
}

.grid-item--red {
  background:
    linear-gradient(oklch(40% 80% 66) 10%,
      oklch(20% 80% 66));
  box-shadow: 0 1px 5px rgba(128, 5, 5, 0.548), 0 1px 2px rgb(208, 20, 20);
}

.grid-item--blue {
  background:
    linear-gradient(oklch(32% 80% 230) 10%,
      oklch(20% 80% 230));
  box-shadow: 0 1px 5px rgba(21, 5, 128, 0.538), 0 1px 2px rgb(32, 0, 160);
}
.grid-item--orange {
  background:
    linear-gradient(oklch(70.907% 0.1691 57.62) 10%,
      oklch(64.8% 0.1446 65.438));
  box-shadow: 0 1px 5px rgba(174, 73, 6, 0.618), 0 1px 2px rgb(232, 122, 5);
}
.grid-item--yellow {
  background:
    linear-gradient(oklch(86.52% 0.17676 90.387) 10%,
      oklch(62.667% 0.12801 89.208));
  box-shadow: 0 1px 5px rgba(255, 239, 207, 0.407), 0 1px 2px rgb(160, 77, 0);
}