/* give Anders some love too! we made this together. https://codepen.io/andersschmidt :-) */
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden; /* 改为hidden以避免滚动条 */
  background-color: #f3f3f3;
  font-family: "Press Start 2P";
}

body {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/163870/bg0.png");
  background-repeat: repeat;
  background-size: 250px 250px;
}

/* 在 style.css 中添加或修改以下样式 */

#game {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 80vw;        /* 设置为视口宽度的80% */
  height: 80vh;       /* 设置为视口高度的80% */
  max-width: 640px;   /* 保持最大宽度限制 */
  max-height: 560px;  /* 保持最大高度限制 */
  padding: 20px;
  border: 7px solid black;
  background-color: white;
  box-shadow: 14px 13px 0px -4px rgba(0, 0, 0, 0.38);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* 响应式调整 */
@media (max-width: 800px) {
  #game {
    width: 95vw;
    height: 95vh;
    padding: 10px;
    border-width: 4px;
  }
}

@media (max-width: 500px) {
  #game {
    width: 100vw;
    height: 100vh;
    padding: 5px;
    border-width: 3px;
  }
}


ui-layer.ui-layer {
  user-select: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: "Press Start 2P", cursive;
}

.c-lung-capacity__label {
  display: block;
  font-size: 14px;  /* 增大字体 */
  margin-bottom: 5px;
}
.c-lung-capacity__bars {
  display: flex;
  margin-left: 2px;
}
.c-lung-capacity__bar {
  display: inline-block;
  width: 6px;       /* 增加宽度 */
  height: 14px;     /* 增加高度 */
  background-color: orange;
  box-shadow: 2px 2px 0 0 #333333;
  transition: opacity 140ms ease-in-out;
  opacity: 1;
  will-change: opacity;
}
.c-lung-capacity__bar:not(:last-child) {
  margin-right: 5px; /* 增加间距 */
}

.c-navigator {
  width: 120px;       /* 增加尺寸 */
  height: 120px;
  background-color: rgba(0, 0, 0, 0.15);
  position: absolute;
  bottom: 7.5%;
  right: 7.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-navigator .player {
  display: inline-block;
  width: 6px;         /* 增加尺寸 */
  height: 6px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  position: absolute;
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); /* 调整阴影大小 */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.c-navigator .dot {
  width: 6px;         /* 增加尺寸 */
  height: 6px;
  background-color: #dbc744;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.c-score {
  top: 7%;
  left: 7%;
  position: absolute;
}
.c-score label {
  font-size: 14px;    /* 增大字体 */
  color: black;
  letter-spacing: -0.05em;
}

.c-dialog {
  position: absolute;
  padding: 25px;      /* 增加内边距 */
  left: 15%;
  right: 15%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
  display: none;
  text-align: center;
  border: 3px solid rgba(0, 0, 0, 0.05);
  font-size: 15px;    /* 增大字体 */
  line-height: 28px;  /* 调整行高 */
}

.c-instructions {
  width: 380px;       /* 增加宽度 */
  height: 360px;      /* 增加高度 */
  background-color: #cccaaa;
  box-shadow: 6px 6px 0 0 #aaaaaa; /* 调整阴影 */
  padding: 25px;      /* 增加内边距 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
  transform: translate(100%, 100%) rotate(45deg);
  opacity: 0;
  will-change: opacity, transform;
}
.c-instructions.in {
  transform: translate(0%, -50%) rotate(0deg);
  opacity: 1;
}
.c-instructions__headline {
  position: absolute;
  top: 15px;          /* 调整位置 */
  left: 0;
  right: 0;
  max-width: 80%;     /* 调整宽度 */
  margin: 0 auto;
  text-align: center;
  font-size: 16px;    /* 增大字体 */
  background-color: #cccaaa;
  padding: 7px;       /* 增加内边距 */
  line-height: 24px;  /* 调整行高 */
}
.c-instructions__content {
  border: 5px solid #aaaaaa; /* 调整边框 */
  height: 100%;
  font-size: 11px;    /* 增大字体 */
}
.c-instructions__content .c-instructions__checklists {
  padding: 50px 20px 0 20px; /* 调整内边距 */
}
.c-instructions__content .c-instructions__checklists section + section {
  margin-top: 30px;   /* 增加间距 */
}
.c-instructions__content .c-instructions__checklists ul li {
  line-height: 18px;  /* 增加行高 */
}

.uppercase {
  text-transform: uppercase;
}