:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #000; font-family: "Courier New", monospace; }
main { position: relative; width: 100%; height: 100%; height: 100svh; }
canvas { display: block; width: 100%; height: 100%; }
#replay {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 40px;
  height: 40px;
  padding: 11px;
  border: 1px solid #ffffff18;
  border-radius: 50%;
  background: #0009;
  color: #b6b8a6;
  opacity: 0;
  cursor: pointer;
  transition: opacity .3s ease, border-color .3s ease;
}
main:hover #replay, #replay:focus-visible { opacity: .65; }
#replay:hover, #replay:focus-visible { opacity: 1; border-color: #ffffff66; }
#replay:focus-visible { outline: 1px solid #d4d9ad; outline-offset: 4px; }
#replay svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
noscript { position: absolute; inset: 45% 20px auto; color: #d9d9c7; text-align: center; }
@media (prefers-reduced-motion: reduce) { #replay { transition: none; } }