/* Responsive Card Styles */

/* Base card styles */
.card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  cursor: grab;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
  z-index: 1;
  /* Smaller minimum sizes for vertical screens */
  min-width: 40px;
  min-height: 40px;
}

.card:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.card:active {
  cursor: grabbing;
}

.card.dragging {
  z-index: 1000;
}

/* Responsive card sizes */
@media (max-width: 640px) {
  /* Mobile */
  .card {
    width: 60px !important;
    height: 60px !important;
  }
  
  .card img {
    width: 90% !important;
    height: 90% !important;
  }
  
  /* Adjust main title for mobile */
  #main-title {
    font-size: 24px !important;
    max-width: 80vw !important;
  }
  
  #main-title span {
    font-size: 20px !important;
  }
}

/* Vertical orientation specific styles */
@media (max-width: 800px) and (orientation: portrait) {
  .card {
    width: 55px !important;
    height: 55px !important;
  }
  
  .card img {
    width: 85% !important;
    height: 85% !important;
  }
  
  #main-title {
    font-size: 22px !important;
    max-width: 75vw !important;
  }
  
  #main-title span {
    font-size: 18px !important;
  }
}

/* Small vertical screens */
@media (max-width: 480px) and (orientation: portrait) {
  .card {
    width: 50px !important;
    height: 50px !important;
  }
}

/* Extra small vertical screens */
@media (max-width: 360px) and (orientation: portrait) {
  .card {
    width: 40px !important;
    height: 40px !important;
  }
  
  .card img {
    width: 80% !important;
    height: 80% !important;
  }
  
  #main-title {
    font-size: 18px !important;
    max-width: 85vw !important;
  }
  
  #main-title span {
    font-size: 16px !important;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  /* Tablet */
  .card {
    width: 70px !important;
    height: 70px !important;
  }
  
  .card img {
    width: 90% !important;
    height: 90% !important;
  }
  
  /* Adjust main title for tablet */
  #main-title {
    font-size: 28px !important;
    max-width: 85vw !important;
  }
  
  #main-title span {
    font-size: 24px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Small desktop */
  .card {
    width: 80px !important;
    height: 80px !important;
  }
  
  /* Adjust main title for small desktop */
  #main-title {
    font-size: 32px !important;
  }
  
  #main-title span {
    font-size: 28px !important;
  }
}

@media (min-width: 1025px) {
  /* Large desktop */
  .card {
    width: 90px !important;
    height: 90px !important;
  }
}

/* Detail window responsive styles */
@media (max-width: 640px) {
  #card-detail-window {
    width: calc(100% - 40px) !important;
    max-height: 80vh !important;
    left: 20px !important;
    right: 20px !important;
  }
  
  .card-detail-header {
    padding: 12px 16px !important;
  }
  
  .card-detail-content {
    padding: 16px !important;
  }
  
  .card-detail-title {
    font-size: 1.25rem !important;
  }
  
  .card-detail-text {
    font-size: 1rem !important;
  }
}

/* Ensure cards are contained within the viewport */
@media (max-height: 500px) {
  .card {
    width: 50px !important;
    height: 50px !important;
  }
  
  #main-title {
    font-size: 20px !important;
  }
  
  #main-title span {
    font-size: 18px !important;
  }
}

/* Ensure cards are visible on very small screens */
@media (max-width: 320px), (max-height: 400px) {
  .card {
    width: 40px !important;
    height: 40px !important;
  }
  
  #main-title {
    font-size: 18px !important;
    max-width: 90vw !important;
  }
  
  #main-title span {
    font-size: 16px !important;
  }
}