html, body { margin: 0; height: 100%; background: #060818; overflow: hidden; }
  body { display: grid; place-items: center; }
  canvas { display: block; width: min(100vw, calc(100vh * 4 / 3)); width: min(100vw, calc(100dvh * 4 / 3)); aspect-ratio: 4 / 3; image-rendering: pixelated; cursor: none; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; background: #000; }
  #focus { position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: rgba(242, 195, 91, .94); color: #14100a; text-align: center; font: 600 14px/1.3 system-ui, sans-serif; pointer-events: none; }
  #focus[hidden] { display: none; }
  #sound { position: fixed; left: 0; right: 0; top: 0; padding: 4px 8px; background: rgba(8, 10, 18, .78); color: #ffd65a; text-align: center; font: 12px/1.3 system-ui, sans-serif; pointer-events: none; }
  #sound[hidden] { display: none; }

  .enter-vr { position: fixed; right: 12px; bottom: 12px; z-index: 10; padding: 10px 16px; font: 600 15px system-ui, sans-serif; color: #14100a; background: #f2c35b; border: 0; border-radius: 6px; cursor: pointer; }
  .enter-vr.off { opacity: .55; cursor: default; }