Remove and simplify SCSS styles

Remove some unused classes, mixins and variables, then inline ones that
have just a few usages. Also remove a few redundant properties and
replace align-items: center + justify-items: center with place-items:
center.

gulp/preloader/preloader.css

@@ -27,7 +27,7 @@ body {
     color: #555;
     user-select: none;
     background: inherit !important;
-    word-wrap: break-word;
+    overflow-wrap: break-word;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
 }

src/css/animations.scss

@@ -1,19 +0,0 @@
-@each $animName in ("changeAnimEven", "changeAnimOdd") {
-    @keyframes #{$animName} {
-        0% {
-            transform: scale(1, 1);
-        }
-
-        50% {
-            transform: scale(1.03, 1.03);
-        }
-
-        100% {
-            transform: scale(1, 1);
-        }
-    }
-
-    .#{$animName} {
-        animation: $animName 0.2s ease-in-out;
-    }
-}

src/css/common.scss

@@ -31,7 +31,7 @@ body {
     color: #555;
     user-select: none;
     background: inherit;
-    word-wrap: break-word;
+    overflow-wrap: break-word;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     @include Text;
@@ -64,7 +64,7 @@ button {
     pointer-events: all;
     cursor: pointer;
     position: relative;
-    @include TextShadow3D;
+    color: $legacyTextShadow3DColor;
 }
 
 .styledButton {
@@ -113,7 +113,7 @@ input[type="email"] {
         opacity: 0.4;
     }
     transition: background-color 0.1s ease-in-out !important;
-    @include TextShadow3D(#fff);
+    color: #fff;
     @include BoxShadow3D(lighten($mainBgColor, 30));
     &:focus {
         @include BoxShadow3D(lighten($mainBgColor, 35));
@@ -212,17 +212,13 @@ canvas {
     display: inline-block;
 }
 
-.badged {
-    color: color($purple, 300);
-}
-
 .prefab_LoadingTextWithAnim {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-transform: uppercase;
     @include Text;
-    @include TextShadow3D;
+    color: $legacyTextShadow3DColor;
     opacity: 1;
     z-index: 20;
     color: #393747;
@@ -317,7 +313,7 @@ canvas {
             width: 80vw;
             @include BoxShadow3D(lighten($mainBgColor, 10), $size: 1px);
             position: relative;
-            @include TextShadow3D(#fff);
+            color: #fff;
             height: 2px;
             .inner {
                 position: absolute !important;
@@ -374,7 +370,7 @@ canvas {
         background-color 0.3s ease-in-out,
         box-shadow 0.4s ease-in-out !important;
     position: relative;
-    @include BorderRadius(20px);
+    @include S(border-radius, 20px);
     @include BoxShadow3D($bgColor, $size: 2px);
     &.loading {
         opacity: 0.2;
@@ -389,7 +385,7 @@ canvas {
         transition: margin-left 0.4s ease-in-out !important;
         background: #fff;
         position: relative;
-        @include BorderRadius(20px);
+        @include S(border-radius, 20px);
         @include BoxShadow3D(#fff, $size: 1px);
     }
     &.checked {

src/css/ingame_hud/dialogs.scss

@@ -192,22 +192,13 @@
                 }
             }
 
-            ul.bucketList {
-                padding-left: 30px;
-
-                li {
-                    display: list-item;
-                }
-            }
-
             .ingameItemChooser {
                 @include S(margin, 10px, 0);
                 display: grid;
                 @include S(grid-column-gap, 3px);
                 @include S(grid-row-gap, 5px);
                 grid-template-columns: repeat(10, 1fr);
-                align-items: center;
+                place-items: center;
-                justify-items: center;
 
                 canvas {
                     pointer-events: all;
@@ -244,9 +235,6 @@
                     @include SuperSmallText;
                     opacity: 0.5;
                 }
-
-                .name {
-                }
             }
         }
 

src/css/ingame_hud/game_menu.scss

@@ -11,7 +11,6 @@
     > button,
     > .button {
         @include PlainText;
-        background: green;
         @include S(width, 30px);
         @include S(height, 30px);
 

src/css/ingame_hud/settings_menu.scss

@@ -8,8 +8,7 @@
         display: grid;
         grid-template-rows: auto auto;
         grid-auto-columns: 1fr;
-        align-items: center;
+        place-items: center;
-        justify-items: center;
 
         strong {
             text-transform: uppercase;

src/css/ingame_hud/shape_viewer.scss

@@ -22,8 +22,7 @@
             display: grid;
             width: 100%;
             @include S(grid-row-gap, 10px);
-            align-items: center;
+            place-items: center;
-            justify-items: center;
         }
 
         .infoArea {

src/css/ingame_hud/statistics.scss

@@ -184,8 +184,7 @@
                 @include S(height, 60px);
                 grid-template-columns: 1fr;
                 grid-template-rows: 1fr auto;
-                justify-items: center;
+                place-items: center;
-                align-items: center;
 
                 .counter {
                     grid-column: 1 / 2;

src/css/ingame_hud/unlock_notification.scss

@@ -18,12 +18,6 @@
         }
     }
 
-    &.withinDemo {
-        > .dialog {
-            @include S(padding-top, 60px);
-        }
-    }
-
     .dialog {
         // background: rgba(#222428, 0.5);
         @include S(border-radius, $globalBorderRadius);

src/css/main.scss

@@ -7,13 +7,11 @@
 }
 
 @import "resources";
-@import "material_colors";
 @import "dynamic_ui";
 @import "variables";
 
 @import "mixins";
 @import "common";
-@import "animations";
 @import "game_state";
 @import "textual_game_state";
 

src/css/material_colors.scss

@@ -1,319 +0,0 @@
-//
-// color palette
-
-// sass-lint:disable hex-length
-
-@function color($color, $value: 500) {
-    @return map-get($color, $value);
-}
-
-$red: (
-    50: #ffebee,
-    100: #ffcdd2,
-    200: #ef9a9a,
-    300: #e57373,
-    400: #ef5350,
-    500: #f44336,
-    600: #e53935,
-    700: #d32f2f,
-    800: #c62828,
-    900: #b71c1c,
-    a100: #ff8a80,
-    a200: #ff5252,
-    a400: #ff1744,
-    a700: #d50000,
-);
-
-$pink: (
-    50: #fce4ec,
-    100: #f8bbd0,
-    200: #f48fb1,
-    300: #f06292,
-    400: #ec407a,
-    500: #e91e63,
-    600: #d81b60,
-    700: #c2185b,
-    800: #ad1457,
-    900: #880e4f,
-    a100: #ff80ab,
-    a200: #ff4081,
-    a400: #f50057,
-    a700: hsl(333, 84%, 42%),
-);
-
-$purple: (
-    50: #f3e5f5,
-    100: #e1bee7,
-    200: #ce93d8,
-    300: #ba68c8,
-    400: #ab47bc,
-    500: #9c27b0,
-    600: #8e24aa,
-    700: #7b1fa2,
-    800: #6a1b9a,
-    900: #4a148c,
-    a100: #ea80fc,
-    a200: #e040fb,
-    a400: #d500f9,
-    a700: #aa00ff,
-);
-
-$deep-purple: (
-    50: #ede7f6,
-    100: #d1c4e9,
-    200: #b39ddb,
-    300: #9575cd,
-    400: #7e57c2,
-    500: #673ab7,
-    600: #5e35b1,
-    700: #512da8,
-    800: #4527a0,
-    900: #311b92,
-    a100: #b388ff,
-    a200: #7c4dff,
-    a400: #651fff,
-    a700: #6200ea,
-);
-
-$indigo: (
-    50: #e8eaf6,
-    100: #c5cae9,
-    200: #9fa8da,
-    300: #7986cb,
-    400: #5c6bc0,
-    500: #3f51b5,
-    600: #3949ab,
-    700: #303f9f,
-    800: #283593,
-    900: #1a237e,
-    a100: #8c9eff,
-    a200: #536dfe,
-    a400: #3d5afe,
-    a700: #304ffe,
-);
-
-$blue: (
-    50: #e3f2fd,
-    100: #bbdefb,
-    200: #90caf9,
-    300: #64b5f6,
-    400: #42a5f5,
-    500: #2196f3,
-    600: #1e88e5,
-    700: #1976d2,
-    800: #1565c0,
-    900: #0d47a1,
-    a100: #82b1ff,
-    a200: #448aff,
-    a400: #2979ff,
-    a700: #2962ff,
-);
-
-$light-blue: (
-    50: #e1f5fe,
-    100: #b3e5fc,
-    200: #81d4fa,
-    300: #4fc3f7,
-    400: #29b6f6,
-    500: #03a9f4,
-    600: #039be5,
-    700: #0288d1,
-    800: #0277bd,
-    900: #01579b,
-    a100: #80d8ff,
-    a200: #40c4ff,
-    a400: #00b0ff,
-    a700: #0091ea,
-);
-
-$cyan: (
-    50: #e0f7fa,
-    100: #b2ebf2,
-    200: #80deea,
-    300: #4dd0e1,
-    400: #26c6da,
-    500: #00bcd4,
-    600: #00acc1,
-    700: #0097a7,
-    800: #00838f,
-    900: #006064,
-    a100: #84ffff,
-    a200: #18ffff,
-    a400: #00e5ff,
-    a700: #00b8d4,
-);
-
-$teal: (
-    50: #e0f2f1,
-    100: #b2dfdb,
-    200: #80cbc4,
-    300: #4db6ac,
-    400: #26a69a,
-    500: #009688,
-    600: #00897b,
-    700: #00796b,
-    800: #00695c,
-    900: #004d40,
-    a100: #a7ffeb,
-    a200: #64ffda,
-    a400: #1de9b6,
-    a700: #00bfa5,
-);
-
-$green: (
-    50: #e8f5e9,
-    100: #c8e6c9,
-    200: #a5d6a7,
-    300: #81c784,
-    400: #66bb6a,
-    500: #4caf50,
-    600: #43a047,
-    700: #388e3c,
-    800: #2e7d32,
-    900: #1b5e20,
-    a100: #b9f6ca,
-    a200: #69f0ae,
-    a400: #00e676,
-    a700: #00c853,
-);
-
-$light-green: (
-    50: #f1f8e9,
-    100: #dcedc8,
-    200: #c5e1a5,
-    300: #aed581,
-    400: #9ccc65,
-    500: #8bc34a,
-    600: #7cb342,
-    700: #689f38,
-    800: #558b2f,
-    900: #33691e,
-    a100: #ccff90,
-    a200: #b2ff59,
-    a400: #76ff03,
-    a700: #64dd17,
-);
-
-$lime: (
-    50: #f9fbe7,
-    100: #f0f4c3,
-    200: #e6ee9c,
-    300: #dce775,
-    400: #d4e157,
-    500: #cddc39,
-    600: #c0ca33,
-    700: #afb42b,
-    800: #9e9d24,
-    900: #827717,
-    a100: #f4ff81,
-    a200: #eeff41,
-    a400: #c6ff00,
-    a700: #aeea00,
-);
-
-$yellow: (
-    50: #fffde7,
-    100: #fff9c4,
-    200: #fff59d,
-    300: #fff176,
-    400: #ffee58,
-    500: #ffeb3b,
-    600: #fdd835,
-    700: #fbc02d,
-    800: #f9a825,
-    900: #f57f17,
-    a100: #ffff8d,
-    a200: #ffff00,
-    a400: #ffea00,
-    a700: #ffd600,
-);
-
-$amber: (
-    50: #fff8e1,
-    100: #ffecb3,
-    200: #ffe082,
-    300: #ffd54f,
-    400: #ffca28,
-    500: #ffc107,
-    600: #ffb300,
-    700: #ffa000,
-    800: #ff8f00,
-    900: #ff6f00,
-    a100: #ffe57f,
-    a200: #ffd740,
-    a400: #ffc400,
-    a700: #ffab00,
-);
-
-$orange: (
-    50: #fff3e0,
-    100: #ffe0b2,
-    200: #ffcc80,
-    300: #ffb74d,
-    400: #ffa726,
-    500: #ff9800,
-    600: #fb8c00,
-    700: #f57c00,
-    800: #ef6c00,
-    900: #e65100,
-    a100: #ffd180,
-    a200: #ffab40,
-    a400: #ff9100,
-    a700: #ff6d00,
-);
-
-$deep-orange: (
-    50: #fbe9e7,
-    100: #ffccbc,
-    200: #ffab91,
-    300: #ff8a65,
-    400: #ff7043,
-    500: #ff5722,
-    600: #f4511e,
-    700: #e64a19,
-    800: #d84315,
-    900: #bf360c,
-    a100: #ff9e80,
-    a200: #ff6e40,
-    a400: #ff3d00,
-    a700: #dd2c00,
-);
-
-$brown: (
-    50: #efebe9,
-    100: #d7ccc8,
-    200: #bcaaa4,
-    300: #a1887f,
-    400: #8d6e63,
-    500: #795548,
-    600: #6d4c41,
-    700: #5d4037,
-    800: #4e342e,
-    900: #3e2723,
-);
-
-$grey: (
-    50: #fafafa,
-    100: #f5f5f5,
-    200: #eeeeee,
-    300: #e0e0e0,
-    400: #bdbdbd,
-    500: #9e9e9e,
-    600: #757575,
-    700: #616161,
-    800: #424242,
-    900: #212121,
-);
-
-$blue-grey: (
-    50: #eceff1,
-    100: #cfd8dc,
-    200: #b0bec5,
-    300: #90a4ae,
-    400: #78909c,
-    500: #607d8b,
-    600: #546e7a,
-    700: #455a64,
-    800: #37474f,
-    900: #263238,
-);

src/css/mixins.scss

@@ -1,16 +1,3 @@
-// ----------------------------------------
-/* Forces an element to get rendered on its own layer, increasing
-the performance when animated. Use only transform and opacity in animations! */
-@mixin FastAnimation {
-    will-change: transform, opacity, filter;
-    // transform: translateZ(0);
-    backface-visibility: hidden;
-}
-
-// Helper which includes the translateZ webkit fix, use together with Fast animation
-// $hardwareAcc: translateZ(0);
-$hardwareAcc: null;
-
 // ----------------------------------------
 /* Duplicates an animation and adds two classes .<classPrefix>Even and .<classPrefix>Odd which uses the
   animation. This can be used to replay the animation by toggling between the classes, because
@@ -51,76 +38,6 @@ $hardwareAcc: null;
     animation: $animName $duration !important;
 }
 
-// ----------------------------------------
-/* Animation prefab for a double bounce pop-in animation, useful for dialogs */
-@mixin DoubleBounceAnim($duration: 0.5s ease-in-out, $amount: 0.2, $initialOpacity: 0) {
-    @include InlineAnimation($duration) {
-        0% {
-            opacity: $initialOpacity;
-            transform: scale(0) $hardwareAcc;
-        }
-
-        25% {
-            opacity: 0.5;
-            transform: scale(1 + $amount) $hardwareAcc;
-        }
-
-        50% {
-            opacity: 1;
-            transform: scale(1 - $amount * 0.5) $hardwareAcc;
-        }
-
-        75% {
-            transform: scale(1 + $amount * 0.25) $hardwareAcc;
-        }
-
-        100% {
-            transform: scale(1) $hardwareAcc;
-        }
-    }
-
-    opacity: 1;
-}
-
-// ----------------------------------------
-/* Define a style which is only applied when the viewport is at least X pixels wide */
-@mixin StyleAtWidth($minW) {
-    @media (min-width: #{$minW}) {
-        @content;
-    }
-}
-
-// ----------------------------------------
-/* Define a style which is only applied when the viewport is at least X pixels height */
-@mixin StyleAtHeight($minH) {
-    @media (min-height: #{$minH}) {
-        @content;
-    }
-}
-
-// ----------------------------------------
-/* Define a style which is only applied when the viewport has at least the given dimensions */
-@mixin StyleAtDims($minW, $minH) {
-    @media (min-height: #{$minH}) and (min-width: #{$minW}) {
-        @content;
-    }
-}
-
-// ----------------------------------------
-/* Define a style which is only applied when the viewport has at maximum the given dimensions */
-@mixin StyleBelowDims($maxW, $maxH) {
-    @media (max-height: #{$maxH}) and (max-width: #{$maxW}) {
-        @content;
-    }
-}
-
-// ----------------------------------------
-/* Define a style which is only applied when the viewport has at maximum the given height */
-@mixin StyleBelowHeight($maxH) {
-    @media (max-height: #{$maxH}) {
-        @content;
-    }
-}
 // ----------------------------------------
 /* Define a style which is only applied when the viewport has at maximum the given width */
 @mixin StyleBelowWidth($maxW) {
@@ -158,10 +75,6 @@ $hardwareAcc: null;
     // }
 }
 
-@mixin BorderRadius($v1: 2px, $v2: "", $v3: "", $v4: "") {
-    @include S(border-radius, $v1, $v2, $v3, $v4);
-}
-
 @mixin BoxShadow($x, $y, $blur, $offset, $color) {
     box-shadow: D($x) D($y) D($blur) D($offset) $color;
 }
@@ -170,57 +83,11 @@ $hardwareAcc: null;
     @include BoxShadow(0, $yOffset, $blur, 0, rgba(#000, $amount));
 }
 
-@mixin TextShadow($yOffset: 2px, $blur: 1px, $amount: 0.6) {
-    text-shadow: 0 D($yOffset) D($blur) rgba(#000, $amount);
-}
-
 @mixin Button3D($bgColor, $pressEffect: true) {
     @include BoxShadow3D($bgColor, 2px, $pressEffect);
 }
 
-@mixin ButtonDisabled3D($bgColor) {
+$legacyTextShadow3DColor: rgb(222, 234, 238);
-    @include BoxShadow3D($bgColor, 0.5px, false);
-}
-
-@mixin BoxShadowInset($bgColor, $size: 3px) {
-    background-color: $bgColor;
-
-    $borderSize: 1px;
-    $borderColor: rgb(15, 19, 24);
-    box-shadow:
-        0 0 0 D($borderSize) $borderColor,
-        0 D($size) 0 rgba(#fff, 0.07);
-    border-top: D($size) solid rgba(#000, 0.1);
-
-    //, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
-    // 0 D($size + $borderSize) 0 0 $borderColor;
-}
-
-@mixin TextShadow3D($color: rgb(222, 234, 238), $borderColor: #000) {
-    color: $color;
-}
-
-@mixin BounceInFromSide($mul, $duration: 0.18s ease-in-out) {
-    @include InlineAnimation($duration) {
-        0% {
-            transform: translateY(#{D(-100px * $mul)}) scale(0.9);
-            opacity: 0;
-        }
-
-        100% {
-            opacity: 1;
-            transform: none;
-        }
-    }
-    opacity: 1;
-    transform: none;
-}
-
-@mixin BreakText {
-    word-wrap: break-word;
-    word-break: break-all;
-    overflow-wrap: break-all;
-}
 
 @mixin DarkThemeOverride {
     @at-root html[data-theme="dark"] &,

src/css/states/main_menu.scss

@@ -130,25 +130,6 @@
         }
         position: relative;
         @include S(left, -8px);
-
-        .updateLabel {
-            position: absolute;
-            transform: translateX(50%) rotate(-5deg);
-            color: #fff;
-            @include PlainText;
-            font-weight: bold;
-            @include S(right, 40px);
-            @include S(bottom, 20px);
-            background: $modsColor;
-            @include S(border-radius, $globalBorderRadius);
-            @include S(padding, 0, 5px, 1px, 5px);
-
-            @include InlineAnimation(1.3s ease-in-out infinite) {
-                50% {
-                    transform: translateX(50%) rotate(-7deg) scale(1.1);
-                }
-            }
-        }
     }
 
     .sideContainer {
@@ -173,35 +154,6 @@
             border: D(1px) solid rgba(#000, 0.1);
             overflow: hidden;
 
-            > .badge {
-                color: #fff;
-                text-transform: uppercase;
-                font-weight: bold;
-                position: absolute;
-                @include S(top, 10px);
-                @include S(right, 10px);
-
-                transform: translateX(50%) rotate(10deg);
-                @include Heading;
-                font-weight: bold;
-
-                @include InlineAnimation(1.3s ease-in-out infinite) {
-                    50% {
-                        transform: translateX(50%) rotate(12deg) scale(1.1);
-                    }
-                }
-            }
-
-            > .hint {
-                @include SuperDuperSmallText;
-                @include S(margin-top, 10px);
-                @include S(width, 200px);
-            }
-
-            > .dlcLogo {
-                @include S(width, 120px);
-            }
-
             > button {
                 @include S(margin-top, 20px);
                 @include Heading;
@@ -214,9 +166,6 @@
                 @include S(height, 118px);
                 @include S(width, 250px);
                 background: uiResource("puzzle_460x215_15.png") center D(-5px) / cover repeat;
-                .dlcLogo {
-                    display: none;
-                }
 
                 > button {
                     pointer-events: all;
@@ -425,15 +374,6 @@
             }
         }
 
-        .modeButtons {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            @include S(grid-column-gap, 10px);
-            align-items: start;
-            height: 100%;
-            width: 100%;
-        }
-
         .savegamesMount {
             width: 100%;
             display: flex;
@@ -607,27 +547,6 @@
         }
     }
 
-    .bottomContainer {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: row;
-        @include S(padding-top, 10px);
-        height: 100%;
-        width: 100%;
-        box-sizing: border-box;
-
-        .buttons {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            @include S(grid-column-gap, 10px);
-            align-items: start;
-            height: 100%;
-            width: 100%;
-            box-sizing: border-box;
-        }
-    }
-
     .socialLinks {
         position: fixed;
         z-index: 100;

src/css/states/preload.scss

@@ -96,7 +96,7 @@
                 display: block;
                 color: #666;
                 text-align: left;
-                @include BreakText;
+                overflow-wrap: break-word;
                 hyphens: auto;
                 // border: dotted #666;
                 // @include S(border-width, 1px, 0);
@@ -139,7 +139,7 @@
 
     /* Animations */
     .status {
-        transform: scale(0.7) $hardwareAcc;
+        transform: scale(0.7);
         opacity: 0;
         @include StateAnim(transform, opacity);
     }

src/css/states/settings.scss

@@ -85,30 +85,6 @@
                 }
             }
 
-            button.manageMods {
-                background-color: lighten($modsColor, 38);
-                color: $modsColor;
-                display: flex;
-                @include S(padding-right, 5px);
-                .newBadge {
-                    color: #fff;
-                    @include S(border-radius, $globalBorderRadius);
-                    background: $modsColor;
-                    margin-left: auto;
-                    @include S(padding, 0, 3px, 0, 3px);
-
-                    @include InlineAnimation(1.3s ease-in-out infinite) {
-                        50% {
-                            transform: rotate(0deg) scale(1.1);
-                        }
-                    }
-                }
-
-                &.active {
-                    background-color: $colorGreenBright;
-                }
-            }
-
             .versionbar {
                 @include S(margin-top, 10px);
 

src/css/variables.scss

@@ -1,14 +1,9 @@
 $globalBorderRadius: 6px;
 
-// When to reduce control elements size for small devices
-$layoutExpandMinWidth: 340px;
-
 // Font sizes and line heights
 $superHeadingFontSize: 25px;
 $superHeadingLineHeight: 24px;
 
-$breakTooltipShowStatsPx: 1023px;
-
 $headingFontSize: 19px;
 $headingLineHeight: 21px;
 
@@ -40,8 +35,6 @@ $themeColor: #393747;
 $ingameHudBg: rgba(#33343b, 0.9);
 $modsColor: rgb(214, 60, 228);
 
-$text3dColor: #f4ffff;
-
 $darkModeGameBackground: #535866;
 $darkModeControlsBackground: darken($darkModeGameBackground, 5);
 
@@ -49,13 +42,6 @@ $darkModeControlsBackground: darken($darkModeGameBackground, 5);
 $modalDialogBg: rgba(160, 165, 180, 0.8);
 $dialogBgColor: lighten($mainBgColor, 10);
 
-$lightFontWeight: normal;
-$boldFontWeight: 600;
-
-$iconSizeSmall: 30px;
-$iconSizeMedium: 40px;
-$iconSizeLarge: 60px;
-
 // Poppins 500
 // Rubik 400
 // Cairo 400
@@ -65,8 +51,6 @@ $iconSizeLarge: 60px;
 $mainFont: "GameFont", sans-serif;
 // $mainFont: "DK Canoodle";
 // $mainFont: "MADE Florence Sans";
-$numberFont: $mainFont;
-$textFont: $mainFont;
 
 @mixin DebugText($color) {
     // font-size: 3px;

src/js/states/main_menu.js

@@ -45,7 +45,6 @@ export class MainMenuState extends GameState {
                     width="${Math.round((710 / 3) * this.app.getEffectiveUiScale())}"
                     height="${Math.round((180 / 3) * this.app.getEffectiveUiScale())}"
                 >
-                ${/*showUpdateLabel ? `<span class="updateLabel">MODS UPDATE!</span>` : ""*/ ""}
             </div>
 
             <div class="mainWrapper" data-columns="2">

src/js/states/settings.js

@@ -30,8 +30,8 @@ export class SettingsState extends TextualGameState {
                     : ""
             }
 
-            <button class="styledButton categoryButton manageMods">${T.mods.title}
+            <button class="styledButton categoryButton manageMods">
-                <span class="newBadge">${T.settings.newBadge}</span>
+            ${T.mods.title}
             </button>