Added Genre and Tags

AnimeAnnouncer.Web/Pages/Index.cshtml

@@ -117,6 +117,30 @@
                                 }
                             </div>
 
+                            @if (show.Genres.Count > 0 || show.Tags.Count > 0)
+                            {
+                                <div class="airing-taxonomy">
+                                    @foreach (var genre in show.Genres)
+                                    {
+                                        <span class="genre-chip">@genre</span>
+                                    }
+                                    @foreach (var tag in show.VisibleTags)
+                                    {
+                                        <span class="tag-chip">#@tag</span>
+                                    }
+                                    @if (show.OverflowTags.Count > 0)
+                                    {
+                                        <details class="tag-overflow">
+                                            <summary class="tag-chip tag-more">+@show.OverflowTags.Count more</summary>
+                                            @foreach (var tag in show.OverflowTags)
+                                            {
+                                                <span class="tag-chip">#@tag</span>
+                                            }
+                                        </details>
+                                    }
+                                </div>
+                            }
+
                             @if (show.EpisodeProgressPercent.HasValue)
                             {
                                 <div class="airing-progress" title="@show.LatestEpisodeNumber of @show.TotalEpisodes episodes aired">

AnimeAnnouncer.Web/Pages/Index.cshtml.cs

@@ -158,6 +158,42 @@ public class IndexModel : PageModel
             }
         }
 
+        // --- Genres & tags ---------------------------------------------------
+
+        /// <summary>How many tags are shown before the rest are tucked behind a "more" toggle.</summary>
+        public const int VisibleTagCount = 10;
+
+        /// <summary>
+        /// Genres from both sources, AniList first. TMDB's "Animation" genre is dropped since every
+        /// show on this page is anime, so it carries no information.
+        /// </summary>
+        public List<string> Genres => MergeDistinct(AnilistDetails?.Genres, CachedDetails?.Genres)
+            .Where(g => !string.Equals(g, "Animation", StringComparison.OrdinalIgnoreCase))
+            .ToList();
+
+        /// <summary>AniList tags followed by TMDB keywords, minus anything already listed as a genre.</summary>
+        public List<string> Tags
+        {
+            get
+            {
+                var genres = new HashSet<string>(Genres, StringComparer.OrdinalIgnoreCase);
+                return MergeDistinct(AnilistDetails?.Tags, CachedDetails?.Keywords)
+                    .Where(t => !genres.Contains(t))
+                    .ToList();
+            }
+        }
+
+        public List<string> VisibleTags => Tags.Take(VisibleTagCount).ToList();
+        public List<string> OverflowTags => Tags.Skip(VisibleTagCount).ToList();
+
+        private static IEnumerable<string> MergeDistinct(params IEnumerable<string>?[] sources) =>
+            sources
+                .Where(s => s != null)
+                .SelectMany(s => s!)
+                .Where(s => !string.IsNullOrWhiteSpace(s))
+                .Select(s => s.Trim())
+                .Distinct(StringComparer.OrdinalIgnoreCase);
+
         /// <summary>Anilist descriptions are HTML fragments; flatten them to plain text for display.</summary>
         public string? AnilistDescription
         {

AnimeAnnouncer.Web/wwwroot/css/site.css

@@ -245,6 +245,57 @@ a:hover {
   background: rgba(255, 212, 59, 0.12);
 }
 
+/* --- Genres & tags --- */
+.airing-taxonomy {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.genre-chip {
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: #d0bfff;
+  background: rgba(151, 117, 250, 0.18);
+  border: 1px solid rgba(151, 117, 250, 0.45);
+  backdrop-filter: blur(4px);
+}
+
+.tag-chip {
+  padding: 0.1rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.72rem;
+  color: #ced4da;
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* The overflow list flows inline with the other chips once opened. */
+.tag-overflow {
+  display: contents;
+}
+
+.tag-overflow > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.tag-overflow > summary::-webkit-details-marker {
+  display: none;
+}
+
+.tag-more {
+  color: #74c0fc;
+  border-style: dashed;
+}
+
+.tag-overflow[open] > .tag-more {
+  display: none;
+}
+
 .airing-progress {
   height: 6px;
   border-radius: 999px;