* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0d0d20; }

/* full-viewport animated backdrop behind the letterboxed game */
#bgd { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }

#wrap {
  position: fixed; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  /* keep the game out of notches / home indicator (viewport-fit=cover) */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

canvas#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: transparent;
}

#rotate-hint {
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%) translateY(-8px);
  color: #ffe066; background: rgba(10,10,30,.85); padding: 10px 18px; border-radius: 12px;
  font: bold 15px system-ui, sans-serif; z-index: 20; pointer-events: none;
  opacity: 0; transition: opacity .35s, transform .35s;
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
}
#rotate-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }