wrap market and player list in containers

components/MarketCards.vue

@@ -12,7 +12,6 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
 
 <template>
     <div id="market">
-        <AnimatedBackground :color-end="[1, 1, 0]" :color-start="[.3, .3, 0]"></AnimatedBackground>
         <CardPreview :tilted="false" :card_id="undefined"></CardPreview>
         <div class="separator"></div>
         <CardPreview :tilted="false" :card_id="c?.card_id" v-for="c in goStore.current_game?.market"
@@ -55,6 +54,7 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
 
 <style scoped>
 #market {
+    width: min-content;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -62,8 +62,14 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
     z-index: 2;
     position: relative;
     gap: 2px;
-    padding: 10px;
-    ;
+    margin: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 10px;
+    background: brown;
+    border: 5px solid darkred;
+    filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
+
 }
 
 .separator {