Add episode thumbnails and playlist player

public/assets/styles.css

@@ -246,28 +246,6 @@ label {
   letter-spacing: 0.08em;
 }
 
-.sidebar-note {
-  display: grid;
-  gap: 6px;
-  border: 1px solid var(--line);
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.03);
-  padding: 14px;
-}
-
-.sidebar-note__label {
-  color: #ddd0ff;
-  font-size: 11px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.sidebar-note p {
-  color: var(--muted);
-  font-size: 13px;
-}
-
 .collection-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
@@ -524,41 +502,108 @@ label {
 
 .episodes {
   display: grid;
-  gap: 0.9rem;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
 }
 
 .episode {
   display: grid;
-  grid-template-columns: minmax(180px, 1fr) minmax(280px, 520px);
-  gap: 1rem;
-  align-items: center;
-  padding: 0.85rem;
+  gap: 10px;
+  align-items: start;
+  min-height: auto;
+  padding: 12px;
+  text-align: left;
   box-shadow: none;
 }
 
-.episode div {
-  display: grid;
-  gap: 0.25rem;
-  min-width: 0;
+.episode:hover {
+  border-color: var(--line-strong);
+  background: linear-gradient(180deg, rgba(38, 28, 64, 0.94) 0%, rgba(19, 14, 32, 0.98) 100%);
 }
 
-.episode strong,
-.episode span {
+.episode__thumb {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  border: 1px solid rgba(157, 123, 255, 0.16);
+  border-radius: 14px;
+  background:
+    radial-gradient(circle at top, rgba(157, 123, 255, 0.22), transparent 44%),
+    linear-gradient(180deg, #221734 0%, #0c0915 100%);
+  overflow: hidden;
+}
+
+.episode__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.episode__play {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  padding: 5px 9px;
+  color: var(--text);
+  background: rgba(9, 6, 17, 0.74);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.episode__name {
+  color: var(--text);
+  font-weight: 800;
+}
+
+.episode__meta {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.episode__name,
+.episode__meta {
   overflow-wrap: anywhere;
 }
 
-video {
+.player-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  place-items: center;
+  gap: 12px;
+  padding: 24px;
+  background: #050308;
+}
+
+.player-video {
   width: 100%;
-  max-height: 320px;
+  max-width: min(100%, 1600px);
+  max-height: calc(100vh - 120px);
   border: 1px solid var(--line);
   border-radius: 16px;
   background: #050308;
 }
 
+.player-close {
+  position: fixed;
+  top: 18px;
+  right: 18px;
+  z-index: 21;
+}
+
+.player-now-playing {
+  color: var(--muted);
+  font-size: 13px;
+  text-align: center;
+}
+
 @media (max-width: 980px) {
   .app,
-  .hero,
-  .episode {
+  .hero {
     grid-template-columns: 1fr;
   }