@import url('./styles/core.css');
@import url('./styles/themes.css');
@import url('./styles/circle-token.css');
@import url('./styles/reminders.css');
@import url('./styles/sidebar.css');
@import url('./styles/character-sheet.css');
@import url('./styles/character-panel.css');
@import url('./styles/common-ui.css');
@import url('./styles/modals.css');
@import url('./styles/touch.css');
@import url('./styles/utilities.css');
@import url('./styles/tooltip.css');
@import url('./styles/tour.css');
@import url('./styles/responsive.css');
@import url('./styles/menus.css');
@import url('./styles/night-order.css');
@import url('./styles/day-night-tracking.css');
@import url('./styles/bluff-tokens.css');
@import url('./styles/print.css');

.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 16, 36, 0.95);
  color: var(--color-text-primary);
  z-index: var(--z-loading);
  padding: clamp(var(--space-5), 4vmin, var(--space-8));
  text-align: center;
  font-size: var(--font-xl);
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
  backdrop-filter: blur(4px);
}

.loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-overlay__content {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 90vw;
  flex-direction: column;
}

.loading-overlay__spinner {
  width: var(--touch-target-md);
  height: var(--touch-target-md);
  border-radius: var(--radius-full);
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--color-primary);
  animation: loading-overlay-spin 0.8s linear infinite;
}

@keyframes loading-overlay-spin {
  to {
    transform: rotate(360deg);
  }
}
