* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: #0a0708;
  overflow: hidden;
  font-family: "Songti SC", "SimSun", "Noto Serif SC", serif;
}

#stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * 等比缩放填满窗口。这是矢量风格不是像素风，所以保持平滑缩放。
 *
 * 必须靠 object-fit: contain 来保比例。写成 height:100% + max-width:100%
 * 的话，窗口偏窄时宽度被 max-width 夹住而高度不动，画面直接被纵向拉长——
 * 猪八戒会变成一只瘦长的猪。
 */
#game {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #0a0708;
}