Added doodles.png

.45env45

@@ -0,0 +1,10 @@
+POSTGRES_PASSWORD=coucou
+JWT_SECRET=superlongsecretkeyatleast32characterspleasenevercommitthis
+POSTGRES_DB=database
+POSTGRES_HOST=database
+POSTGRES_USER=user
+GITHUB_CLIENT_ID=Ov23li6ovg3fzec5IO5D
+GITHUB_CLIENT_SECRET=0345e959e8f0e9f784061c5c90ee227ddb2ef9ab
+GITHUB_CALLBACK_URL=http://localhost:8080/api/auth/github/callback
+
+pogpog

Transcendence/Makefile

@@ -1,6 +1,8 @@
-all : up
+all :
+	@docker compose -f ./docker-compose.yml up -d
 
-up :
+no_cache :
+	@docker compose -f ./docker-compose.yml build --no-cache
 	@docker compose -f ./docker-compose.yml up -d
 
 clean :
@@ -10,5 +12,6 @@ fclean :
 	@docker compose -f ./docker-compose.yml down -v -t 1
 	@docker system prune -af --volumes
 
-re : fclean up
+re : fclean no_cache
 
+.PHONY : all no_cache clean fclean re

Transcendence/srcs/frontend/src/app.js

@@ -16,10 +16,12 @@ import { StatsWindow } from './stats.js';
  */
 class App {
     constructor() {
+        console.log("APP STARTED");
         this.initWindows();
         this.initMenu();
         this.initPage();
         this.initEasterEgg();
+        this.colorizeUI();
     }
 
     /**
@@ -105,6 +107,39 @@ class App {
             });
         }
     }
+
+    colorizeUI() {
+    
+    const elements = document.querySelectorAll(".title, .menu__item, .game__item, .page__item");
+
+    const colorizeText = (el) => {
+        const text = el.textContent;
+        el.innerHTML = "";
+
+        const baseHue = Math.random() * 360;
+
+        // 🎲 random step = makes rainbow "scrambled"
+        const step = (Math.random() * 60) + 10; // 10 → 70
+
+        // 🎲 random direction (left or right rainbow)
+        const direction = Math.random() < 0.5 ? 1 : -1;
+
+        [...text].forEach((char, i) => {
+            const span = document.createElement("span");
+            span.textContent = char;
+
+            const hue = baseHue + (i * step * direction);
+
+            span.style.color = `hsl(${hue}, 90%, 60%)`;
+
+            span.style.textShadow = `1px 1px 0 rgba(0,0,0,0.3)`;
+
+            el.appendChild(span);
+        });
+    };
+    elements.forEach(colorizeText);
+    }
+
 }
 
 // Start the application when DOM is ready

Transcendence/srcs/frontend/src/game.css

@@ -1,26 +1,27 @@
 :root {
-    --color-primary: #0066cc;
-    --color-primary-hover: #0052a3;
+    --color-primary: #ffc75e;
+    --color-primary-hover: #ffc75e;
     --color-success: #3cff01;
-    --color-success-dark: #28a745;
+    --color-success-dark: #ffc75e;
     --color-error: #ff4d4d;
-    --color-warning: #ffc107;
-    --color-github: #24292e;
+    --color-warning: #ffc75e;
+    --color-github: #ffc75e;
 
-    --color-bg: #000;
+    --color-bg: #ffe5b5;
 
     --app-background-base: radial-gradient(
         circle at top,
-        #1b2735,
-        #090a0f
+        #3fc9ff,
+        #21fcc5
+
     );
 
-    /* --app-background-image: url("./assets/background.png"); */
+    --app-background-image: url("./assets/Frame1.png");
 
-    --color-surface: #222;
-    --color-surface-light: #333;
-    --color-text: #fff;
-    --color-text-muted: #aaa;
+    --color-surface: #ffcc00;
+    --color-surface-light: #feffa6;
+    --color-text: #000000;
+    --color-text-muted: #353535;
 
     --font-size-base: 10px;
     --font-size-sm: 1.2rem;
@@ -63,18 +64,24 @@
 html {
     height: 100%;
     background-image:
+        var(--app-background-image),    
         var(--app-background-base);
 
+    animation: bg-animation 12s steps(1) infinite;
+
+    background-size: contain, cover;
+    background-position: center, center;
+    background-repeat: no-repeat, no-repeat;
+        
+
     background-size:
         contain,
         cover;
 
     background-position:
-        center,
         center;
 
     background-repeat:
-        no-repeat,
         no-repeat;
 }
 
@@ -93,54 +100,136 @@ body {
 }
 
 
+/* ============================================
+    ANIMATIONS
+   ============================================ */
+
+@keyframes wobble {
+    0%   { transform: translate(0%, 0) rotate(0deg); }
+    25%  { transform: translate(-5%, -1px) rotate(-0.5deg); }
+    50%  { transform: translate(0%, 1px) rotate(0.5deg); }
+    75%  { transform: translate(+5%, -1px) rotate(0.5deg); }
+    100% { transform: translate(0%, 0) rotate(0deg); }
+}
+
+@keyframes bounce {
+    0% { transform: translateY(0) rotate(var(--rot)); }
+    33% { transform: translateY(-6px) rotate(var(--rot)); }
+    66% { transform: translateY(-8px) rotate(var(--rot)); }
+    100% { transform: translateY(0) rotate(var(--rot)); }
+}
+
+@keyframes bg-animation {
+    0% {
+        background-image: url("./assets/Frame1.png"), var(--app-background-base);
+    }
+    8.33% {
+        background-image: url("./assets/Frame2.png"), var(--app-background-base);
+    }
+    16.66% {
+        background-image: url("./assets/Frame3.png"), var(--app-background-base);
+    }
+    25% {
+        background-image: url("./assets/Frame4.png"), var(--app-background-base);
+    }
+    33.33% {
+        background-image: url("./assets/Frame5.png"), var(--app-background-base);
+    }
+    41.66% {
+        background-image: url("./assets/Frame6.png"), var(--app-background-base);
+    }
+    50% {
+        background-image: url("./assets/Frame7.png"), var(--app-background-base);
+    }
+    58.33% {
+        background-image: url("./assets/Frame8.png"), var(--app-background-base);
+    }
+    66.66% {
+        background-image: url("./assets/Frame9.png"), var(--app-background-base);
+    }
+    75% {
+        background-image: url("./assets/Frame10.png"), var(--app-background-base);
+    }
+    83.33% {
+        background-image: url("./assets/Frame11.png"), var(--app-background-base);
+    }
+    91.66% {
+        background-image: url("./assets/Frame12.png"), var(--app-background-base);
+    }
+    100% {
+        background-image: url("./assets/Frame1.png"), var(--app-background-base);
+    }
+}
+
 /* ============================================
    TYPOGRAPHY
    ============================================ */
+
 .title {
     position: absolute;
-    top: 0;
+    top: 20px;
     left: 50%;
-    transform: translateX(-50%);
-    text-transform: uppercase;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 20px;
-    font-size: var(--font-size-xl);
-    text-align: center;
-    text-shadow: 2px 2px 10px black;
-    z-index: 1;
-    font-family: "Cinzel Decorative", cursive;
-    color: var(--color-success);
-    margin: 0;
-    padding: var(--spacing-md);
+    translate: -50% 0;
+    background: #ffcc00;
+    color: #000;
+
+    border: 4px solid #feffa6;
+    border-radius: 18px;
+
+    padding: 0.6rem 1.2rem;
+
+    animation: wobble 2s infinite ease-in-out;
 }
 
+.title span {
+    display: inline-block;
+    transform-origin: center;
+    font-size: 4rem;
+    font-weight: bold;
+    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
+
+    animation: bounce 1.2s infinite alternate;
+    animation-timing-function: ease-in-out;
+}
+
+.title span:nth-child(1) { --rot: -5deg; color: #ff4d4d; }
+.title span:nth-child(2) { --rot:  3deg; color: #5beb67; }
+.title span:nth-child(3) { --rot: -3deg; color: #ca8dfc; }
+.title span:nth-child(4) { --rot:  2deg; color: #6698f5; }
+.title span:nth-child(5) { --rot: -4deg; color: #ff66cc; }
+
+.title span:nth-child(2) { animation-delay: 0.2s; }
+.title span:nth-child(3) { animation-delay: 0.4s; }
+.title span:nth-child(4) { animation-delay: 0.6s; }
+.title span:nth-child(5) { animation-delay: 0.8s; }
+
+.title span { will-change: transform; }
+
 /* ============================================
    MENU
    ============================================ */
 
 .menu {
     position: fixed;
-    top: 0;
+    top: var(--spacing-lg);
     left: 50px;
-    padding: 0;
-    margin: 0;
-    z-index: var(--z-menu);
+
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xs);
+    gap: var(--spacing-lg);
+
+    z-index: var(--z-menu);
 }
 
 .menu__item {
     background: var(--color-surface);
-    color: var(--color-text);
+    border-radius: var(--radius-lg);
     border: 1px solid var(--color-surface-light);
     padding: var(--spacing-sm) var(--spacing-md);
     font-size: var(--font-size-md);
     cursor: pointer;
     transition: all var(--transition-fast);
-    text-align: left;
+    text-align: center;
 }
 
 .menu__item:hover {
@@ -159,25 +248,22 @@ body {
 
 .game {
     position: fixed;
-    top: 0;
+    top: var(--spacing-lg);
     right: 50px;
-    padding: 0;
-    margin: 0;
-    z-index: var(--z-menu);
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xs);
 }
 
 .game__item {
     background: var(--color-surface);
     color: var(--color-text);
+    border-radius: var(--radius-lg);
     border: 1px solid var(--color-surface-light);
     padding: var(--spacing-sm) var(--spacing-md);
     font-size: var(--font-size-md);
     cursor: pointer;
     transition: all var(--transition-fast);
-    text-align: right;
+    text-align: center;
 }
 
 .game__item:hover {
@@ -208,6 +294,8 @@ body {
 }
 
 .page__item {
+
+    border-radius: var(--radius-lg);
     background: var(--color-surface);
     color: var(--color-text);
     border: 1px solid var(--color-surface-light);
@@ -215,7 +303,7 @@ body {
     font-size: var(--font-size-md);
     cursor: pointer;
     transition: all var(--transition-fast);
-    text-align: right;
+    text-align: center;
 }
 
 .page__item:hover {
@@ -228,10 +316,10 @@ body {
     border-color: var(--color-primary);
 }
 
+
 /* ============================================
    BUTTONS
    ============================================ */
-
 .btn {
     display: inline-flex;
     align-items: center;
@@ -328,13 +416,15 @@ body {
     left: 50%;
     transform: translate(-50%, -50%);
     background: var(--color-bg);
-    border: 2px ridge var(--color-text);
     color: var(--color-text);
     z-index: var(--z-window);
     display: none;
     flex-direction: column;
     min-width: 280px;
     box-shadow: var(--shadow-lg);
+    border-radius: 5px;
+    border-color: #aa1f1f;
+    border: 6px solid #faac37;
 }
 
 .window--visible {
@@ -395,7 +485,8 @@ body {
 .message {
     font-size: var(--font-size-sm);
     padding: var(--spacing-xs);
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-lg);
+    border-color: #000;
 }
 
 .message--success {
@@ -415,6 +506,11 @@ body {
    ============================================ */
 .login {
     width: 320px;
+    border-radius: 5px;
+    border-color: #aa1f1f;
+    border: 6px solid #faac37;
+    background: #ffffff;
+    color: #000;
 }
 
 .login__form {
@@ -557,28 +653,74 @@ body {
 }
 
 /* ============================================
-   EASTER EGG BUTTON
+   STATS WINDOW
    ============================================ */
-/* .easter-egg {
-    position: absolute;
-    top: 20%;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 1;
-    background: var(--color-surface);
-    color: var(--color-text);
-    border: 1px solid var(--color-surface-light);
-    padding: var(--spacing-sm) var(--spacing-md);
-    cursor: pointer;
-    font-size: var(--font-size-md);
-    border-radius: var(--radius-md);
-    transition: all var(--transition-fast);
+.stats-window {
+    width: 320px;
 }
 
-.easter-egg:hover {
-    background: var(--color-error);
-    border-color: var(--color-error);
-} */
+.stats__avatar {
+    width: 72px;
+    height: 72px;
+    object-fit: cover;
+    border-radius: var(--radius-full);
+    border: 2px solid var(--color-text);
+    align-self: center;
+    display: block;
+    margin: 0 auto var(--spacing-xs);
+}
+
+.stats__username {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    text-align: center;
+    color: #000;
+    margin-bottom: var(--spacing-md);
+}
+
+.stats__section {
+    margin-bottom: var(--spacing-md);
+}
+
+.stats__section-title {
+    font-size: var(--font-size-sm);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--color-primary);
+    border-bottom: 1px solid var(--color-surface-light);
+    padding-bottom: var(--spacing-xs);
+    margin-bottom: var(--spacing-xs);
+}
+
+.stats__section-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.stats__row {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--font-size-sm);
+    padding: 3px 0;
+}
+
+.stats__label {
+    color: #333;
+}
+
+.stats__value {
+    font-weight: 600;
+    color: #000;
+}
+
+.stats__loading {
+    font-size: var(--font-size-sm);
+    color: #333;
+    text-align: center;
+    padding: var(--spacing-sm) 0;
+}
 
 /* ============================================
    UTILITIES
@@ -625,7 +767,7 @@ body {
 .friends__tab {
     flex: 1;
     padding: var(--spacing-sm);
-    background: var(--color-surface);
+    background: var(--color-surface-light);
     border: 1px solid var(--color-surface-light);
     color: var(--color-text);
     cursor: pointer;
@@ -705,317 +847,3 @@ body {
     color: var(--color-text-muted);
     padding: var(--spacing-lg);
 }
-
-/* ============================================
-   GAME ROOM WINDOW
-   ============================================ */
-.gameroom-window {
-    width: 600px;
-    height: 800px;
-}
-
-.gameroom__tabs {
-    display: flex;
-    gap: var(--spacing-xs);
-    margin-bottom: var(--spacing-sm);
-}
-
-.gameroom__tab {
-    flex: 1;
-    padding: var(--spacing-sm);
-    background: var(--color-surface);
-    border: 1px solid var(--color-surface-light);
-    color: var(--color-text);
-    cursor: pointer;
-    font-size: var(--font-size-sm);
-    transition: all var(--transition-fast);
-}
-
-.gameroom__tab:hover {
-    background: var(--color-surface-light);
-}
-
-.gameroom__tab--active {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-}
-
-.gameroom__content {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: hidden;
-}
-
-.gameroom__create {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-    margin-bottom: var(--spacing-sm);
-}
-
-.gameroom__list {
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-}
-
-.gameroom__item {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    padding: var(--spacing-sm);
-    background: var(--color-surface);
-    border-radius: var(--radius-md);
-}
-
-.gameroom__name {
-    flex: 1;
-    font-size: var(--font-size-md);
-    font-weight: 500;
-}
-
-.gameroom__players {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-    padding: var(--spacing-xs) var(--spacing-sm);
-    background: var(--color-surface-light);
-    border-radius: var(--radius-sm);
-}
-
-.gameroom__actions {
-    display: flex;
-    gap: var(--spacing-xs);
-}
-
-.gameroom__actions .btn {
-    padding: var(--spacing-xs) var(--spacing-sm);
-    font-size: var(--font-size-sm);
-}
-
-.gameroom__lobby {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    gap: var(--spacing-sm);
-}
-
-.gameroom__lobby-title {
-    margin: 0;
-    font-size: var(--font-size-lg);
-    text-align: center;
-    color: var(--color-success);
-}
-
-.gameroom__player-list {
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-    background: var(--color-surface);
-    border-radius: var(--radius-md);
-    padding: var(--spacing-sm);
-}
-
-.gameroom__player {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    padding: var(--spacing-xs) var(--spacing-sm);
-    background: var(--color-surface-light);
-    border-radius: var(--radius-sm);
-}
-
-.gameroom__player-avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: var(--radius-full);
-    object-fit: cover;
-    border: 2px solid var(--color-surface-light);
-}
-
-.gameroom__player-name {
-    flex: 1;
-    font-size: var(--font-size-md);
-}
-
-.gameroom__player-stats {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 2px;
-}
-
-.gameroom__player-score {
-    font-size: var(--font-size-sm);
-    color: var(--color-success);
-    font-weight: 500;
-}
-
-.gameroom__player-total {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-}
-
-.gameroom__empty {
-    text-align: center;
-    color: var(--color-text-muted);
-    padding: var(--spacing-lg);
-}
-
-/* ============================================
-   GAME - JEU DU PENDU/DESSIN
-   ============================================ */
-
-.gameroom__lobby-buttons {
-    display: flex;
-    gap: var(--spacing-sm);
-    margin-top: auto;
-}
-
-.gameroom__lobby-buttons .btn {
-    flex: 1;
-}
-
-.gameroom__game {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-    flex: 1;
-}
-
-.gameroom__game-info {
-    text-align: center;
-}
-
-.gameroom__drawer-info {
-    font-size: var(--font-size-md);
-    color: var(--color-text-muted);
-    padding: var(--spacing-xs);
-}
-
-.gameroom__scores-display {
-    font-size: var(--font-size-sm);
-    color: var(--color-success);
-    padding: var(--spacing-xs);
-    background: var(--color-surface);
-    border-radius: var(--radius-sm);
-    margin-top: var(--spacing-xs);
-}
-
-.gameroom__drawer-info--winner {
-    color: var(--color-success);
-    font-weight: bold;
-    animation: pulse 0.5s ease-in-out 3;
-}
-
-@keyframes pulse {
-    0%, 100% { transform: scale(1); }
-    50% { transform: scale(1.05); }
-}
-
-.gameroom__word-display {
-    font-size: var(--font-size-xl);
-    font-family: monospace;
-    text-align: center;
-    letter-spacing: 8px;
-    padding: var(--spacing-md);
-    background: var(--color-surface);
-    border-radius: var(--radius-md);
-    min-height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--color-success);
-}
-
-.gameroom__canvas-container {
-    display: flex;
-    justify-content: center;
-}
-
-.gameroom__canvas {
-    background: var(--color-surface-light);
-    border-radius: var(--radius-md);
-    cursor: crosshair;
-    border: 2px solid var(--color-surface-light);
-}
-
-.gameroom__draw-tools {
-    display: flex;
-    gap: var(--spacing-sm);
-    justify-content: center;
-    align-items: center;
-}
-
-.gameroom__color-picker {
-    width: 40px;
-    height: 32px;
-    border: none;
-    border-radius: var(--radius-sm);
-    cursor: pointer;
-    background: transparent;
-}
-
-.gameroom__word-input-container,
-.gameroom__guess-container {
-    display: flex;
-    gap: var(--spacing-sm);
-}
-
-.gameroom__word-input-container .input,
-.gameroom__guess-container .input {
-    flex: 1;
-}
-
-.gameroom__guess-container .input:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.gameroom__guess-container .btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.gameroom__guess-history {
-    flex: 1;
-    min-height: 60px;
-    max-height: 100px;
-    overflow-y: auto;
-    background: var(--color-surface);
-    border-radius: var(--radius-md);
-    padding: var(--spacing-sm);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs);
-}
-
-.gameroom__guess-item {
-    font-size: var(--font-size-sm);
-    padding: var(--spacing-xs) var(--spacing-sm);
-    border-radius: var(--radius-sm);
-}
-
-.gameroom__guess-item--success {
-    background: rgba(60, 255, 1, 0.2);
-    color: var(--color-success);
-}
-
-.gameroom__guess-item--fail {
-    background: rgba(255, 77, 77, 0.2);
-    color: var(--color-error);
-}
-
-.gameroom__game-buttons {
-    display: flex;
-    gap: var(--spacing-sm);
-    margin-top: var(--spacing-sm);
-}
-
-.gameroom__game-buttons .btn {
-    flex: 1;
-}

Transcendence/srcs/frontend/src/game.html

@@ -9,8 +9,15 @@
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
 	</head>
+	<script type="module" src="app.js"></script>
 	<body>
-		<h1 class="title">Lobby</h1>
+		<h1 class="title">
+		  <span>L</span>
+		  <span>o</span>
+		  <span>b</span>
+		  <span>b</span>
+		  <span>y</span>
+		</h1>
 
 		<nav class="menu" aria-label="Menu principal">
 			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
@@ -27,8 +34,5 @@
     <div class="page" aria-label="Page">
       <button class="page__item" data-action="gameroom" aria-label="Game Rooms">Game Rooms</button>
     </div>
-
-
-		<script type="module" src="app.js"></script>
 	</body>
 </html>

Transcendence/srcs/frontend/src/index.css

@@ -7,28 +7,28 @@
    CSS VARIABLES
    ============================================ */
 :root {
-    --color-primary: #0066cc;
-    --color-primary-hover: #0052a3;
+    --color-primary: #ffc75e;
+    --color-primary-hover: #ffc75e;
     --color-success: #3cff01;
-    --color-success-dark: #28a745;
+    --color-success-dark: #ffc75e;
     --color-error: #ff4d4d;
-    --color-warning: #ffc107;
-    --color-github: #24292e;
+    --color-warning: #ffc75e;
+    --color-github: #ffc75e;
 
-    --color-bg: #a3a3a3;
+    --color-bg: #ffe5b5;
 
     --app-background-base: radial-gradient(
         circle at top,
-        #000000,
-        #4d4d4d
+        #fff787,
+        #ff8080
     );
 
     --app-background-image: url("./assets/background.png");
 
-    --color-surface: #222;
-    --color-surface-light: #333;
-    --color-text: #fff;
-    --color-text-muted: #aaa;
+    --color-surface: #ffefce;
+    --color-surface-light: #ffc75e;
+    --color-text: #000000;
+    --color-text-muted: #000000;
 
     --font-size-base: 10px;
     --font-size-sm: 1.2rem;
@@ -117,16 +117,16 @@ body {
     text-align: center;
     text-shadow: 2px 2px 10px black;
     z-index: 1;
-    font-family: "Cinzel Decorative", cursive;
+    font-family: "Roboto";
+    letter-spacing: -10px;
     color: rgba(248, 252, 2, 0.6);
 
     margin: 0;
-    padding: var(--spacing-md);
+    padding: 0.6rem 1.2rem;
 
-    /* Rectangle + rounded corners */
-    background-color: rgba(247, 7, 67, 0.6);
+    background-color: #ffefce;
     border: 2px solid rgba(0, 0, 0, 0.6);
-    border-radius: 15px;
+    border-radius: var(--radius-lg);
 }
 
 
@@ -134,7 +134,7 @@ body {
    MENU
    ============================================ */
 
-.menu {
+/* .menu {
     position: fixed;
     top: 0;
     left: 50px;
@@ -144,17 +144,31 @@ body {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-xs);
+} */
+
+.menu {
+    position: fixed;
+    top: var(--spacing-lg);
+    left: 50px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+
+    z-index: var(--z-menu);
 }
 
 .menu__item {
     background: var(--color-surface);
     color: var(--color-text);
     border: 1px solid var(--color-surface-light);
+    border-radius: var(--radius-lg);
+    border-color: #000;
     padding: var(--spacing-sm) var(--spacing-md);
     font-size: var(--font-size-md);
     cursor: pointer;
     transition: all var(--transition-fast);
-    text-align: left;
+    text-align: center;
 }
 
 .menu__item:hover {
@@ -171,7 +185,7 @@ body {
    GAME
    ============================================ */
 
-.game {
+/* .game {
     position: fixed;
     top: 0;
     right: 50px;
@@ -181,17 +195,31 @@ body {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-xs);
+} */
+
+.game {
+    position: fixed;
+    top: var(--spacing-lg);
+    right: 50px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+
+    z-index: var(--z-menu);
 }
 
 .game__item {
     background: var(--color-surface);
     color: var(--color-text);
     border: 1px solid var(--color-surface-light);
+    border-radius: var(--radius-lg);
+    border-color: #000;
     padding: var(--spacing-sm) var(--spacing-md);
     font-size: var(--font-size-md);
     cursor: pointer;
     transition: all var(--transition-fast);
-    text-align: right;
+    text-align: center;
 }
 
 .game__item:hover {
@@ -303,13 +331,15 @@ body {
     left: 50%;
     transform: translate(-50%, -50%);
     background: var(--color-bg);
-    border: 2px ridge var(--color-text);
     color: var(--color-text);
     z-index: var(--z-window);
     display: none;
     flex-direction: column;
     min-width: 280px;
     box-shadow: var(--shadow-lg);
+    border-radius: 5px;
+    border-color: #aa1f1f;
+    border: 6px solid #faac37;
 }
 
 .window--visible {
@@ -370,7 +400,8 @@ body {
 .message {
     font-size: var(--font-size-sm);
     padding: var(--spacing-xs);
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-lg);
+    border-color: #000;
 }
 
 .message--success {
@@ -390,6 +421,11 @@ body {
    ============================================ */
 .login {
     width: 320px;
+    border-radius: 5px;
+    border-color: #aa1f1f;
+    border: 6px solid #faac37;
+    background: #ffffff;
+    color: #000;
 }
 
 .login__form {
@@ -601,30 +637,6 @@ body {
     padding: var(--spacing-sm) 0;
 }
 
-/* ============================================
-   EASTER EGG BUTTON
-   ============================================ */
-/* .easter-egg {
-    position: absolute;
-    top: 20%;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 1;
-    background: var(--color-surface);
-    color: var(--color-text);
-    border: 1px solid var(--color-surface-light);
-    padding: var(--spacing-sm) var(--spacing-md);
-    cursor: pointer;
-    font-size: var(--font-size-md);
-    border-radius: var(--radius-md);
-    transition: all var(--transition-fast);
-}
-
-.easter-egg:hover {
-    background: var(--color-error);
-    border-color: var(--color-error);
-} */
-
 /* ============================================
    UTILITIES
    ============================================ */
@@ -670,7 +682,7 @@ body {
 .friends__tab {
     flex: 1;
     padding: var(--spacing-sm);
-    background: var(--color-surface);
+    background: var(--color-surface-light);
     border: 1px solid var(--color-surface-light);
     color: var(--color-text);
     cursor: pointer;

Transcendence/srcs/frontend/src/index.html

@@ -3,14 +3,14 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>Transcendence.io</title>
+		<title>Transcendence</title>
 		<link rel="stylesheet" href="index.css" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
 	</head>
 	<body>
-		<h1 class="title">Transcendence.io</h1>
+		<h1 class="title">Transcendence</h1>
 
 		<nav class="menu" aria-label="Menu principal">
 			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
@@ -20,8 +20,8 @@
 		</nav>
 
 		<nav class="game" aria-label="Game">
-			<button class="game__item" data-action="new_game" aria-label="Start new game"
-			onclick="window.location.href='game.html'">Start new game</button>
+			<button class="game__item" data-action="new_game" aria-label="Skkrrribl.io"
+			onclick="window.location.href='game.html'">Skkrrribl.io</button>
 			<button class="game__item" data-action="tetris" aria-label="Tetris"
 			onclick="window.location.href='tetris.html'">Tetris</button>
 		</nav>