/* CSS Custom Properties for responsive design */
:root {
  --expanded-card-width: clamp(28vw, 36vw, 44vw);
  --expanded-card-height: clamp(50vh, 70vh, 80vh);
  --expanded-card-left-margin: clamp(1vw, 2vw, 3vw);
  --left-section-width: clamp(15vw, 18vw, 22vw);
  --card-padding: clamp(0.3rem, 0.7vw, 0.8rem);
  --border-radius: clamp(0.3rem, 0.6vw, 0.8rem);
  --font-size-title: clamp(1.2rem, 2.5vw, 2rem);
  --font-size-subtitle: clamp(0.9rem, 1.8vw, 1.2rem);
  --font-size-body: clamp(0.8rem, 1.5vw, 1rem);
  --font-size-meta: clamp(0.7rem, 1.1vw, 0.9rem);
  --button-size: clamp(1.8rem, 3vw, 2.5rem);
  --image-border-width: clamp(2px, 0.3vw, 4px);
}

/* Base expanded card styling (common to all types) */
.expanded-card {
  position: absolute;
  top: 0;
  left: clamp(-3rem, -5vw, -4rem);
  width: calc(100% + clamp(6rem, 10vw, 8rem));
  height: auto;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  z-index: 30;
  pointer-events: none;
}

.expanded-card.expanded {
  position: fixed !important;
  width: var(--expanded-card-width) !important;
  height: auto;
  max-height: var(--expanded-card-height);
  top: 50% !important;
  left: var(--expanded-card-left-margin) !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 clamp(0.7rem, 1.5vw, 2rem) clamp(1.8rem, 3vw, 4rem) rgba(0, 0, 0, 0.7);
  background: #1a1a1a;
  border: clamp(1px, 0.1vw, 2px) solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius);
  overflow: hidden;
  z-index: 9999 !important;
  opacity: 1;
  pointer-events: auto !important;
  animation: expandCardAnimation 0.5s forwards;
  display: flex !important;
  flex-direction: row !important;
}

/* Book expanded card */
.expanded-card.expanded.book-expanded {
  background: linear-gradient(145deg, #261403 0%, #40241e 100%); 
  border: clamp(1px, 0.15vw, 3px) solid #b08d57; 
}

.expanded-card.expanded.book-expanded .left-section {
  background: rgba(0, 0, 0, 0.2);
  border-right: clamp(1px, 0.1vw, 2px) solid rgba(176, 141, 87, 0.3);
}

.expanded-card.expanded.book-expanded .meta-container span {
  border-bottom: clamp(1px, 0.05vw, 2px) solid rgba(176, 141, 87, 0.3);
}

.expanded-card.expanded.book-expanded .meta-container span strong {
  color: #b08d57; /* Golden color for labels */
}

/* Game expanded card */
.expanded-card.expanded.game-expanded {
  background: linear-gradient(145deg, #05374a, #260220); 
  border: clamp(1px, 0.15vw, 3px) solid #196875; /* Neon blue border for a tech-inspired look */
}

.expanded-card.expanded.game-expanded .left-section {
  background: rgba(0, 0, 0, 0.3);
  border-right: clamp(1px, 0.1vw, 2px) solid rgba(25, 104, 117, 0.4);
}

.expanded-card.expanded.game-expanded .meta-container span {
  border-bottom: clamp(1px, 0.05vw, 2px) solid rgba(25, 104, 117, 0.3);
}

.expanded-card.expanded.game-expanded .meta-container span strong {
  color: #3fcbe0; /* Neon blue color for labels */
}

.expanded-card.expanded.game-expanded h3 {
  color: #e0f7fc; /* Bright blue-white for game titles */
  text-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(63, 203, 224, 0.3);
}

/* Movie expanded card */
.expanded-card.expanded.movie-expanded {
  background: linear-gradient(145deg, #000, #4b0d0d); /* Deep red-black gradient for cinema feel */
  border: clamp(1px, 0.15vw, 3px) solid #9b4d5f;
}

.expanded-card.expanded.movie-expanded .left-section {
  background: rgba(0, 0, 0, 0.3);
  border-right: clamp(1px, 0.1vw, 2px) solid rgba(155, 77, 95, 0.3);
}

.expanded-card.expanded.movie-expanded .meta-container span {
  border-bottom: clamp(1px, 0.05vw, 2px) solid rgba(155, 77, 95, 0.3);
}

.expanded-card.expanded.movie-expanded .meta-container span strong {
  color: #ff8a9e; /* Soft red color for labels */
}

.expanded-card.expanded.movie-expanded h3 {
  color: #fff0f3; /* Soft white for movie titles */
  text-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(155, 77, 95, 0.3);
}

/* TV Show expanded card */
.expanded-card.expanded.tvshow-expanded {
  background: linear-gradient(145deg, #000409, #04214e); /* Deep blue gradient */
  border: clamp(1px, 0.15vw, 3px) solid #3d5afe;
}

.expanded-card.expanded.tvshow-expanded .left-section {
  background: rgba(0, 0, 0, 0.3);
  border-right: clamp(1px, 0.1vw, 2px) solid rgba(61, 90, 254, 0.3);
}

.expanded-card.expanded.tvshow-expanded .meta-container span {
  border-bottom: clamp(1px, 0.05vw, 2px) solid rgba(61, 90, 254, 0.3);
}

.expanded-card.expanded.tvshow-expanded .meta-container span strong {
  color: #8c96ff; /* Soft blue color for labels */
}

.expanded-card.expanded.tvshow-expanded h3 {
  color: #e6e9ff; /* Soft white-blue for TV show titles */
  text-shadow: 0 clamp(0.1rem, 0.3vw, 0.4rem) clamp(0.3rem, 1vw, 0.8rem) rgba(61, 90, 254, 0.3);
}

/* Add subtle scan lines effect to TV expanded cards */
.expanded-card.expanded.tvshow-expanded::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0px,
    rgba(255, 255, 255, 0) 3px,
    rgba(255, 255, 255, 0.03) 3px,
    rgba(255, 255, 255, 0.03) 6px
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}

/* Left section with image and metadata */
.expanded-card.expanded .left-section {
  width: var(--left-section-width);
  min-width: var(--left-section-width);
  max-width: var(--left-section-width);
  height: calc(var(--expanded-card-height) - var(--card-padding) * 2);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  border-right: clamp(1px, 0.1vw, 2px) solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

/* Right section with title, author and description */
.expanded-card.expanded .right-section {
  flex: 1;
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* Always scrollable */
  max-height: calc(var(--expanded-card-height) - var(--card-padding) * 2);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
}

/* Image containers in expanded cards based on media type */
/* Responsive image container: always portrait, never overflows, shrinks on small screens */
.expanded-card.expanded .image-container {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 2/3;
  height: auto;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: clamp(0.2rem, 0.5vw, 0.8rem);
  padding: clamp(0.2rem, 0.5vw, 0.8rem);
  background-color: #1a1a1a;
  box-sizing: border-box;
}


.expanded-card.expanded.book-expanded .image-container {
  border: var(--image-border-width) solid #b08d57; /* Match book style */
  background-color: #200f05;
}

.expanded-card.expanded.game-expanded .image-container {
  border: var(--image-border-width) solid #196875; /* Match game style */
  background-color: #021019;
}

.expanded-card.expanded.movie-expanded .image-container {
  border: var(--image-border-width) solid rgba(255, 255, 255, 0.927); /* Match movie style */
  background-color: #1a0505;
}

.expanded-card.expanded.tvshow-expanded .image-container {
  border: var(--image-border-width) solid #3d5afe8a; /* Match TV show style */
  background-color: #0a1a2f;
  box-shadow: 0 0 clamp(0.5rem, 1.5vw, 1.2rem) rgba(61, 90, 254, 0.3);
}

/* Images for all expanded card types */
/* Images always fit inside the container, never overflow, always portrait */
.expanded-card.expanded .book-image,
.expanded-card.expanded .item-image,
.expanded-card.expanded .movie-image,
.expanded-card.expanded .tvshow-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 0;
  background-color: transparent;
  display: block;
}

/* Updated metadata styling to match test2.html */
.expanded-card.expanded .meta-container {
  overflow-y: auto;
  flex-grow: 1;
  max-height: clamp(8rem, 18vh, 12rem);
  font-size: var(--font-size-meta);
  padding-right: clamp(0.2rem, 0.5vw, 0.8rem);
  margin-top: clamp(0.5rem, 1vw, 1rem);
  scrollbar-width: thin;
}

.expanded-card.expanded .meta-container span {
  display: block;
  margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
  color: #ddd;
  padding-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
  border-bottom: clamp(1px, 0.05vw, 2px) solid rgba(255, 255, 255, 0.05);
}

.expanded-card.expanded .meta-container span strong {
  display: block;
  color: #aaa;
  font-weight: normal;
  margin-bottom: clamp(0.15rem, 0.3vw, 0.25rem);
  font-size: clamp(0.7rem, 1.1vw, 0.85rem);
}

.expanded-card.expanded h3 {
  font-size: var(--font-size-title) !important;
  margin: 0 0 clamp(0.3rem, 0.6vw, 0.5rem) 0 !important;
  color: white;
  font-weight: 600;
  text-shadow: 0 clamp(0.1rem, 0.3vw, 0.3rem) clamp(0.2rem, 0.4vw, 0.35rem) rgba(0, 0, 0, 0.3);
}

.expanded-card.expanded .book-author,
.expanded-card.expanded .game-developer,
.expanded-card.expanded .movie-production,
.expanded-card.expanded .tvshow-creator {
  font-size: var(--font-size-subtitle);
  margin-bottom: clamp(0.7rem, 1.2vw, 1rem);
  color: #9c9c9c;
}

/* Description section styling - ensure consistent height */
.expanded-card.expanded .description-container {
  margin-top: clamp(0.7rem, 1.2vw, 1rem);
  margin-bottom: clamp(1rem, 1vw, 3rem);
  min-height: clamp(12rem, 25vh, 18rem) !important;
  display: block;
  flex-grow: 0 !important; /* Prevent shrinking when other elements grow */
}

/* Amazon search button styling */
.expanded-card.expanded .amazon-search-btn {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.8vw, 0.6rem);
  padding: clamp(0.1rem, 0.1vw, 0.6rem) clamp(0.8rem, 1.5vw, 1.2rem);
  border-radius: clamp(0.3rem, 0.6vw, 0.5rem);
  border: clamp(1.5px, 0.15vw, 2px) solid;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 600;
  text-decoration: none;
  margin-bottom: clamp(1rem, 1vw, 3rem);
  text-align: center;
  justify-content: center;
}

.expanded-card.expanded .amazon-search-btn .amazon-text {
  order: 1;
}

.expanded-card.expanded .amazon-search-btn img {
  height: clamp(1.3rem, 2.5vw, 2rem);
  width: auto;
  flex-shrink: 0;
  order: 2;
  margin-top: clamp(1.1rem, 1.1vw, 0.15rem);
}

.expanded-card.expanded .amazon-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 clamp(0.2rem, 0.4vw, 0.3rem) clamp(0.6rem, 1.2vw, 1rem) rgba(0, 0, 0, 0.2);
}

/* Book Amazon button styling */
.expanded-card.expanded.book-expanded .amazon-search-btn {
  background: linear-gradient(145deg, rgba(204, 143, 12, 0.736), rgba(255, 215, 128, 0.55));
  border-color: rgba(255, 215, 128, 0.8);
  color: #ffd780;
}

.expanded-card.expanded.book-expanded .amazon-search-btn:hover {
  
  transform: translateY(-2px);
  box-shadow: 0 clamp(0.3rem, 0.6vw, 0.5rem) clamp(1rem, 2vw, 1.5rem) rgba(255, 255, 255, 0.1), 0 0 clamp(0.8rem, 1.5vw, 1.2rem) rgba(255, 174, 0, 0.377);
}

/* Game Amazon button styling */
.expanded-card.expanded.game-expanded .amazon-search-btn {
  background: linear-gradient(145deg, rgba(5, 85, 85, 0.67), rgba(63, 255, 255, 0.55));
  border-color: rgba(63, 255, 255, 0.8);
  color: #3fffff;
}

.expanded-card.expanded.game-expanded .amazon-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 clamp(0.3rem, 0.6vw, 0.5rem) clamp(1rem, 2vw, 1.5rem) rgba(255, 255, 255, 0.1), 0 0 clamp(0.8rem, 1.5vw, 1.2rem) rgba(191, 0, 255, 0.377);
}

/* Movie Amazon button styling */
.expanded-card.expanded.movie-expanded .amazon-search-btn {
  background: linear-gradient(145deg, rgba(175, 4, 33, 0.925), rgba(255, 138, 158, 0.55));
  border-color: rgba(255, 138, 158, 0.8);
  color: #ff8a9e;
}

.expanded-card.expanded.movie-expanded .amazon-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 clamp(0.3rem, 0.6vw, 0.5rem) clamp(1rem, 2vw, 1.5rem) rgba(255, 255, 255, 0.1), 0 0 clamp(0.8rem, 1.5vw, 1.2rem) rgba(195, 84, 84, 0.618);
}

/* TV Show Amazon button styling */
.expanded-card.expanded.tvshow-expanded .amazon-search-btn {
  background: linear-gradient(145deg, rgba(19, 33, 189, 0.749), rgba(140, 150, 255, 0.55));
  border-color: rgba(153, 157, 201, 0.8);
  color: #8c96ff;
}

.expanded-card.expanded.tvshow-expanded .amazon-search-btn:hover {

  transform: translateY(-2px);
  box-shadow: 0 clamp(0.3rem, 0.6vw, 0.5rem) clamp(1rem, 2vw, 1.5rem) rgba(255, 255, 255, 0.1), 0 0 clamp(0.8rem, 1.5vw, 1.2rem) rgba(13, 13, 198, 0.71);
}

.expanded-card.expanded .description {
  padding-right: clamp(0.4rem, 0.8vw, 0.6rem);
  font-size: var(--font-size-body);
  line-height: 1.5;
  color: #ddd;
  height: clamp(12rem, 25vh, 18rem);
  min-height: clamp(12rem, 25vh, 18rem);
  max-height: clamp(12rem, 25vh, 18rem);
  overflow-y: auto;
  display: block;
  margin-bottom: clamp(0.7rem, 1.2vw, 1rem);
}

/* Fix for description container to prevent it from shrinking when locations list grows */
.expanded-card.expanded .right-section {
  display: flex;
  flex-direction: column;
}

.expanded-card.expanded .right-section h3,
.expanded-card.expanded .book-author,
.expanded-card.expanded .game-developer,
.expanded-card.expanded .movie-production,
.expanded-card.expanded .tvshow-creator {
  flex-shrink: 0; /* Prevent title from shrinking */
}

.expanded-card.expanded .description-container {
  flex-shrink: 0; /* Prevent description from shrinking */
  flex-grow: 0;
}

.expanded-card.expanded .locations-heading,
.expanded-card.expanded .highlight-locations-btn {
  flex-shrink: 0; /* Prevent headers and buttons from shrinking */
}

.expanded-card.expanded .description {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 10px;
  font-size: 0.95em;
  line-height: 1.6;
  color: #ddd;
  max-height: 300px;
}

.expanded-card.expanded .close-btn {
  position: absolute;
  top: var(--card-padding);
  right: var(--card-padding);
  width: var(--button-size);
  height: var(--button-size);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: clamp(1px, 0.1vw, 2px) solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: clamp(0.9rem, 1.6vw, 1.2rem);
  z-index: 25;
  transition: all 0.2s ease;
}

.expanded-card.expanded .close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Video player toggle button - repositioned below close button */
.video-player-btn {
  position: absolute;
  top: calc(var(--button-size) + var(--card-padding) * 2);
  right: var(--card-padding);
  width: var(--button-size);
  height: var(--button-size);
  background: rgba(63, 203, 224, 0.6);
  color: #fff;
  border: clamp(1px, 0.1vw, 2px) solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: clamp(0.9rem, 1.6vw, 1.2rem);
  z-index: 25;
  transition: all 0.2s ease;
  box-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(63, 203, 224, 0.4);
}

.video-player-btn:hover {
  background: rgba(63, 203, 224, 0.9);
  transform: scale(1.1);
  box-shadow: 0 0 clamp(0.5rem, 1.5vw, 1.2rem) rgba(63, 203, 224, 0.8);
}

/* Common location section styling for all expanded card types */
.expanded-card.expanded .locations-heading {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
  display: block;
}

.expanded-card.expanded .locations-heading h4 {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
}

/* Update the location list to be responsive to content */
.expanded-card.expanded .locations-list {
  min-height: auto; /* Allow it to shrink based on content */
  max-height: clamp(10rem, 25vh, 15rem); /* Maximum height before scrolling */
  height: auto; /* Auto height based on content */
  overflow-y: auto;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  border-radius: clamp(0.2rem, 0.4vw, 0.3rem);
  padding: clamp(0.4rem, 0.8vw, 0.6rem);
  border-width: clamp(1px, 0.1vw, 2px);
  border-style: solid;
  background-color: rgba(0, 0, 0, 0.1);
  transition: height 0.3s ease; /* Smooth height transitions */
}

/* Make location items take natural space */
.expanded-card.expanded .location-item {
  padding: clamp(0.3rem, 0.6vw, 0.5rem) clamp(0.4rem, 0.8vw, 0.6rem);
  border-radius: clamp(0.15rem, 0.3vw, 0.25rem);
  margin-bottom: clamp(0.3rem, 0.6vw, 0.4rem);
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: var(--font-size-body);
}

/* Ensure that "No locations found" message doesn't take full height */
.expanded-card.expanded .no-locations {
  padding: 8px;
  text-align: center;
  font-style: italic;
  color: #888;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* Override any previously conflicting max-height values */
.expanded-card.expanded.book-expanded .locations-list,
.expanded-card.expanded.game-expanded .locations-list,
.expanded-card.expanded.movie-expanded .locations-list,
.expanded-card.expanded.tvshow-expanded .locations-list {
  /* These will be set dynamically by JavaScript */
  min-height: auto;
  max-height: 200px; /* Only limit is at the top end */
  height: auto;
}

/* Book card specific location styling */
.expanded-card.expanded.book-expanded .locations-heading h4 {
  color: #b08d57;
  text-shadow: 0 0 clamp(0.2rem, 0.5vw, 0.4rem) rgba(176, 141, 87, 0.3);
}

.expanded-card.expanded.book-expanded .locations-list {
  border-color: rgba(176, 141, 87, 0.2);
  background-color: rgba(176, 141, 87, 0.05);
}

.expanded-card.expanded.book-expanded .location-item:hover {
  background-color: rgba(176, 141, 87, 0.2);
}

.expanded-card.expanded.book-expanded .highlight-locations-btn {
  background: rgba(176, 141, 87, 0.2);
  border: clamp(1px, 0.1vw, 2px) solid rgba(176, 141, 87, 0.4);
  color: #b08d57;
}

.expanded-card.expanded.book-expanded .highlight-locations-btn:hover {
  background: rgba(176, 141, 87, 0.4);
}

/* Game card specific location styling */
.expanded-card.expanded.game-expanded .locations-heading h4 {
  color: #3fcbe0;
  text-shadow: 0 0 clamp(0.2rem, 0.5vw, 0.4rem) rgba(63, 203, 224, 0.3);
}

.expanded-card.expanded.game-expanded .locations-list {
  border-color: rgba(25, 104, 117, 0.2);
  background-color: rgba(25, 104, 117, 0.05);
}

.expanded-card.expanded.game-expanded .location-item:hover {
  background-color: rgba(63, 203, 224, 0.2);
}

.expanded-card.expanded.game-expanded .highlight-locations-btn {
  background: rgba(63, 203, 224, 0.2);
  border: clamp(1px, 0.1vw, 2px) solid rgba(63, 203, 224, 0.4);
  color: #3fcbe0;
}

.expanded-card.expanded.game-expanded .highlight-locations-btn:hover {
  background: rgba(63, 203, 224, 0.4);
}

/* Movie card specific location styling */
.expanded-card.expanded.movie-expanded .locations-heading h4 {
  color: #ff8a9e;
  text-shadow: 0 0 clamp(0.2rem, 0.5vw, 0.4rem) rgba(155, 77, 95, 0.3);
}

.expanded-card.expanded.movie-expanded .locations-list {
  border-color: rgba(155, 77, 95, 0.2);
  background-color: rgba(155, 77, 95, 0.05);
}

.expanded-card.expanded.movie-expanded .location-item:hover {
  background-color: rgba(155, 77, 95, 0.2);
}

.expanded-card.expanded.movie-expanded .highlight-locations-btn {
  background: rgba(155, 77, 95, 0.2);
  border: clamp(1px, 0.1vw, 2px) solid rgba(155, 77, 95, 0.4);
  color: #ff8a9e;
}

.expanded-card.expanded.movie-expanded .highlight-locations-btn:hover {
  background: rgba(155, 77, 95, 0.4);
}

/* TV Show card specific location styling */
.expanded-card.expanded.tvshow-expanded .locations-heading h4 {
  color: #8c96ff;
  text-shadow: 0 0 clamp(0.2rem, 0.5vw, 0.4rem) rgba(61, 90, 254, 0.3);
}

.expanded-card.expanded.tvshow-expanded .locations-list {
  border-color: rgba(61, 90, 254, 0.2);
  background-color: rgba(61, 90, 254, 0.05);
}

.expanded-card.expanded.tvshow-expanded .location-item:hover {
  background-color: rgba(61, 90, 254, 0.2);
}

.expanded-card.expanded.tvshow-expanded .highlight-locations-btn {
  background: rgba(61, 90, 254, 0.2);
  border: clamp(1px, 0.1vw, 2px) solid rgba(61, 90, 254, 0.4);
  color: #8c96ff;
}

.expanded-card.expanded.tvshow-expanded .highlight-locations-btn:hover {
  background: rgba(61, 90, 254, 0.4);
}

/* Common button styling */
.expanded-card.expanded .highlight-locations-btn {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.8rem, 1.5vw, 1.2rem);
  border-radius: clamp(0.2rem, 0.4vw, 0.3rem);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-body);
}

.expanded-card.collapsing {
  animation: collapseCardAnimation 0.3s forwards;
}

/* Animations */
@keyframes expandCardAnimation {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes collapseCardAnimation {
  0% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(0.95);
  }
}

/* Pretty scrollbars */
.expanded-card .description::-webkit-scrollbar,
.expanded-card .meta-container::-webkit-scrollbar {
  width: 6px;
}

.expanded-card .description::-webkit-scrollbar-track,
.expanded-card .meta-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.expanded-card .description::-webkit-scrollbar-thumb,
.expanded-card .meta-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.expanded-card .description::-webkit-scrollbar-thumb:hover,
.expanded-card .meta-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Improved location section styling for game cards to match book cards */
.expanded-card.expanded.game-expanded .locations-heading {
  margin-top: 20px !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.expanded-card.expanded.game-expanded .locations-heading h4 {
  color: #3fcbe0;
  font-size: 1.1em;
  margin: 0;
  text-shadow: 0 0 5px rgba(63, 203, 224, 0.3);
}

.expanded-card.expanded.game-expanded .locations-list {
  max-height: 450px !important; /* More space for locations */
  overflow-y: auto !important;
  margin-bottom: 20px !important; /* More space below */
  display: block !important;
  border: 1px solid rgba(25, 104, 117, 0.2);
  border-radius: 4px;
  padding: 8px;
  background-color: rgba(25, 104, 117, 0.05);
}

.expanded-card.expanded.game-expanded .location-item {
  padding: 5px 8px;
  border-radius: 3px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.expanded-card.expanded.game-expanded .location-item:hover {
  background-color: rgba(63, 203, 224, 0.2);
}

/* Make sure right section has proper scrolling for game cards with videos */
.expanded-card.expanded.game-expanded .right-section.with-videos {
  max-height: 500px;
  overflow-y: auto;
  scrollbar-width: auto;
  padding-right: 15px;
  padding-bottom: 30px;
}



.expanded-card.expanded.game-expanded .description {
  font-size: 0.95em;
  line-height: 1.6;
  color: #ddd;
  max-height: 180px !important;
  margin-bottom: 15px;
  overflow-y: auto;
  display: block !important;
}

/* Movie expanded card */
.expanded-card.expanded.movie-expanded .video-player-btn {
  position: absolute;
  top: 50px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(155, 77, 95, 0.6);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  z-index: 25;
  transition: all 0.2s ease;
  box-shadow: 0 0 10px rgba(155, 77, 95, 0.4);
}

.expanded-card.expanded.movie-expanded .video-player-btn:hover {
  background: rgba(155, 77, 95, 0.9);
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(155, 77, 95, 0.8);
}

/* Make sure right section has proper scrolling for movie cards with videos */
.expanded-card.expanded.movie-expanded .right-section.with-videos {
  max-height: 500px;
  overflow-y: auto;
  scrollbar-width: auto;
  padding-right: 15px;
  padding-bottom: 30px;
}


.expanded-card.expanded.movie-expanded .description {
  font-size: 0.95em;
  line-height: 1.6;
  color: #ddd;
  max-height: 180px !important;
  margin-bottom: 15px;
  overflow-y: auto;
  display: block !important;
}

/* Media queries for responsive expanded cards */

/* Large screens (desktops) - Keep left-positioned rectangular design */
@media (min-width: 1400px) {
  .expanded-card.expanded {
    width: clamp(40vw, 45vw, 70vw) !important;
    max-height: clamp(40vh, 70vh, 80vh);
    left: 2vw !important;
  }
  .expanded-card.expanded .left-section {
    width: 17vw;
    min-width: 17vw;
    max-width: 17vw;
    height: clamp(40vh, 70vh, 80vh);
  }
}

@media (min-width: 1024px) and (max-width: 1399px) {
  .expanded-card.expanded {
    width: clamp(40vw, 55vw, 70vw) !important;
    max-height: clamp(40vh, 55vh, 80vh);
    left: 2vw !important;
  }
  .expanded-card.expanded .left-section {
    width: 17vw;
    min-width: 17vw;
    max-width: 17vw;
    height: clamp(40vh, 70vh, 80vh);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .expanded-card.expanded {
    width: clamp(40vw, 55vw, 70vw) !important;
    max-height: clamp(40vh, 55vh, 80vh);
    left: 2vw !important;
  }
  .expanded-card.expanded .left-section {
    width: 25vw;
    min-width: 25vw;
    max-width: 25vw;
    height: clamp(40vh, 70vh, 80vh);
  }
  
}

@media (max-width: 767px) {
  .expanded-card.expanded {
    width: clamp(40vw, 45vw, 70vw) !important;
    max-height: clamp(40vh, 70vh, 80vh);
    left: 2vw !important;
  }
  .expanded-card.expanded .left-section {
    width: 17vw;
    min-width: 17vw;
    max-width: 17vw;
    height: clamp(40vh, 70vh, 80vh);
  }

}