/* 植物大战僵尸 · 页面样式
 * 画布等比缩放居中，其余全部由 Canvas 绘制。
 */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #14100b;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 45%, #2b2418 0%, #14100b 70%);
  user-select: none;
  -webkit-user-select: none;
}

#game {
  display: block;
  image-rendering: auto;
  cursor: pointer;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.75), 0 0 0 2px #3a2f1d;
  background: #7cb342;
}

#rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: #f4e9c8;
  font-size: 16px;
  line-height: 1.7;
  background: #14100b;
}

@media (max-aspect-ratio: 4/5) {
  #rotate-hint { display: flex; }
  #game { display: none; }
}