/*
  红歌圈子页面专属样式 (circle.css) - 标准 CSS 版本
*/

/* 整体网格布局 */
.content-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
  gap: 2rem; /* gap-8 */
}
@media (min-width: 1024px) { /* lg: */
  .content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* lg:grid-cols-2 */
  }
}
.map-container {
  width: 100%;
  height: 24rem; /* h-96 */
  border-width: 1px;
  border-radius: 0.5rem; /* rounded-lg */
}
@media (min-width: 1024px) { /* lg: */
  .map-container {
    height: 37.5rem; /* lg:h-[600px] */
  }
}

/* 搜索区域 */
.search-container {
  position: relative;
  margin-bottom: 1.5rem; /* mb-6 */
}
.search-input {
  width: 100%;
  padding-top: 0.75rem; /* py-3 */
  padding-bottom: 0.75rem;
  padding-left: 1rem; /* pl-4 */
  padding-right: 2.5rem; /* pr-10 */
  border-width: 1px;
  border-radius: 9999px; /* rounded-full */
  transition: box-shadow 0.2s;
}
.search-input:focus {
  outline: none;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: #ef4444; /* focus:ring-red-500 */
}
.search-button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding-left: 1.25rem; /* px-5 */
  padding-right: 1.25rem;
  color: #6b7280; /* text-gray-500 */
}
.search-button:hover {
  color: #dc2626; /* hover:text-red-600 */
}

/* 歌曲列表 */
.song-list-title {
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem;
  font-weight: 600; /* font-semibold */
  color: #374151; /* text-gray-700 */
  margin-bottom: 1rem; /* mb-4 */
}
.song-list-container {
  max-height: 30rem; /* max-h-[480px] */
  overflow-y: auto;
  padding-right: 0.5rem; /* pr-2 */
}
/* space-y-4 */
.song-list-container > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
}
.song-item {
  padding: 0.75rem; /* p-3 */
  background-color: #f9fafb; /* bg-gray-50 */
  border-radius: 0.5rem; /* rounded-lg */
  transition: background-color 0.3s;
}
.song-item:hover {
  background-color: #fee2e2; /* hover:bg-red-50 */
}
.song-item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.song-details {
  flex-grow: 1;
  margin-right: 1rem; /* mr-4 */
  min-width: 0;
}
.song-title {
  font-weight: 600; /* font-semibold */
  color: #1f2937; /* text-gray-800 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* truncate */
}
.song-artist {
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  color: #6b7280; /* text-gray-500 */
}
.song-region {
  color: #3b82f6; /* text-blue-500 */
}
.song-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* space-x-4 */
.song-controls > :not([hidden]) ~ :not([hidden]) {
    margin-left: 1rem;
}
.audio-player {
  height: 2rem; /* h-8 */
  width: 12rem; /* w-48 */
}
@media (min-width: 768px) { /* md: */
  .audio-player {
    width: 16rem; /* md:w-64 */
  }
}
.no-audio-text {
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  color: #9ca3af; /* text-gray-400 */
}
.song-description {
  margin-top: 0.5rem; /* mt-2 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  color: #4b5563; /* text-gray-600 */
  background-color: #f3f4f6; /* bg-gray-100 */
  padding: 0.5rem; /* p-2 */
  border-radius: 0.25rem; /* rounded */
}

/* +1 动画效果 */
.plus-one-indicator {
  position: absolute;
  top: 0;
  right: 15.5rem;
  color: #ef4444; /* text-red-500 */
  font-weight: 900; /* font-bold */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.5rem); /* -translate-y-2 */
}

@keyframes plus-one-animation {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(1.5);
    }
}

.plus-one-anim {
    animation: plus-one-animation 0.6s ease-out forwards;
}