.container {
  max-width: 800px;
  width: 100%;
}
.button {
  text-align: center;
  position: relative;
  gap: 1.5rem;
}

/* Logo 按鈕 */
#logoBtn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  touch-action: none;
  transition: transform 70ms ease-out;
  will-change: transform;
  z-index: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#logoBtn img {
  width: 75vw;
  max-width: 420px;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

#logoBtn:focus,
#logoBtn:focus-visible {
  outline: none;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  #logoBtn:hover {
    transform: scale(1.05);
  }
}

#logoBtn.pressing {
  transform: scale(0.9);
}

/* 點擊次數 */
#counter {
  font-size: 1.5rem;
  color: white;
  margin: 0.5rem;
  user-select: none;
  opacity: 1;
  transition: opacity 0.6s ease;
}

#counter.hidden {
  opacity: 0;
}

/* ? 按鈕 */
#helpBtn {
  position: absolute;
  bottom: 2rem;
  right: 0.5rem;
  background: transparent;
  color: white;
  border: 1px solid azure;
  padding: 0.125rem 0.375rem;
  margin: 0.5rem;
  border-radius: 0;
  cursor: pointer;
  font-size: 1rem;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border 0.3s ease;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  #helpBtn:hover {
    color: rgb(255, 36, 199);
    border: 1px rgb(255, 36, 199) solid;
  }
}

/* 小螢幕時移到左上角 */
@media (max-width: 600px) {
  #helpBtn {
    border: none;
    top: 0.875rem;
    left: 0.625rem;
    bottom: auto;
    right: auto;
    z-index: 900;
  }
}

/* Avoid repainting the full-screen moving background on touch devices. */
@media (hover: none), (pointer: coarse) {
  body[data-page="index"] {
    animation: none;
  }
}

/* Mobile presses switch size immediately, without interpolation. */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
  #logoBtn {
    transition: none;
  }
}