Various styling and layout improvements/fixes

public/stylesheets/styles.css

@@ -7493,6 +7493,10 @@ kbd {
   cursor: pointer;
 }
 
+.c-ra-pet-remembrance-button:hover {
+  box-shadow: 0 0 1rem inset var(--color-ra--base);
+}
+
 .s-base--metro .c-ra-pet-remembrance-button {
   border-color: black;
 }
@@ -8072,7 +8076,7 @@ kbd {
 }
 
 .o-laitela-run-button {
-  width: 22rem;
+  width: 24rem;
   height: 84rem;
   font-family: Typewriter;
   font-size: 1.1rem;
@@ -8273,7 +8277,7 @@ kbd {
 
 .c-laitela-singularity-container {
   display: flex;
-  width: 96rem;
+  width: 98rem;
   justify-content: space-around;
   align-items: center;
   color: var(--color-laitela--accent);
@@ -8874,39 +8878,40 @@ kbd {
 }
 
 .c-reality-upgrade-btn--possible {
-  color: black;
+  /* Text color gets inherited from other pseudo-classes; so we use !important here in order to ensure good contrast
+    specifically on reality and imaginary upgrades, the only upgrades which use this and the related --locked below */
+  color: black !important;
   background:
     repeating-linear-gradient(
       -45deg,
-      #979729,
-      #979729 3rem,
-      #777722 3rem,
-      #777722 6rem
+      #A2A229,
+      #A2A229 3rem,
+      #919122 3rem,
+      #919122 6rem
     );
   cursor: default;
 }
 
 .c-reality-upgrade-btn--possible:hover {
-  color: black;
-  background-color: #8b8529;
+  /* This is actually a solid color, but it flickers on hover if we don't make it a linear-gradient */
+  background: linear-gradient(0deg, #919122, #919122);
 }
 
 .c-reality-upgrade-btn--locked {
-  color: black;
-  background: #954040;
+  color: white !important;
+  background: #952020;
   background-image:
-    linear-gradient(45deg, #a55252 25%, transparent 25%),
-    linear-gradient(135deg, #a55252 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #a55252 75%),
-    linear-gradient(135deg, transparent 75%, #a55252 75%);
+    linear-gradient(45deg, #802222 25%, transparent 25%),
+    linear-gradient(135deg, #802222 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #802222 75%),
+    linear-gradient(135deg, transparent 75%, #802222 75%);
   background-position: 0 0, 2rem 0, 2rem -2rem, 0 2rem;
   background-size: 4rem 4rem;
   cursor: default;
 }
 
 .c-reality-upgrade-btn--locked:hover {
-  color: var(--color-reality-light);
-  background-color: #a53939;
+  background-color: #802222;
 }
 
 .c-reality-upgrade-btn--black-hole-unlock {
@@ -8919,11 +8924,6 @@ kbd {
   background-color: #37474f;
 }
 
-.t-dark .c-reality-upgrade-btn--locked {
-  color: var(--color-reality-light);
-  background-color: var(--color-bad);
-}
-
 .t-s6.c-reality-upgrade-btn:hover,
 .t-s10.c-reality-upgrade-btn:hover {
   background-color: var(--color-reality-light);

src/components/tabs/antimatter-dimensions/ClassicAntimatterDimensionsTab.vue

@@ -40,7 +40,7 @@ export default {
       const sacText = this.isSacrificeUnlocked
         ? ` | Dimensional Sacrifice multiplier: ${formatX(this.currentSacrifice, 2, 2)}`
         : "";
-      this.multiplierText = `Buy 10 Dimension purchase multiplier: ${formatX(this.buy10Mult, 2, 1)}${sacText}`;
+      this.multiplierText = `Buy 10 Dimension purchase multiplier: ${formatX(this.buy10Mult, 2, 2)}${sacText}`;
     },
     quickReset() {
       softReset(-1, true, true);

src/components/tabs/antimatter-dimensions/ModernAntimatterDimensionsTab.vue

@@ -76,7 +76,7 @@ export default {
 
       this.buy10Mult.copyFrom(AntimatterDimensions.buyTenMultiplier);
 
-      this.multiplierText = `Buy 10 Dimension purchase multiplier: ${formatX(this.buy10Mult, 2, 1)}`;
+      this.multiplierText = `Buy 10 Dimension purchase multiplier: ${formatX(this.buy10Mult, 2, 2)}`;
       if (!isSacrificeUnlocked) return;
       this.isSacrificeAffordable = Sacrifice.canSacrifice;
       this.currentSacrifice.copyFrom(Sacrifice.totalBoost);

src/components/tabs/celestial-effarig/EffarigTab.vue

@@ -190,3 +190,9 @@ export default {
     </div>
   </div>
 </template>
+
+<style scoped>
+.c-effarig-relic-description {
+  width: 46rem;
+}
+</style>