Improve appearance of Splatfest results box

src/css/_backgrounds.scss

@@ -1,5 +1,6 @@
 // Images
 $bg-squids: url(../img/bg-squids.png);
+$bg-squids-light: url(../img/bg-squids-light.png);
 $bg-stripes: url(../img/bg-stripes.png);
 $bg-dots: url(../img/bg-dots.png);
 $bg-spots: url(../img/bg-spots.png);
@@ -23,6 +24,12 @@ $bg-battle-league: #f02d7d;
     background-size: 360px 360px;
 }
 
+.bg-squids-light {
+    background-image: $bg-squids-light;
+    background-position: top;
+    background-size: 270px 270px;
+}
+
 .bg-stripes {
     background-image: $bg-stripes;
     background-position: top;

src/css/main.scss

@@ -17,6 +17,10 @@ body.has-modal #main {
     filter: blur(4px);
 }
 
+.level.is-mobile .level-item:last-child {
+    margin-right: 0;
+}
+
 .fa {
     &:before {
         display: inline-block;
@@ -281,6 +285,8 @@ body.has-modal #main {
     }
 
     .mobile-results {
+        position: relative;
+
         .splatfest-results {
             border-radius: 0;
         }
@@ -302,27 +308,66 @@ body.has-modal #main {
 .splatfest-results {
     @extend .text-shadow;
 
-    background: rgba($grey-lighter, 0.75);
+    overflow: hidden;
+    background-color: rgba($grey-light, 0.75);
+
+    .background {
+        @extend .bg-squids-light;
+        opacity: 0.5;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
     border-radius: 15px;
     padding: 10px;
 
+    .results-header {
+        position: relative;
+
+        // We need to elevate the "Results" text out of its column container
+        // since otherwise it's too wide to fit
+        .results-header-text {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .image {
+            margin: 0 auto;
+        }
+    }
+
     .result {
-        background: rgba($black-ter, 0.65);
+        background: rgba($black, 0.75);
         border-radius: 200px;
 
         margin: 10px 0 0 0;
 
-        .level-item {
+        .column {
             padding: 8px 0;
             position: relative;
 
-            .winner-mark {
-                @extend .bg-mask-ink-splat;
+            .winner-mark, .title {
                 position: absolute;
                 top: 0;
                 right: 0;
                 bottom: 0;
                 left: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .winner-mark {
+                @extend .bg-mask-ink-splat;
 
                 z-index: 0;
                 margin: -5px;
@@ -330,6 +375,10 @@ body.has-modal #main {
 
             .title {
                 z-index: 1;
+
+                .percent {
+                    font-size: 14px;
+                }
             }
         }
     }

src/css/screenshots.scss

@@ -54,7 +54,7 @@
     }
 
     .splatfest-results {
-        width: 250px;
+        width: 275px;
         transform: scale(1.35);
     }
 

src/js/components/splatoon/SplatfestResultsBox.vue

@@ -1,17 +1,21 @@
 <template>
     <div class="splatfest-results">
-        <div class="level is-marginless is-mobile">
-            <div class="level-item">
+        <div class="background"></div>
+
+        <div class="columns is-marginless is-gapless is-mobile results-header">
+            <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">Results</div>
+
+            <div class="column">
                 <div class="image is-48x48" :title="festival.names.alpha_short">
                     <img :src="festival.images.alpha | localSplatNetImageUrl" />
                 </div>
             </div>
 
-            <div class="level-item">
-                <div class="title is-4 font-splatoon1 has-text-centered is-marginless">Results</div>
+            <div class="column is-3">
+                <!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
             </div>
 
-            <div class="level-item">
+            <div class="column">
                 <div class="image is-48x48" :title="festival.names.bravo_short">
                     <img :src="festival.images.bravo | localSplatNetImageUrl" />
                 </div>

src/js/components/splatoon/SplatfestResultsRow.vue

@@ -1,17 +1,21 @@
 <template>
-    <div class="level is-mobile result">
-        <div class="level-item">
+    <div class="columns is-mobile result">
+        <div class="column">
             <div class="winner-mark" :style="{ background: festival.colors.alpha.css_rgb }" v-if="winner == 'alpha'"></div>
-            <div class="font-splatoon1 title is-4">{{ rates.alpha }}%</div>
+            <div class="font-splatoon1 title is-4">
+                <div>{{ rates.alpha }}<span class="percent">%</span></div>
+            </div>
         </div>
 
-        <div class="level-item">
+        <div class="column is-3 has-text-centered font-splatoon2">
             {{ title }}
         </div>
 
-        <div class="level-item">
+        <div class="column">
             <div class="winner-mark" :style="{ background: festival.colors.bravo.css_rgb }" v-if="winner == 'bravo'"></div>
-            <div class="font-splatoon1 title is-4">{{ rates.bravo }}%</div>
+            <div class="font-splatoon1 title is-4">
+                <div>{{ rates.bravo }}<span class="percent">%</span></div>
+            </div>
         </div>
     </div>
 </template>