:root {
  --bg0: #bfe9ff;
  --bg1: #e9fbff;
  --hud-bg: rgba(0, 0, 0, 0.45);
  --hud-fg: #fff;
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-bg-hover: rgba(255, 255, 255, 0.18);
  --btn-border: rgba(255, 255, 255, 0.25);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

body {
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
}

#hud {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--hud-bg);
  color: var(--hud-fg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hud-odd {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.6px;
  padding: 2px 10px;
}