.combat-transition-countdown {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(17, 13, 7, 0.18), transparent 34%);
}

.combat-transition-countdown strong {
  color: var(--gold-b, #e8c278);
  font-family: "Cinzel", serif;
  font-size: clamp(88px, 22vw, 180px);
  font-weight: 700;
  line-height: 0.9;
  text-shadow:
    0 0 12px rgba(232, 194, 120, 0.72),
    0 4px 24px rgba(0, 0, 0, 0.9);
}

.combat-transition-countdown span {
  color: #f5ddb0;
  font-family: "Cinzel", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.combat-transition-countdown button {
  pointer-events: auto;
  min-width: 210px;
  margin-top: 10px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 112, 96, 0.82);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(153, 36, 27, 0.96), rgba(92, 17, 14, 0.98));
  color: #ffe9e4;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.55);
  font: 800 12px/1.2 var(--font-ui, sans-serif);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.combat-transition-countdown button:hover,
.combat-transition-countdown button:focus-visible {
  border-color: #ffb0a4;
  background: linear-gradient(180deg, rgba(184, 48, 37, 0.98), rgba(112, 21, 17, 0.98));
  outline: none;
}

@media (prefers-reduced-motion: no-preference) {
  .combat-transition-countdown strong {
    animation: combat-transition-pulse 1s ease-in-out infinite;
  }
}

@keyframes combat-transition-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.88; }
}