@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Uncial+Antiqua&display=swap');

.font-cinzel {
  font-family: 'Cinzel', serif;
}

.font-uncial {
  font-family: 'Uncial Antiqua', cursive;
}

.pixel-art {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.ornate-frame {
  position: relative;
  background-image: 
    url('/api/retrodiffusion/image/64/64/texture?prompt=carved+stone+celtic+border+pattern+weathered&tile_x=true&tile_y=true');
  background-size: 64px 64px;
  box-shadow: 
    inset 0 0 0 8px #d97706,
    inset 0 0 0 16px #92400e,
    0 0 50px rgba(0, 0, 0, 0.8);
}

.ornate-frame::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -16px;
  right: -16px;
  bottom: -16px;
  background: linear-gradient(45deg, #451a03, #78350f, #92400e, #d97706);
  border-radius: 20px;
  z-index: -1;
}

.inventory-slot {
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #92400e, #451a03);
  box-shadow: 
    inset 2px 2px 4px rgba(217, 119, 6, 0.3),
    inset -2px -2px 4px rgba(0, 0, 0, 0.6);
}

.inventory-slot:hover {
  transform: translateY(-1px);
  box-shadow: 
    inset 2px 2px 4px rgba(217, 119, 6, 0.5),
    inset -2px -2px 4px rgba(0, 0, 0, 0.8),
    0 4px 8px rgba(217, 119, 6, 0.3);
}

.party-portrait {
  background: linear-gradient(135deg, #92400e, #451a03);
  box-shadow: 
    inset 1px 1px 2px rgba(217, 119, 6, 0.3),
    inset -1px -1px 2px rgba(0, 0, 0, 0.6);
}

.party-portrait:hover {
  transform: scale(1.05);
}

.character-panel {
  box-shadow: 
    inset 0 0 20px rgba(217, 119, 6, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.6);
}

.main-inventory,
.ground-panel,
.quick-sections > div {
  box-shadow: 
    inset 0 0 15px rgba(217, 119, 6, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #451a03;
}

::-webkit-scrollbar-thumb {
  background: #d97706;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f59e0b;
}

/* Rarity colors */
.border-gray-400 {
  border-color: #9ca3af !important;
}

.border-blue-400 {
  border-color: #60a5fa !important;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
}

.border-purple-400 {
  border-color: #a78bfa !important;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.3);
}

.border-orange-400 {
  border-color: #fb923c !important;
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.3);
}

.border-yellow-400 {
  border-color: #facc15 !important;
  box-shadow: 0 0 15px rgba(250, 204, 21, 0.4);
}

.text-blue-400 {
  color: #60a5fa !important;
}

.text-purple-400 {
  color: #a78bfa !important;
}

.text-orange-400 {
  color: #fb923c !important;
}

/* Text styling */
.text-yellow-200 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.text-yellow-100 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* Button hover effects */
button {
  transition: all 0.2s ease;
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

/* Dragging effects */
.inventory-slot img[draggable="true"] {
  cursor: grab;
}

.inventory-slot img[draggable="true"]:active {
  cursor: grabbing;
}

/* Animation for equipped items */
@keyframes equipGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.5); }
  50% { box-shadow: 0 0 15px rgba(34, 197, 94, 0.8); }
}

.equipment-slot {
  animation: equipGlow 2s infinite;
}