/* Reset & page background */
html, body {
  margin: 0;
  height: 100%;
  background: #000; /* black bars/background */
  overflow: hidden; /* avoid scrollbars on resize */
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Root centers the 16:9 box in the viewport */
#game-root {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
}

/* The letterboxed area keeps the 16:9 rectangle centered */
#letterbox {
  position: relative;
  display: grid;
  place-items: center;
  width: 1280px;   /* initial; JS will resize */
  height: 720px;   /* initial; JS will resize */
  background: #000;
}

/* The game canvas fills the 16:9 box */
#unity-canvas {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

/* Control overlay */
#controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  pointer-events: none; /* clicks pass through unless re-enabled for children */
}

#controls > * {
  pointer-events: auto;
}

#fullscreen-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 0;
  background: rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

#fullscreen-btn:hover {
  background: rgba(255,255,255,0.2);
}

/* Fullscreen element (wrapper) should stretch to viewport; 16:9 enforced by JS sizing */
:fullscreen #letterbox,
:-webkit-full-screen #letterbox {
  /* No special rules needed; JS sets width/height to a 16:9 box.
     This selector is here if you want to tweak styling in fullscreen. */
}