/* A focus outline also needs an inset edge: clip-path buttons clip outlines. */
html[data-input-mode="controller"] :focus {
  outline: 3px solid #ffe897 !important;
  outline-offset: 4px;
  box-shadow: inset 0 0 0 3px #ffe897, 0 0 18px #ffc54b75 !important;
  --edge: #ffe897;
}
.controller-reticle { position: fixed; left: 0; top: 0; z-index: 45; width: 0; height: 0; pointer-events: none; }
.controller-reticle[hidden] { display: none; }
.controller-reticle i { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border: 2px solid #fff4bc; border-radius: 50%; box-shadow: 0 0 0 2px #082a44, 0 0 12px #ffe174; }
.controller-reticle i::after { content: ''; position: absolute; width: 4px; height: 4px; left: 9px; top: 9px; background: white; border-radius: 50%; }
.controller-reticle span { position: absolute; top: 20px; left: -25px; width: 50px; text-align: center; color: #fff4bc; font: 900 12px Nunito,sans-serif; text-shadow: 0 1px 3px #000; }
.controller-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }