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

/* Fredoka：圆润英文展示字体（OFL 开源许可，本地文件，离线可用；CJK 字符自动回退中文字体栈） */
@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/Fredoka.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

html, body {
  height: 100%;
  /* 星夜渐变遮幅：手机宽屏两侧留白融入主题而非死黑 */
  background:
    radial-gradient(2px 2px at 12% 30%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(255, 255, 255, 0.4) 50%, transparent 51%),
    radial-gradient(2px 2px at 30% 78%, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 18%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 52%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    linear-gradient(180deg, #16204a 0%, #0d1330 100%);
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 手机刘海/挖孔安全区（横屏时左右避让） */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

#game {
  display: block;
  touch-action: none; /* 禁止浏览器手势干扰 */
  overscroll-behavior: none;
  /* 桌面圆角投影；手机上贴边显示更沉浸 */
}

@media (max-width: 900px) {
  #game { border-radius: 0; box-shadow: none; }
}

@media (min-width: 901px) {
  #game {
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
  }
}