Created the Game styles.sass

webui/src/pages/Game/styles.sass

@@ -0,0 +1,151 @@
+@import "@/common/styles/colors"
+
+.active-wrapper
+  display: flex
+  flex-direction: column
+  justify-content: center
+  margin-top: 2.5rem
+
+.game-title
+  display: flex
+  justify-content: center
+  margin-bottom: 5rem
+
+.game-content
+  display: flex
+  align-items: center
+  gap: 15rem
+  margin-left: 5vw
+  margin-right: 5vw
+
+.game-tab
+  flex: 1
+
+.task-area
+  display: flex
+  flex-direction: column
+  align-items: center
+  padding: 2rem 1rem
+  gap: 1rem
+
+  img
+    width: 18rem
+    border-radius: 0.8rem
+
+  h2
+    color: $white
+    margin: 0
+    font-size: 24pt
+
+.guess-btn
+  padding: 0.5rem 0.3rem
+  color: $white
+  font-size: 20pt
+  font-weight: 600
+  transition: 0.2s
+  display: flex
+  justify-content: center
+  align-items: center
+  gap: 1rem
+  cursor: pointer
+
+  &:hover
+    transform: scale(1.02) translateY(-0.1rem) rotate(-0.1deg)
+
+.guess-area
+  display: flex
+  flex-direction: column
+  gap: 1.5rem
+
+  .current-task
+    display: flex
+    align-items: center
+    padding: 1rem
+    gap: 0.8rem
+    color: $white
+
+    svg
+      font-size: 26pt
+
+    h2
+      font-size: 22pt
+      margin: 0
+
+  .input-wrapper
+    display: flex
+    gap: 0.5rem
+    align-items: center
+
+  .guess-input
+    padding: 1rem
+    display: flex
+    flex-direction: column
+    gap: 0.5rem
+
+    h2
+      margin: 0
+      color: $white
+
+    input
+      margin: 0.3rem 0
+      padding: 0.6rem 0.5rem
+      border-radius: 0.5rem
+      font-size: 16pt
+      font-weight: 600
+      color: $white
+
+    ::placeholder
+      color: $white
+      opacity: 0.5
+
+  .solution-area
+    display: flex
+    align-items: center
+    justify-content: center
+    gap: 1rem
+    padding: 2rem
+    color: $green
+
+    svg
+      font-size: 26pt
+    h2
+      font-size: 24pt
+      margin: 0
+
+.game-scoreboard
+  padding: 1rem
+
+  .scoreboard-header h2
+    margin: 0
+    color: $white
+
+  .scoreboard-content
+    margin-top: 1rem
+    display: flex
+    flex-direction: column
+    gap: 1.5rem
+
+  .scoreboard-row
+    display: flex
+    justify-content: space-between
+    align-items: center
+    gap: 2rem
+
+    .scoreboard-left
+      display: flex
+      align-items: center
+      gap: 0.4rem
+
+      svg
+        font-size: 22pt
+        color: $white
+
+      h2
+        margin: 0
+        color: $white
+
+    .scoreboard-right
+
+      h2
+        margin: 0
+        color: $white