From 43100e65e9c3d068547b114e940a0329d24ec0bf Mon Sep 17 00:00:00 2001
From: Sysy's <sysys.iwi@gmail.com>
Date: Tue, 31 Mar 2026 12:00:03 +0200
Subject: [PATCH] Add game title and update layout styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adjust UI visuals: change page background to #FFF6E5, increase main container border-radius from 10px to 150px, and soften toolbox corners (5px → 15px). Add a new .game-title CSS rule (responsive font-size, weight, color, letter-spacing, centered) and insert an <h1 class="game-title">Mirror Game</h1> into the game template. These are visual polish changes only; no gameplay logic was modified.
---
 web/assets/css/game.css      | 14 +++++++++++---
 web/templates/view/game.html |  1 +
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/assets/css/game.css b/web/assets/css/game.css
index 7874e12..be4d2d7 100644
--- a/web/assets/css/game.css
+++ b/web/assets/css/game.css
@@ -12,7 +12,7 @@ body {
 }
 
 body {
-    background: #f7f7f7;
+    background: #FFF6E5;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -26,7 +26,7 @@ main {
     align-items: center;
     justify-content: center;
     padding: 20px;
-    border-radius: 10px;
+    border-radius: 150px;
     min-width: fit-content;
     flex-shrink: 0;
     gap: 16px;
@@ -36,6 +36,14 @@ main {
     width: min(96vw, 1200px);
 }
 
+.game-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 700;
+    color: #223;
+    letter-spacing: 0.04em;
+    text-align: center;
+}
+
 .toolbox {
     width: 100%;
     background: #dfe5f8;
@@ -66,7 +74,7 @@ main {
     flex-direction: column;
     padding: 10px;
     background: #dadeef;
-    border-radius: 5px;
+    border-radius: 15px;
 }
 
 .lign {
diff --git a/web/templates/view/game.html b/web/templates/view/game.html
index 3f78612..acecbdd 100644
--- a/web/templates/view/game.html
+++ b/web/templates/view/game.html
@@ -21,6 +21,7 @@
       <script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
       
     <main class="game-layout">
+        <h1 class="game-title">Mirror Game</h1>
         <div id="map" class="map"></div>
 
         <section class="toolbox">