:root {
  color-scheme: dark;
  background: #182b20;
}

* {
  box-sizing: border-box;
}

html,
body,
#game-root {
  width: 100%;
  height: 100%;
  min-width: 320px;
  min-height: 240px;
  margin: 0;
  overflow: hidden;
  background: #182b20;
}

body {
  font-family: "Courier New", Courier, monospace;
}

#world-canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  outline: none;
  background: #182b20;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

/*
 * Accessible but visually absent: it has a real box and no display:none,
 * visibility:hidden or aria-hidden, so assistive technology can read it.
 * opacity:0 keeps browser automation able to focus/click the controls while
 * position:fixed prevents it from reserving any visual layout space.
 */
.accessible-layer {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

.accessible-layer > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  min-width: 2px;
  height: 2px;
  min-height: 2px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  white-space: nowrap;
  pointer-events: auto;
}

#accessible-layer #movement-controls {
  top: 4px;
  width: 4px;
  height: 32px;
  overflow: visible;
}

#movement-controls button {
  position: absolute;
  left: 0;
  width: 2px !important;
  min-width: 0 !important;
  height: 2px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 1px;
  line-height: 1px;
  overflow: hidden;
}

#move-north { top: 0; }
#move-south { top: 8px; }
#move-west { top: 16px; }
#move-east { top: 24px; }

#accessible-layer #interact-button { top: 14px; }
#accessible-layer #observe-button { top: 16px; }
#accessible-layer #action-hint { top: 18px; }

.accessible-layer h1 {
  font-size: 1px;
}

.accessible-layer button {
  cursor: pointer;
}

.accessible-layer button:focus-visible {
  outline: 1px solid transparent;
}