@font-face {
  font-family: 'Daydream';
  src: url('/Daydream.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Vhs Gothic';
  src: url('/vhs-gothic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nise Sega Sonic';
  src: url('/NiseSegaSonic.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* Theme-managed CSS variables - will be updated by JS */
  --theme-bg-base: #003366; /* Sonic Blue Default */
  --theme-bg-gradient-1: #39f;
  --theme-bg-gradient-2: #ffcc00;
  --theme-font-family: 'Press Start 2P', cursive;
  --theme-text-color: #333;
  --theme-header-text-color: #ffffff;
  --theme-card-bg: rgba(255, 255, 255, 0.9);
  --theme-card-border-color: #ffcc00; /* Sonic Gold Default */
  --theme-button-active-bg: #ffcc00;
  --theme-button-active-text: #333;
  --theme-button-inactive-bg: rgba(255, 255, 255, 0.5);
  --theme-button-inactive-text: #fff;
  --theme-spinner-color: #ffcc00;
  --theme-primary-accent: #333; /* For text that needs to stand out */
  --theme-button-submit-bg: #22c55e; /* green-500 */
  --theme-button-submit-hover-bg: #16a34a; /* green-600 */
  --theme-button-submit-disabled-bg: #9ca3af; /* gray-400 */
  --theme-button-submit-text: #ffffff;

  /* Character Card Specific Colors (defaults to Sonic's original styles) */
  --miitopia-personality-color: #ec4899; /* pink-500 */
  --splatoon-species-color-inkling: #84cc16; /* lime-500 */
  --splatoon-species-color-octoling: #22d3ee; /* cyan-400 */
  --splatoon-weapon-color: #9333ea; /* purple-600 */
  --ssbu-character-color: #dc2626; /* red-600 */
  --tomodachi-personality-color: #3b82f6; /* blue-500 */
  --tomodachi-fav-food-color: #22c55e; /* green-500 */
  --tomodachi-least-fav-food-color: #6b7280; /* gray-500 */
  --tomodachi-most-fav-food-color: #ef4444; /* red-500 */
  --tomodachi-relationship-color: #d946ef; /* pink-600 */
  --danganronpa-border-color: #ec4899; /* pink-500 */
  --danganronpa-character-match-color: #ec4899; /* pink-500 */
  --roblox-border-color: #dc2626; /* red-600 */
  --roblox-game-color: #dc2626; /* red-600 */
  --youtuber-border-color: #dc2626; /* red-600 */
  --youtuber-match-color: #dc2626; /* red-600 */
  --sml-character-match-color: #2563eb; /* blue-600 */
  --mmxd-border-color: #1d4ed8; /* blue-700 */
  --mmxd-character-match-color: #1d4ed8; /* blue-700 */
  --user-attribution-color: #6b7280; /* gray-500 */
  --stage-info-title-color: #6d28d9; /* purple-700 */
  --stage-info-text-color: #333;
  --stage-info-border-color: #facc15; /* yellow-400 */
  --challenger-form-bg: #f3f4f6; /* gray-200 */
  --challenger-form-border: #9ca3af; /* gray-300 */
  --challenger-form-text: #1f2937; /* gray-800 */
  --challenger-form-input-border: #e5e7eb; /* gray-300 */
  --challenger-form-input-focus: #3b82f6; /* blue-500 */
  --challenger-form-input-bg: #ffffff;
  --challenger-delete-button-bg: #dc2626; /* red-600 */
  --challenger-delete-button-hover-bg: #b91c1c; /* red-700 */
  --challenger-delete-button-text: #ffffff;
  --gallery-button-bg: #f3f4f6; /* gray-200 */
  --gallery-button-active-bg: #3b82f6; /* blue-500 */
  --gallery-button-active-text: #ffffff;
  --gallery-button-inactive-text: #4b5563; /* gray-600 */
  --gallery-loading-text: #ffffff;
  --gallery-error-text: #ef4444; /* red-500 */
  --gallery-card-hover-border: #9ca3af; /* gray-300 */
  --gallery-card-selected-border: #facc15; /* yellow-400 */
  --gallery-card-selected-bg: rgba(255,255,255,0.9);
  --gallery-card-inactive-bg: rgba(255,255,255,0.5);
  --gallery-card-text: #1f2937; /* gray-800 */
  --fusion-border-color: #ffcc00; /* Sonic gold default */
  --fusion-title-color: #333;
}

body {
  background-color: var(--theme-bg-base);
  background-image:
    radial-gradient(circle at 60% 90%, var(--theme-bg-gradient-1), transparent 50%),
    radial-gradient(circle at 10% 20%, var(--theme-bg-gradient-2), transparent 40%);
  font-family: var(--theme-font-family);
  color: var(--theme-text-color);
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1rem;
}

.header-title {
  color: var(--theme-header-text-color);
}

.card {
  background: var(--theme-card-bg);
  border: 4px solid var(--theme-card-border-color);
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
}

.job-icon {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: var(--theme-spinner-color);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Theme Button styles */
.theme-button.active {
    background-color: var(--theme-button-active-bg);
    color: var(--theme-button-active-text);
}

.theme-button.inactive {
    background-color: var(--theme-button-inactive-bg);
    color: var(--theme-button-inactive-text);
}

/* Submit Button styles */
.submit-button {
  background-color: var(--theme-button-submit-bg);
  color: var(--theme-button-submit-text);
}
.submit-button:hover:not(:disabled) {
  background-color: var(--theme-button-submit-hover-bg);
}
.submit-button:disabled {
  background-color: var(--theme-button-submit-disabled-bg);
}

/* Character Card Specific Styles */
.miitopia-card .personality-color {
  color: var(--miitopia-personality-color);
}
.splatoon-card .species-color-inkling {
    color: var(--splatoon-species-color-inkling);
}
.splatoon-card .species-color-octoling {
    color: var(--splatoon-species-color-octoling);
}
.splatoon-card .weapon-color {
    color: var(--splatoon-weapon-color);
}
.ssbu-card .character-color {
    color: var(--ssbu-character-color);
}
.tomodachi-card .personality-color {
    color: var(--tomodachi-personality-color);
}
.tomodachi-card .fav-food-color {
    color: var(--tomodachi-fav-food-color);
}
.tomodachi-card .least-fav-food-color {
    color: var(--tomodachi-least-fav-food-color);
}
.tomodachi-card .most-fav-food-color {
    color: var(--tomodachi-most-fav-food-color);
}
.tomodachi-card .relationship-color {
    color: var(--tomodachi-relationship-color);
}
.danganronpa-card {
    border-color: var(--danganronpa-border-color);
}
.danganronpa-card .character-match-color {
    color: var(--danganronpa-character-match-color);
}
.roblox-card {
    border-color: var(--roblox-border-color);
}
.roblox-card .game-color {
    color: var(--roblox-game-color);
}
.youtuber-card {
    border-color: var(--youtuber-border-color);
}
.youtuber-card .match-color {
    color: var(--youtuber-match-color);
}
.sml-card .match-color {
    color: var(--sml-character-match-color);
}
.mmxd-card {
    border-color: var(--mmxd-border-color);
}
.mmxd-card .match-color {
    color: var(--mmxd-character-match-color);
}
.fusion-card {
  border-color: var(--fusion-border-color);
}
.fusion-card .fusion-title-color {
  color: var(--fusion-title-color);
}

/* User attribution */
.user-attribution-text {
  color: var(--user-attribution-color);
}
.user-attribution-link {
  color: var(--user-attribution-color);
}

/* Stage Info Card */
.stage-info-card {
  border-color: var(--stage-info-border-color);
}
.stage-info-card .stage-info-title {
  color: var(--stage-info-title-color);
}
.stage-info-card .stage-info-text {
  color: var(--stage-info-text-color);
}

/* Challenger form styles */
.challenger-form-container {
    background-color: var(--challenger-form-bg);
    border-color: var(--challenger-form-border);
}
.challenger-form-text {
    color: var(--challenger-form-text);
}
.challenger-form-input {
    border-color: var(--challenger-form-input-border);
    background-color: var(--challenger-form-input-bg);
    color: var(--challenger-form-text);
}
.challenger-form-input:focus {
    border-color: var(--challenger-form-input-focus);
}
.challenger-delete-button {
    background-color: var(--challenger-delete-button-bg);
    color: var(--challenger-delete-button-text);
}
.challenger-delete-button:hover {
    background-color: var(--challenger-delete-button-hover-bg);
}

/* Gallery styles */
.gallery-buttons-container {
    background-color: var(--gallery-button-bg);
}
.gallery-button.active {
    background-color: var(--gallery-button-active-bg);
    color: var(--gallery-button-active-text);
}
.gallery-button.inactive {
    color: var(--gallery-button-inactive-text);
}
.gallery-loading-text {
    color: var(--gallery-loading-text);
}
.gallery-error-text {
    color: var(--gallery-error-text);
}
.gallery-character-card.selected {
    border-color: var(--gallery-card-selected-border);
    background-color: var(--gallery-card-selected-bg);
}
.gallery-character-card.not-selected {
    border-color: transparent;
    background-color: var(--gallery-card-inactive-bg);
}
.gallery-character-card:hover {
    border-color: var(--gallery-card-hover-border);
}
.gallery-character-card .text-color {
    color: var(--gallery-card-text);
}