body[data-page="playground"] {
  --footer-gap: 8;
}

#playground {
  padding-top: calc(100vw * 185 / 1700);
}

#playground .playground-collage {
  position: relative;
  inset: auto;
  width: calc(100vw * 1500 / 1700);
  margin-inline: auto;
  aspect-ratio: 1500 / 858;
}

#playground .king-collage-piece {
  --left: var(--desktop-x);
  --top: var(--desktop-y);
  --width: var(--desktop-w);
}

#playground .king-collage-piece:focus-visible {
  outline: 2px solid #000;
  outline-offset: 5px;
}

@media (max-width: 760px) {
  #playground {
    padding-top: 132px;
  }

  #playground .playground-collage {
    width: calc(100% - 2 * var(--gutter));
    max-width: 440px;
    aspect-ratio: 346 / 1391;
  }

  #playground .king-collage-piece {
    --left: var(--mobile-x);
    --top: var(--mobile-y);
    --width: var(--mobile-w);
  }
}

@media (hover: hover) and (pointer: fine) {
  html[data-cursor="enabled"] #playground .king-collage-piece {
    cursor: grab !important;
  }

  html[data-cursor="enabled"] #playground .king-collage-piece[data-dragging] {
    cursor: grabbing !important;
  }

  body[data-page="playground"]:has(.king-collage-piece:hover, .king-collage-piece[data-dragging]) #custom-cursor {
    visibility: hidden;
  }
}