@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/mc_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);
}

.map-tile {
  transition: all 0.2s ease;
  cursor: pointer;
}

.map-tile:hover {
  transform: scale(1.1);
  z-index: 10;
}

.action-button {
  transition: all 0.2s ease;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.action-button:active {
  transform: translateY(0);
}

.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);
}

.party-member {
  transition: all 0.2s ease;
}

.party-member:hover {
  transform: translateX(2px);
}

.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,
.party-status,
.quick-actions,
.minimap,
.combat-log,
.ground-items,
.game-map,
.action-panel {
  box-shadow: 
    inset 0 0 15px rgba(217, 119, 6, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #451a03;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #d97706;
  border-radius: 3px;
}

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

/* Standard scrollbar */
::-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 with glow effects */
.border-gray-400 {
  border-color: #9ca3af !important;
}

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

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

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

.border-yellow-400 {
  border-color: #facc15 !important;
  box-shadow: 0 0 15px rgba(250, 204, 21, 0.6), inset 0 0 8px rgba(250, 204, 21, 0.3);
  animation: legendaryPulse 2s ease-in-out infinite alternate;
}

@keyframes legendaryPulse {
  from { box-shadow: 0 0 15px rgba(250, 204, 21, 0.6), inset 0 0 8px rgba(250, 204, 21, 0.3); }
  to { box-shadow: 0 0 25px rgba(250, 204, 21, 0.8), inset 0 0 12px rgba(250, 204, 21, 0.5); }
}

/* Text colors for tooltips */
.text-blue-400 {
  color: #60a5fa !important;
  text-shadow: 0 0 5px rgba(96, 165, 250, 0.5);
}

.text-purple-400 {
  color: #a78bfa !important;
  text-shadow: 0 0 5px rgba(167, 139, 250, 0.5);
}

.text-orange-400 {
  color: #fb923c !important;
  text-shadow: 0 0 5px rgba(251, 146, 60, 0.5);
}

.text-yellow-400 {
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
}

/* 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;
}

/* Health bar animations */
@keyframes healthPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.bg-red-500 {
  animation: healthPulse 1s ease-in-out infinite;
}

/* Combat effects */
@keyframes combatShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.combat-effect {
  animation: combatShake 0.5s ease-in-out;
}

/* Exploration animations */
@keyframes treasureGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(250, 204, 21, 0.5); }
  50% { box-shadow: 0 0 15px rgba(250, 204, 21, 0.8); }
}

.bg-yellow-500 {
  animation: treasureGlow 2s ease-in-out infinite;
}

@keyframes enemyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.bg-red-500 {
  animation: enemyPulse 1.5s ease-in-out infinite;
}

/* Equipment glow when equipped */
@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;
}

/* Responsive adjustments */
@media (max-width: 1280px) {
  .action-button {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .inventory-slot {
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (max-width: 1024px) {
  .ornate-frame {
    border-width: 4px;
  }
  
  .character-panel {
    border-width: 2px;
  }
}