Implement game border

index.html

@@ -32,6 +32,8 @@
 		<link rel="prefetch" href="shop1.png" />
 		<link rel="prefetch" href="shop.gif" />
 		<link rel="prefetch" href="Kitchen BG.png" />
+		<link rel="prefetch" href="game window.png" />
+		<link rel="prefetch" href="cat.png" />
 
 		<title>Profectus</title>
 		<meta name="description" content="A project made in Profectus"/>

src/data/common.css

@@ -1,5 +1,7 @@
 .inner-tab {
     background: url("./Kitchen BG.png");
+    background-position: center;
+    background-size: cover;
 }
 
 .game-container {
@@ -8,6 +10,44 @@
     height: 100%;
 }
 
+.game-container::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-image: url("./game window.png");
+    border-image-slice: 100 50 50 450;
+    border-style: solid;
+    border-width: 10vmin 5vmin 5vmin 45vmin;
+    z-index: 101;
+    pointer-events: none;
+}
+
+.game-container::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 10vmin;
+    aspect-ratio: 516/100;
+    background-size: contain;
+    background-image: url("./cat.png");
+    z-index: 102;
+    pointer-events: none;
+}
+
+.team-nickname {
+    font-size: 3vmin;
+    z-index: 105;
+    top: 2.8vmin;
+    position: absolute;
+    left: 6.3vmin;
+    text-shadow: -1px 1px 0 var(--raised-background), 1px 1px 0 var(--raised-background), 1px -1px 0 var(--raised-background), -1px -1px 0 var(--raised-background);
+}
+
 .modifier-toggle {
     padding-right: 10px;
     transform: translateY(-1px);

src/data/projEntry.tsx

@@ -638,7 +638,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                             {wins.value}/5
                         </div>
                     </Row>
-                    <h2 style="font-size: 3vmin">{nickname.value}</h2>
+                    <h2 class="team-nickname">{nickname.value}</h2>
                     <Row style="margin-top: 10vh">
                         {new Array(3).fill(0).map((_, i) => (
                             <CharacterSlot

src/data/themes.ts

@@ -111,7 +111,7 @@ export default {
             "--bought": "#fff7f6",
             "--danger": "#D08770",
             "--link": "#412323",
-            "--outline": "#3B4252",
+            "--outline": "#551842",
             "--accent1": "#dc7d71",
             "--accent2": "#8423a9",
             "--accent3": "#47f2ca",