From 832841134a5cedb526f33a90a88197fe69f9f965 Mon Sep 17 00:00:00 2001
From: Tickbase <iver.kleivbakk@gmail.com>
Date: Thu, 30 Apr 2026 21:00:21 +0200
Subject: [PATCH] styles

---
 src/styles/components/games/_gamecard.scss | 15 +++++++++++++++
 src/styles/components/layout/_sidebar.scss | 22 +++++++++++++++++++++-
 src/styles/themes/_dark.scss               |  1 +
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/styles/components/games/_gamecard.scss b/src/styles/components/games/_gamecard.scss
index 102b492..8957a4d 100644
--- a/src/styles/components/games/_gamecard.scss
+++ b/src/styles/components/games/_gamecard.scss
@@ -41,6 +41,10 @@
   .status-badge.smoke {
     box-shadow: 0 0 10px rgba(255, 239, 150, 0.5);
   }
+
+  .status-badge.epic {
+    box-shadow: 0 0 10px rgba(15, 25, 35, 0.5);
+  }
 }
 
 // Special styling for cards with different statuses
@@ -56,6 +60,12 @@
     0 0 15px rgba(255, 239, 150, 0.15);
 }
 
+.game-item-card:has(.status-badge.epic) {
+  box-shadow:
+    var(--shadow-standard),
+    0 0 15px rgba(15, 25, 35, 0.15);
+}
+
 // Game item overlay
 .game-item-overlay {
   position: absolute;
@@ -126,6 +136,11 @@
   color: var(--text-heavy);
 }
 
+.status-badge.epic {
+  background-color: var(--epic);
+  color: var(--text-primary);
+}
+
 // Game title
 .game-title {
   padding: 0;
diff --git a/src/styles/components/layout/_sidebar.scss b/src/styles/components/layout/_sidebar.scss
index 63a74de..569649b 100644
--- a/src/styles/components/layout/_sidebar.scss
+++ b/src/styles/components/layout/_sidebar.scss
@@ -31,9 +31,29 @@
   }
 }
 
+.sidebar-section {
+  margin-bottom: 0.5rem;
+}
+
+.sidebar-section-label {
+  display: block;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  opacity: 0.6;
+  padding: 0 1rem;
+  margin-bottom: 0.25rem;
+}
+
+.sidebar-section .filter-list {
+  margin-bottom: 0.75rem;
+}
+
 .filter-list {
   list-style: none;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0;
 
   li {
     transition: all var(--duration-normal) var(--easing-ease-out);
diff --git a/src/styles/themes/_dark.scss b/src/styles/themes/_dark.scss
index 955361c..46dc816 100644
--- a/src/styles/themes/_dark.scss
+++ b/src/styles/themes/_dark.scss
@@ -48,6 +48,7 @@
   --proton: #ffc896;
   --cream: #80b4ff;
   --smoke: #fff096;
+  --epic: #0f1923;
 
   --modal-backdrop: rgba(30, 30, 30, 0.95);
 }