.random-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 2em 0;
}

.random-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1em;
  padding: 20px;
  color: #f8f3e9;
  font-family: inherit;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background: #993300;
  border: 1px solid rgba(125, 107, 83, 0.55);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(35, 41, 70, 0.22);
  transition: background-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease, opacity 0.12s ease;
}

.random-btn:hover {
  background: #993300d1;
  box-shadow: 0 12px 24px rgba(35, 41, 70, 0.28);
  transform: translateY(-3px);
}

.random-btn:active {
  transform: translateY(0) scale(0.98);
}

.random-btn:focus-visible {
  outline: 3px solid rgba(125, 107, 83, 0.85);
  outline-offset: 3px;
}

.random-btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.65;
  box-shadow: none;
  transform: none;
}

@media (max-width: 480px) {
  .random-btn {
    padding: 13px;
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .random-btn {
    transition: none;
  }
}

/* 夜间主题 */
html[data-theme="dark"] .random-btn {
  color: #f1ece4;
  background: #7f3650;
  border-color: rgba(211, 173, 192, 0.42);
  box-shadow: 0 8px 18px rgba(4, 7, 16, 0.36);
}

html[data-theme="dark"] .random-btn:hover {
  background: #91415c;
  box-shadow: 0 12px 24px rgba(4, 7, 16, 0.44);
}

html[data-theme="dark"] .random-btn:focus-visible {
  outline-color: rgba(199, 181, 218, 0.82);
}