Border-image fallback for world map level buttons

app/styles/mixins.sass

@@ -1,4 +1,5 @@
 @import "app/styles/bootstrap/mixins"
+@import "bower_components/modernizr-mixin/stylesheets/modernizr"
 
 @mixin gradient-radial-custom-stops($innerColor: #555, $innerStop: 20%, $outerColor: #333, $outerStop: 70%)
   background-color: $outerColor

app/styles/play/world-map-view.sass

@@ -163,8 +163,12 @@ $gameControlMargin: 30px
       position: absolute
       z-index: 3
       padding: 10px
-      border-image: url(/images/level/popover_background.png) 18 fill round
       border-width: 15px
+      // Using modernizr-mixin for compat detection
+      @include yep(borderimage)
+        border-image: url(/images/level/popover_background.png) 18 fill round
+      @include nope(borderimage)
+        background-color: rgb(247, 242, 218)
 
       .level-info.complete h3:after
         content: " - Complete!"

bower.json

@@ -90,5 +90,8 @@
     "modernizr": {
       "main": "modernizr.js"
     }
+  },
+  "devDependencies": {
+    "modernizr-mixin": "~3.0.0"
   }
 }