[popover] {
  padding: 3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: var(--ui-fade-transition);
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  border: none;
  background: var(--ui-popover-backdrop);
  position: fixed;
  inset: 0
}

.controls-keyboard,
.controls-touch {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2vw;
  list-style: none;
  padding: unset
}

.controls-touch {
  display: none;
  flex-wrap: wrap
}

@media (pointer: coarse) {
  .controls-keyboard {
    display: none;
  }
  
  .controls-touch {
    display: flex;
  }
}

[popover]:popover-open {
  opacity: 1;
  pointer-events: auto
}

[popover][fade-out],
dialog[fade-out],
dialog[fade-out]::backdrop {
  opacity: 0
}

.control-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 1
}

.control-item-grouped {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: inherit
}

.control-label {
  font-size: 14px;
  color: var(--ui-text);
  text-transform: lowercase;
  letter-spacing: .0365em;
  text-align: center;
  white-space: nowrap
}

.control-label-wrap {
  width: 100%;
  flex-basis: 100%;
  text-align: center
}

.blend-overlay {
  mix-blend-mode: overlay
}

[popover] img,
[popover] svg[data-control-type] {
  flex-shrink: 1;
  object-fit: contain;
  height: auto;
  width: 100%
}

[popover] img[src*="controls-spacebar"],
[popover] img[src*="controls-shift"],
[popover] svg[data-control-type="spacebar"],
[popover] svg[data-control-type="shift"] {
  height: 40px;
  max-width: 100%
}

[popover] img[src*="controls-left"],
[popover] img[src*="controls-right"],
[popover] svg[data-control-type="left"],
[popover] svg[data-control-type="right"] {
  height: 20px
}

.gamepad-preview {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}

.gamepad-preview svg {
  height: 60px;
  width: auto;
  max-width: 100%
}

.control-icon-tap {
  height: 58px;
  width: 100%;
  background-color: var(--control-icon-tap);
  mask-image: url('/static/images/controls/controls-tap.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('/static/images/controls/controls-tap.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain
}