From 67d09ec1356b408853e0381cfaaadaff8eeaa071 Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Mon, 29 Jun 2026 20:25:40 +0530
Subject: [PATCH 01/14] prod

---
 client/index.html            |  5 +-
 client/index.js              | 15 ++++--
 gateway/index.ts             | 13 +++--
 gateway/routes/addToRoom.ts  | 19 +++++--
 gateway/routes/createRoom.ts | 35 +++++++++----
 k8s.yaml                     | 98 ++++++++++++++++++++++++++++++++++--
 scripts/gen-stream-ports.sh  | 36 +++++++++++++
 server/server.ts             | 42 ++++++++++++++--
 8 files changed, 231 insertions(+), 32 deletions(-)
 create mode 100755 scripts/gen-stream-ports.sh

diff --git a/client/index.html b/client/index.html
index 333249f..ebbd2f4 100644
--- a/client/index.html
+++ b/client/index.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Box Game</title>
+    <meta name="description" content="Jump, collect hearts, and beat your friends in Box Game – a fast-paced multiplayer platformer." />
     <link rel="shortcut icon" href="icon.png" type="image" />
     <link rel="stylesheet" href="styles.css" />
 </head>
@@ -63,9 +64,9 @@ <h3>Options</h3>
     <script src="https://cdn.socket.io/4.8.3/socket.io.min.js"
         integrity="sha384-kzavj5fiMwLKzzD1f8S7TeoVIEi7uKHvbTA3ueZkrzYq75pNQUiUi6Dy98Q3fxb0"
         crossorigin="anonymous"></script>
-    <!-- ⬇ Change this URL when deploying to Vercel (point to your VM's gateway) -->
+    <!-- Gateway URL: set to production gateway for Vercel deployment -->
     <script>
-        window.GATEWAY_URL = "http://localhost:8080";
+        window.GATEWAY_URL = "https://gateway.boxgame.shadyggs.xyz";
     </script>
     <script src="index.js"></script>
     <script src="game.js"></script>
diff --git a/client/index.js b/client/index.js
index 2d02a8f..e527a22 100644
--- a/client/index.js
+++ b/client/index.js
@@ -2,9 +2,16 @@
 // GATEWAY_URL is injected by index.html as a <script> block so it works
 // both locally and on Vercel without a bundler.
 // Locally:  window.GATEWAY_URL = "http://localhost:3000"
-// Vercel:   window.GATEWAY_URL = "https://<your-vm-ip-or-domain>"
+// Vercel:   window.GATEWAY_URL = "https://gateway.boxgame.shadyggs.xyz"
 const GATEWAY_URL = window.GATEWAY_URL || "http://localhost:3000";
 
+// In production the game-server domain is server.boxgame.shadyggs.xyz.
+// Nginx terminates TLS for wss://server.boxgame.shadyggs.xyz:<port> and
+// forwards to the hostNetwork pod on the same port.
+// In local dev the cookie will contain "localhost" so http:// is used.
+const isLocalDev = GATEWAY_URL.startsWith("http://");
+const WS_SCHEME = isLocalDev ? "http" : "wss";
+
 // socket is created lazily after a room is assigned so we know which
 // game-server host+port to connect to.
 let socket = null;
@@ -73,8 +80,8 @@ createRoomBtn.addEventListener("click", async () => {
       return;
     }
 
-    // Connect socket directly to the assigned game-server
-    connectSocket(`http://${hostIp}:${port}`, () => {
+    // Connect socket directly to the assigned game-server via TLS in prod
+    connectSocket(`${WS_SCHEME}://${hostIp}:${port}`, () => {
       socket.emit("createRoom", pName, roomID, (ack) => {
         setLobbyLoading(false);
         if (ack && ack.success) {
@@ -127,7 +134,7 @@ joinRoomBtn.addEventListener("click", async () => {
       return;
     }
 
-    connectSocket(`http://${hostIp}:${port}`, () => {
+    connectSocket(`${WS_SCHEME}://${hostIp}:${port}`, () => {
       socket.emit("joinRoom", { name: pName, code }, (ack) => {
         setLobbyLoading(false);
         if (ack && ack.success) {
diff --git a/gateway/index.ts b/gateway/index.ts
index 9e54091..02e7311 100644
--- a/gateway/index.ts
+++ b/gateway/index.ts
@@ -5,17 +5,19 @@ import addToRoom from "./routes/addToRoom";
 
 const app = express();
 app.use(express.json());
+
+// Allow the client origin to send credentials (cookies).
+// Locally:   ALLOWED_ORIGIN=http://localhost:5500  (or omit for *)
+// On Vercel: ALLOWED_ORIGIN=https://your-app.vercel.app
+const allowedOrigin = process.env.ALLOWED_ORIGIN || "http://localhost:5500";
+
 app.use(
   cors({
-    origin: "http://localhost:3000",
+    origin: allowedOrigin,
     credentials: true,
   }),
 );
 
-// Allow the client origin to send credentials (cookies).
-// Locally: http://localhost:5500 or file:// – use * for dev convenience.
-// On Vercel: set ALLOWED_ORIGIN=https://your-app.vercel.app
-
 const port = process.env.PORT || 3000;
 let roomMaps: { [id: string]: { [id: string]: string | number } } = {};
 
@@ -28,6 +30,7 @@ app.get("/createRoom", createRoom);
 
 app.listen(port, () => {
   console.log(`Listening on ${port}`);
+  console.log(`CORS allowed origin: ${allowedOrigin}`);
 });
 
 export default roomMaps;
diff --git a/gateway/routes/addToRoom.ts b/gateway/routes/addToRoom.ts
index 3644719..68f0e81 100644
--- a/gateway/routes/addToRoom.ts
+++ b/gateway/routes/addToRoom.ts
@@ -1,5 +1,17 @@
 import { type Request, type Response } from "express";
 import roomMaps from "../index.ts";
+
+// Cross-site cookie options – must match createRoom.ts
+const COOKIE_OPTS = {
+  sameSite: "none" as const,
+  secure: true,
+  httpOnly: false,
+};
+
+// Public hostname clients use to reach game-server pods (same as createRoom)
+const SERVER_HOST_DOMAIN =
+  process.env.SERVER_HOST_DOMAIN || "localhost";
+
 const addToRoom = async (req: Request, res: Response) => {
   // roomID comes from the query string: GET /add?roomID=ABCDE
   const roomId = (req.query.roomID as string | undefined)?.toUpperCase();
@@ -8,9 +20,10 @@ const addToRoom = async (req: Request, res: Response) => {
     return;
   }
 
-  // Use the same cookie names as createRoom so the client's getCookie() works
-  res.cookie("hostIp", roomMaps[roomId]["hostIp"]);
-  res.cookie("port", roomMaps[roomId]["port"]);
+  // Use the same cookie names as createRoom so the client's getCookie() works.
+  // Always send the public domain as hostIp so the browser can open wss://.
+  res.cookie("hostIp", SERVER_HOST_DOMAIN, COOKIE_OPTS);
+  res.cookie("port", roomMaps[roomId]["port"], COOKIE_OPTS);
   res.status(200).send("here have your server");
   return;
 };
diff --git a/gateway/routes/createRoom.ts b/gateway/routes/createRoom.ts
index d127567..2049206 100644
--- a/gateway/routes/createRoom.ts
+++ b/gateway/routes/createRoom.ts
@@ -1,10 +1,25 @@
 import { type Request, type Response } from "express";
 import generateRoom from "../helper/generateRoom";
 import roomMaps from "../index.ts";
+
+// Cross-site cookie options required for Vercel (HTTPS) → VM (different origin).
+// SameSite=None + Secure is mandatory for browsers to send cookies cross-site.
+const COOKIE_OPTS = {
+  sameSite: "none" as const,
+  secure: true,
+  httpOnly: false, // client JS must read these values
+};
+
+// The public hostname clients use to reach game-server pods.
+// Set SERVER_HOST_DOMAIN=server.boxgame.shadyggs.xyz in production.
+// The raw pod IP (hostNetwork) is unreachable from the browser.
+const SERVER_HOST_DOMAIN =
+  process.env.SERVER_HOST_DOMAIN || "localhost";
+
 const createRoom = async (_: Request, res: Response) => {
   let code: string;
 
-  // Generate a unqiue room code
+  // Generate a unique room code
   do {
     code = generateRoom();
   } while (roomMaps[code] != undefined);
@@ -24,21 +39,21 @@ const createRoom = async (_: Request, res: Response) => {
       return;
     }
 
-    let roomInfo = {
-      hostIp: "",
-      port: 0,
+    const roomInfo = {
+      // Store raw hostIp internally for reference, but tell the client to use
+      // the public domain so TLS (wss://) works from the browser.
+      hostIp: SERVER_HOST_DOMAIN,
+      port: Number(response.headers.get("port")),
     };
-    roomInfo.hostIp = response.headers.get("hostip")!;
-    roomInfo.port = Number(response.headers.get("port"));
 
     // Add roominfo in the map
     // TODO: Instead of using a map, use a key value store like Redis
     roomMaps[code] = roomInfo;
 
-    // Set cookies
-    res.cookie("hostIp", roomInfo.hostIp);
-    res.cookie("port", roomInfo.port);
-    res.cookie("roomID", code);
+    // Set cookies – must be SameSite=None; Secure for cross-site delivery
+    res.cookie("hostIp", roomInfo.hostIp, COOKIE_OPTS);
+    res.cookie("port", roomInfo.port, COOKIE_OPTS);
+    res.cookie("roomID", code, COOKIE_OPTS);
     res.status(200).send("Here have your server");
   } catch (e) {
     console.error(e);
diff --git a/k8s.yaml b/k8s.yaml
index 4127b28..c68f20a 100644
--- a/k8s.yaml
+++ b/k8s.yaml
@@ -177,6 +177,14 @@ spec:
             # Talk to server-manager inside the cluster
             - name: SERVER_MANAGER_URL
               value: "http://server-manager-svc.box-game.svc.cluster.local:4689"
+            # Origin allowed by CORS – must match the Vercel deployment URL.
+            # Update this to your exact Vercel URL after first deploy.
+            - name: ALLOWED_ORIGIN
+              value: "https://boxgame.shadyggs.xyz"
+            # Public domain that clients use to reach game-server pods over wss://.
+            # Nginx stream on the VM terminates TLS and forwards to the pod port.
+            - name: SERVER_HOST_DOMAIN
+              value: "server.boxgame.shadyggs.xyz"
           readinessProbe:
             httpGet:
               path: /healthz
@@ -213,8 +221,8 @@ spec:
       targetPort: 3000
       protocol: TCP
       name: http
-  # Change to LoadBalancer if your cluster is on a cloud provider
-  type: LoadBalancer
+  # ClusterIP: Nginx Ingress handles external TLS termination for gateway.boxgame.shadyggs.xyz
+  type: ClusterIP
 
 ---
 # =============================================================================
@@ -256,6 +264,14 @@ data:
                   fieldPath: status.hostIP
             - name: SERVER_MANAGER_URL
               value: "http://server-manager-svc.box-game.svc.cluster.local:4689"
+            # Port range for game-server sockets.
+            # Nginx stream on the host forwards this range with TLS so that
+            # the browser can open wss://server.boxgame.shadyggs.xyz:<port>.
+            # Ensure these ports are open in the VM firewall (ufw / iptables).
+            - name: PORT_MIN
+              value: "30000"
+            - name: PORT_MAX
+              value: "31000"
           resources:
             requests:
               cpu: "200m"
@@ -307,7 +323,18 @@ spec:
                   fieldPath: status.hostIP
             - name: SERVER_MANAGER_URL
               value: "http://server-manager-svc.box-game.svc.cluster.local:4689"
-          # No fixed containerPort – the server calls listen(0) for a random port
+          env:
+            - name: HOST_IP
+              valueFrom:
+                fieldRef:
+                  fieldPath: status.hostIP
+            - name: SERVER_MANAGER_URL
+              value: "http://server-manager-svc.box-game.svc.cluster.local:4689"
+            - name: PORT_MIN
+              value: "30000"
+            - name: PORT_MAX
+              value: "31000"
+          # No fixed containerPort – the server picks a port in [PORT_MIN, PORT_MAX]
           resources:
             requests:
               cpu: "200m"
@@ -315,3 +342,68 @@ spec:
             limits:
               cpu: "1000m"
               memory: "512Mi"
+
+---
+# =============================================================================
+# CERT-MANAGER – ClusterIssuer (Let's Encrypt)
+# =============================================================================
+# Prerequisites (run once on the VM):
+#   kubectl apply -f https://github.com/cert-manager/cert-manager/releases/latest/download/cert-manager.yaml
+# =============================================================================
+
+---
+apiVersion: cert-manager.io/v1
+kind: ClusterIssuer
+metadata:
+  name: letsencrypt-prod
+spec:
+  acme:
+    server: https://acme-v02.api.letsencrypt.org/directory
+    # Replace with your real email – Let's Encrypt sends expiry warnings here.
+    email: admin@boxgame.shadyggs.xyz
+    privateKeySecretRef:
+      name: letsencrypt-prod-key
+    solvers:
+      - http01:
+          ingress:
+            class: nginx
+
+---
+# =============================================================================
+# NGINX INGRESS – gateway.boxgame.shadyggs.xyz → HTTPS
+# =============================================================================
+# Prerequisites (run once on the VM, kubeadm):
+#   kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.10.1/deploy/static/provider/baremetal/deploy.yaml
+# Then patch it to use host ports 80/443:
+#   kubectl patch svc ingress-nginx-controller -n ingress-nginx \
+#     -p '{"spec":{"type":"NodePort","externalTrafficPolicy":"Local"}}'
+# =============================================================================
+
+---
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: gateway-ingress
+  namespace: box-game
+  annotations:
+    kubernetes.io/ingress.class: nginx
+    cert-manager.io/cluster-issuer: letsencrypt-prod
+    # Required for Socket.IO long-polling fallback (not used, but safe to have)
+    nginx.ingress.kubernetes.io/proxy-read-timeout: "3600"
+    nginx.ingress.kubernetes.io/proxy-send-timeout: "3600"
+spec:
+  tls:
+    - hosts:
+        - gateway.boxgame.shadyggs.xyz
+      secretName: gateway-tls
+  rules:
+    - host: gateway.boxgame.shadyggs.xyz
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: gateway-svc
+                port:
+                  number: 80
diff --git a/scripts/gen-stream-ports.sh b/scripts/gen-stream-ports.sh
new file mode 100755
index 0000000..e75bd47
--- /dev/null
+++ b/scripts/gen-stream-ports.sh
@@ -0,0 +1,36 @@
+#!/usr/bin/env bash
+# =============================================================================
+# gen-stream-ports.sh
+# =============================================================================
+# Generates /etc/nginx/stream.d/gameserver-ports.conf
+# Each game-server pod listens on a port in [PORT_MIN, PORT_MAX] via
+# hostNetwork. This script creates one Nginx stream server block per port
+# so that TLS is terminated and traffic is forwarded to 127.0.0.1:<port>.
+#
+# Run on the VM (requires root / sudo):
+#   sudo bash scripts/gen-stream-ports.sh
+#   sudo nginx -t && sudo systemctl reload nginx
+# =============================================================================
+
+set -euo pipefail
+
+PORT_MIN="${PORT_MIN:-30000}"
+PORT_MAX="${PORT_MAX:-31000}"
+OUT="/etc/nginx/stream.d/gameserver-ports.conf"
+
+echo "Generating stream blocks for ports ${PORT_MIN}–${PORT_MAX} → ${OUT}"
+
+{
+  echo "# AUTO-GENERATED by gen-stream-ports.sh – do not edit manually"
+  echo "# Re-run the script to regenerate after changing PORT_MIN / PORT_MAX"
+  echo ""
+  for port in $(seq "$PORT_MIN" "$PORT_MAX"); do
+    echo "server {"
+    echo "    listen ${port} ssl;"
+    echo "    proxy_pass 127.0.0.1:${port};"
+    echo "}"
+    echo ""
+  done
+} | sudo tee "$OUT" > /dev/null
+
+echo "Done. Run: sudo nginx -t && sudo systemctl reload nginx"
diff --git a/server/server.ts b/server/server.ts
index 0cd50b3..e85a774 100644
--- a/server/server.ts
+++ b/server/server.ts
@@ -615,7 +615,37 @@ app.get("/status", () => {
   console.log("Server is upppp");
 });
 
-server.listen(0, async () => {
+// ============== PORT SELECTION ==============
+// In production, game-server pods must listen on a port within PORT_MIN–PORT_MAX
+// so that the host Nginx stream proxy (which terminates TLS for
+// wss://server.boxgame.shadyggs.xyz:<port>) can forward the traffic.
+// In local dev, PORT_MIN / PORT_MAX are unset → falls back to listen(0).
+const PORT_MIN = process.env.PORT_MIN ? parseInt(process.env.PORT_MIN) : 0;
+const PORT_MAX = process.env.PORT_MAX ? parseInt(process.env.PORT_MAX) : 0;
+
+function pickPort(): number {
+  if (!PORT_MIN || !PORT_MAX) return 0; // let OS pick (local dev)
+  return PORT_MIN + Math.floor(Math.random() * (PORT_MAX - PORT_MIN + 1));
+}
+
+async function startOnPort(port: number, retries = 20): Promise<void> {
+  return new Promise((resolve, reject) => {
+    server.once("error", async (err: NodeJS.ErrnoException) => {
+      if (err.code === "EADDRINUSE" && retries > 0) {
+        // Port taken – try another one in the range
+        server.removeAllListeners("error");
+        const next = pickPort();
+        console.warn(`Port ${port} in use, trying ${next}…`);
+        await startOnPort(next, retries - 1).then(resolve).catch(reject);
+      } else {
+        reject(err);
+      }
+    });
+    server.listen(port, resolve);
+  });
+}
+
+startOnPort(pickPort()).then(async () => {
   const address = server.address() as AddressInfo;
   const serverInfo = {
     hostIp: process.env.HOST_IP,
@@ -625,12 +655,14 @@ server.listen(0, async () => {
 
   await fetch(`${process.env.SERVER_MANAGER_URL}/register`, {
     method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
+    headers: { "Content-Type": "application/json" },
     body: JSON.stringify(serverInfo),
   });
 
-  console.log(`Server running on http://localhost:${address.port}`);
+  console.log(`Server running on port ${address.port}`);
+  console.log(`Port range: ${PORT_MIN || "OS-assigned"}–${PORT_MAX || ""}`);
   console.log(`Tick rate: ${tick}`);
+}).catch((err) => {
+  console.error("Failed to bind to any port:", err);
+  process.exit(1);
 });

From a025071ac3be0a1d04c4871ff8219c8b3f3f71db Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Wed, 1 Jul 2026 10:35:44 +0530
Subject: [PATCH 02/14] debug

---
 client/index.html | 3 ++-
 client/index.js   | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/index.html b/client/index.html
index ebbd2f4..370b731 100644
--- a/client/index.html
+++ b/client/index.html
@@ -5,7 +5,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Box Game</title>
-    <meta name="description" content="Jump, collect hearts, and beat your friends in Box Game – a fast-paced multiplayer platformer." />
+    <meta name="description"
+        content="Jump, collect hearts, and beat your friends in Box Game – a fast-paced multiplayer platformer." />
     <link rel="shortcut icon" href="icon.png" type="image" />
     <link rel="stylesheet" href="styles.css" />
 </head>
diff --git a/client/index.js b/client/index.js
index e527a22..02e2387 100644
--- a/client/index.js
+++ b/client/index.js
@@ -73,6 +73,7 @@ createRoomBtn.addEventListener("click", async () => {
     const hostIp = getCookie("hostIp");
     const port = getCookie("port");
     const roomID = getCookie("roomID");
+    console.log(`hostIp: ${hostIp}, port: ${port}`);
 
     if (!hostIp || !port || !roomID) {
       showLobbyError("Server response missing. Try again.");

From c228d5cb92778b53c4c3d03605c6abe441bcda1b Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Sat, 4 Jul 2026 13:42:49 +0530
Subject: [PATCH 03/14] fix: deployment changes

---
 client/index.js              |  2 +-
 gateway/index.ts             |  6 ++-
 gateway/routes/createRoom.ts | 24 ++++++++++--
 server-manager/index.ts      |  8 +---
 server/Dockerfile            |  2 +-
 server/server.ts             | 71 +++++++++++++++++++++++++-----------
 6 files changed, 78 insertions(+), 35 deletions(-)

diff --git a/client/index.js b/client/index.js
index 02e2387..d0384e3 100644
--- a/client/index.js
+++ b/client/index.js
@@ -3,7 +3,7 @@
 // both locally and on Vercel without a bundler.
 // Locally:  window.GATEWAY_URL = "http://localhost:3000"
 // Vercel:   window.GATEWAY_URL = "https://gateway.boxgame.shadyggs.xyz"
-const GATEWAY_URL = window.GATEWAY_URL || "http://localhost:3000";
+const GATEWAY_URL = window.GATEWAY_URL;
 
 // In production the game-server domain is server.boxgame.shadyggs.xyz.
 // Nginx terminates TLS for wss://server.boxgame.shadyggs.xyz:<port> and
diff --git a/gateway/index.ts b/gateway/index.ts
index 02e7311..8b9ecda 100644
--- a/gateway/index.ts
+++ b/gateway/index.ts
@@ -9,7 +9,11 @@ app.use(express.json());
 // Allow the client origin to send credentials (cookies).
 // Locally:   ALLOWED_ORIGIN=http://localhost:5500  (or omit for *)
 // On Vercel: ALLOWED_ORIGIN=https://your-app.vercel.app
-const allowedOrigin = process.env.ALLOWED_ORIGIN || "http://localhost:5500";
+const allowedOrigin = [
+  "https://gateway.boxgame.shadyggs.xyz",
+  "http://localhost:4689",
+  "https://boxgame.shadyggs.xyz",
+];
 
 app.use(
   cors({
diff --git a/gateway/routes/createRoom.ts b/gateway/routes/createRoom.ts
index 2049206..035c994 100644
--- a/gateway/routes/createRoom.ts
+++ b/gateway/routes/createRoom.ts
@@ -13,8 +13,26 @@ const COOKIE_OPTS = {
 // The public hostname clients use to reach game-server pods.
 // Set SERVER_HOST_DOMAIN=server.boxgame.shadyggs.xyz in production.
 // The raw pod IP (hostNetwork) is unreachable from the browser.
-const SERVER_HOST_DOMAIN =
-  process.env.SERVER_HOST_DOMAIN || "localhost";
+
+async function fetchWithRetry(url: string, retries = 30) {
+  while (retries--) {
+    try {
+      const res = await fetch(url);
+
+      if (res.ok) {
+        return res;
+      }
+    } catch (err) {
+      console.error(err);
+      console.log("Waiting for server manager...");
+    }
+
+    await new Promise((r) => setTimeout(r, 1000));
+  }
+
+  throw new Error("Server manager unavailable");
+}
+const SERVER_HOST_DOMAIN = process.env.SERVER_HOST_DOMAIN || "localhost";
 
 const createRoom = async (_: Request, res: Response) => {
   let code: string;
@@ -28,7 +46,7 @@ const createRoom = async (_: Request, res: Response) => {
 
   try {
     // Get assigned a server
-    const response = await fetch(`${serverManager}/assign`);
+    const response = await fetchWithRetry(`${serverManager}/assign`);
 
     // Validate response
     if (
diff --git a/server-manager/index.ts b/server-manager/index.ts
index e7a7c1c..e475be3 100644
--- a/server-manager/index.ts
+++ b/server-manager/index.ts
@@ -3,15 +3,9 @@ import express from "express";
 import assignServer from "./routes/assignServer";
 import Heap from "./helper/heap";
 import handleRegister from "./routes/handleRegister";
-import cors from "cors";
 import { type Request, type Response } from "express";
 
 const app = express();
-app.use(
-  cors({
-    credentials: true,
-  }),
-);
 const port = process.env.PORT || 4689;
 app.use(express.json());
 
@@ -23,7 +17,7 @@ app.get("/health", (req: Request, res: Response) => {
   res.status(200).send("Yooo we're up");
 });
 
-app.listen(port, () => {
+app.listen({ port: Number(port), host: "0.0.0.0" }, () => {
   console.log(`Server listening on http://localhost:${port}`);
 });
 
diff --git a/server/Dockerfile b/server/Dockerfile
index 0d88996..419bc12 100644
--- a/server/Dockerfile
+++ b/server/Dockerfile
@@ -13,7 +13,7 @@ RUN npx tsc --target ES2020 --module commonjs --esModuleInterop true \
     --resolveJsonModule true --skipLibCheck true --outDir dist server.ts
 
 # ---- Runtime stage ----
-FROM node:lts-alpine AS runtime
+FROM node:lts-slim AS runtime
 
 WORKDIR /app
 
diff --git a/server/server.ts b/server/server.ts
index e85a774..76a16ac 100644
--- a/server/server.ts
+++ b/server/server.ts
@@ -1,3 +1,4 @@
+import { type Request, type Response } from "express";
 import express from "express";
 import http from "http";
 import { AddressInfo } from "net";
@@ -611,8 +612,8 @@ function makePlayer(id: string, name: string) {
 }
 
 // Status endpoint
-app.get("/status", () => {
-  console.log("Server is upppp");
+app.get("/status", (req: Request, res: Response) => {
+  res.sendStatus(200);
 });
 
 // ============== PORT SELECTION ==============
@@ -636,7 +637,9 @@ async function startOnPort(port: number, retries = 20): Promise<void> {
         server.removeAllListeners("error");
         const next = pickPort();
         console.warn(`Port ${port} in use, trying ${next}…`);
-        await startOnPort(next, retries - 1).then(resolve).catch(reject);
+        await startOnPort(next, retries - 1)
+          .then(resolve)
+          .catch(reject);
       } else {
         reject(err);
       }
@@ -644,25 +647,49 @@ async function startOnPort(port: number, retries = 20): Promise<void> {
     server.listen(port, resolve);
   });
 }
+startOnPort(pickPort())
+  .then(async () => {
+    const address = server.address() as AddressInfo;
+
+    const serverInfo = {
+      hostIp: process.env.HOST_IP,
+      port: address.port,
+      connections: 0,
+    };
 
-startOnPort(pickPort()).then(async () => {
-  const address = server.address() as AddressInfo;
-  const serverInfo = {
-    hostIp: process.env.HOST_IP,
-    port: address.port,
-    connections: 0,
-  };
+    while (true) {
+      try {
+        console.log("SERVER_MANAGER_URL =", process.env.SERVER_MANAGER_URL);
+        console.log("HOST_IP =", process.env.HOST_IP);
+        console.log("Register payload =", serverInfo);
+        const response = await fetch(
+          `${process.env.SERVER_MANAGER_URL}/register`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(serverInfo),
+          },
+        );
+
+        if (!response.ok) {
+          throw new Error(`Registration failed: HTTP ${response.status}`);
+        }
 
-  await fetch(`${process.env.SERVER_MANAGER_URL}/register`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(serverInfo),
-  });
+        console.log("Successfully registered with server-manager.");
+        break;
+      } catch (err) {
+        console.error("Registration failed, retrying in 2 seconds...", err);
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+      }
+    }
 
-  console.log(`Server running on port ${address.port}`);
-  console.log(`Port range: ${PORT_MIN || "OS-assigned"}–${PORT_MAX || ""}`);
-  console.log(`Tick rate: ${tick}`);
-}).catch((err) => {
-  console.error("Failed to bind to any port:", err);
-  process.exit(1);
-});
+    console.log(`Server running on port ${address.port}`);
+    console.log(`Port range: ${PORT_MIN || "OS-assigned"}–${PORT_MAX || ""}`);
+    console.log(`Tick rate: ${tick}`);
+  })
+  .catch((err) => {
+    console.error("Unable to start HTTP server:", err);
+    process.exit(1);
+  });

From 26be75dea1b2e9565c290199a9953aed27c6cbfb Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Sat, 4 Jul 2026 13:56:19 +0530
Subject: [PATCH 04/14] fix: config changes to include other configs inside the
 main config and fix port mapping.

---
 k8s.yaml | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/k8s.yaml b/k8s.yaml
index c68f20a..21cc608 100644
--- a/k8s.yaml
+++ b/k8s.yaml
@@ -211,19 +211,31 @@ kind: Service
 metadata:
   name: gateway-svc
   namespace: box-game
-  labels:
-    app: gateway
 spec:
   selector:
     app: gateway
   ports:
-    - port: 80
+    - port: 3000
       targetPort: 3000
       protocol: TCP
-      name: http
-  # ClusterIP: Nginx Ingress handles external TLS termination for gateway.boxgame.shadyggs.xyz
   type: ClusterIP
 
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: gateway-nodeport
+  namespace: box-game
+spec:
+  type: NodePort
+  selector:
+    app: gateway
+  ports:
+    - name: http
+      port: 3000
+      targetPort: 3000
+      nodePort: 31000
+
 ---
 # =============================================================================
 # GAME-SERVER POD TEMPLATE (used by server-manager to spawn pods)
@@ -316,13 +328,6 @@ spec:
         - name: game-server
           image: docker.io/shadyggs/boxgame-server:latest
           imagePullPolicy: Always
-          env:
-            - name: HOST_IP
-              valueFrom:
-                fieldRef:
-                  fieldPath: status.hostIP
-            - name: SERVER_MANAGER_URL
-              value: "http://server-manager-svc.box-game.svc.cluster.local:4689"
           env:
             - name: HOST_IP
               valueFrom:
@@ -406,4 +411,4 @@ spec:
               service:
                 name: gateway-svc
                 port:
-                  number: 80
+                  number: 3000

From 9c694bbc4e1533834645b5c823f6050f7d7c31e3 Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Sat, 4 Jul 2026 14:06:15 +0530
Subject: [PATCH 05/14] fix: hardcoded ip to test dns resolution

---
 k8s.yaml                     |  4 +-
 nginx-gameserver-stream.conf | 83 ++++++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 nginx-gameserver-stream.conf

diff --git a/k8s.yaml b/k8s.yaml
index 21cc608..67b9765 100644
--- a/k8s.yaml
+++ b/k8s.yaml
@@ -176,7 +176,7 @@ spec:
               value: "3000"
             # Talk to server-manager inside the cluster
             - name: SERVER_MANAGER_URL
-              value: "http://server-manager-svc.box-game.svc.cluster.local:4689"
+              value: "http://10.99.57.238:4689"
             # Origin allowed by CORS – must match the Vercel deployment URL.
             # Update this to your exact Vercel URL after first deploy.
             - name: ALLOWED_ORIGIN
@@ -334,7 +334,7 @@ spec:
                 fieldRef:
                   fieldPath: status.hostIP
             - name: SERVER_MANAGER_URL
-              value: "http://server-manager-svc.box-game.svc.cluster.local:4689"
+              value: "http://10.99.57.238:4689"
             - name: PORT_MIN
               value: "30000"
             - name: PORT_MAX
diff --git a/nginx-gameserver-stream.conf b/nginx-gameserver-stream.conf
new file mode 100644
index 0000000..c45acd8
--- /dev/null
+++ b/nginx-gameserver-stream.conf
@@ -0,0 +1,83 @@
+# =============================================================================
+# HOST-LEVEL NGINX STREAM CONFIG – game-server TLS proxy
+# =============================================================================
+# Purpose
+# -------
+# Game-server pods use hostNetwork and listen on ports 30000–31000 on the VM's
+# host network. The client is served from Vercel (HTTPS), so it must connect
+# via wss:// (TLS). Plain ws:// is blocked by browsers as mixed content.
+#
+# This Nginx stream block terminates TLS for server.boxgame.shadyggs.xyz and
+# forwards each connection to the same port on 127.0.0.1, where the game-server
+# pod is already listening (hostNetwork means the pod port IS the VM port).
+#
+# Deployment steps
+# ----------------
+# 1. Install nginx on the VM (NOT inside k8s – this runs on the host):
+#        sudo apt install nginx
+#
+# 2. Obtain a TLS cert for server.boxgame.shadyggs.xyz.
+#    If cert-manager issued one for gateway.boxgame.shadyggs.xyz you can reuse
+#    the same VM cert, or get a wildcard cert for *.boxgame.shadyggs.xyz.
+#    Recommended: use certbot standalone for this domain:
+#        sudo certbot certonly --standalone -d server.boxgame.shadyggs.xyz
+#    Cert will land at:
+#        /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/fullchain.pem
+#        /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/privkey.pem
+#
+# 3. Enable the stream module. In /etc/nginx/nginx.conf add at the top level
+#    (outside the http {} block):
+#        stream {
+#            include /etc/nginx/stream.d/*.conf;
+#        }
+#
+# 4. Copy this file:
+#        sudo mkdir -p /etc/nginx/stream.d
+#        sudo cp nginx-gameserver-stream.conf /etc/nginx/stream.d/gameserver-tls.conf
+#
+# 5. Test and reload:
+#        sudo nginx -t && sudo systemctl reload nginx
+#
+# 6. Open the port range in the firewall:
+#        sudo ufw allow 30000:31000/tcp
+#        sudo ufw allow 443/tcp   # for gateway Ingress
+#        sudo ufw allow 80/tcp    # for Let's Encrypt HTTP-01 challenge
+# =============================================================================
+
+stream {
+    # ── TLS context shared by all server blocks in this file ────────────────
+    ssl_certificate     /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/privkey.pem;
+    ssl_protocols       TLSv1.2 TLSv1.3;
+    ssl_ciphers         HIGH:!aNULL:!MD5;
+    ssl_session_cache   shared:SSL_stream:10m;
+    ssl_session_timeout 10m;
+
+    # ── Forward the entire port range 30000–31000 ────────────────────────────
+    # Nginx stream does not support port-range directives natively, so we use
+    # a map + upstream pattern: any TCP connection arriving on port N is
+    # proxied to 127.0.0.1:N.
+    #
+    # The "preread" phase reads the destination port from $server_port and
+    # proxies it straight through to the local game-server pod.
+
+    map $server_port $backend_port {
+        default $server_port;
+    }
+
+    upstream gameserver_passthrough {
+        server 127.0.0.1:1;   # placeholder; overridden by the map below
+    }
+
+    # ── Per-port server block (generated via a range) ────────────────────────
+    # Because Nginx does not support range syntax, include a generated file:
+    #   sudo bash -c '
+    #     for p in $(seq 30000 31000); do
+    #       echo "server { listen ${p} ssl; proxy_pass 127.0.0.1:${p}; }"
+    #     done > /etc/nginx/stream.d/gameserver-ports.conf
+    #   '
+    # Then reload nginx.
+    #
+    # A helper script is provided in the repo at scripts/gen-stream-ports.sh
+    include /etc/nginx/stream.d/gameserver-ports.conf;
+}

From c936c4dc21fdfb5fb154d68478d48a50821b70d4 Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Sat, 4 Jul 2026 14:47:02 +0530
Subject: [PATCH 06/14] fix: client changes to connect to the server

---
 nginx-gameserver-stream.conf | 55 +++++++++++++-----------------------
 server/server.ts             | 15 ++++++++++
 2 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/nginx-gameserver-stream.conf b/nginx-gameserver-stream.conf
index c45acd8..4e4f0f0 100644
--- a/nginx-gameserver-stream.conf
+++ b/nginx-gameserver-stream.conf
@@ -44,40 +44,23 @@
 #        sudo ufw allow 80/tcp    # for Let's Encrypt HTTP-01 challenge
 # =============================================================================
 
-stream {
-    # ── TLS context shared by all server blocks in this file ────────────────
-    ssl_certificate     /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/fullchain.pem;
-    ssl_certificate_key /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/privkey.pem;
-    ssl_protocols       TLSv1.2 TLSv1.3;
-    ssl_ciphers         HIGH:!aNULL:!MD5;
-    ssl_session_cache   shared:SSL_stream:10m;
-    ssl_session_timeout 10m;
+# ── TLS context shared by all server blocks in this file ────────────────
+# NOTE: This file is included INSIDE the stream {} block in nginx.conf.
+#       Do NOT wrap this in another stream {} block.
+ssl_certificate     /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/fullchain.pem;
+ssl_certificate_key /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/privkey.pem;
+ssl_protocols       TLSv1.2 TLSv1.3;
+ssl_ciphers         HIGH:!aNULL:!MD5;
+ssl_session_cache   shared:SSL_stream:10m;
+ssl_session_timeout 10m;
 
-    # ── Forward the entire port range 30000–31000 ────────────────────────────
-    # Nginx stream does not support port-range directives natively, so we use
-    # a map + upstream pattern: any TCP connection arriving on port N is
-    # proxied to 127.0.0.1:N.
-    #
-    # The "preread" phase reads the destination port from $server_port and
-    # proxies it straight through to the local game-server pod.
-
-    map $server_port $backend_port {
-        default $server_port;
-    }
-
-    upstream gameserver_passthrough {
-        server 127.0.0.1:1;   # placeholder; overridden by the map below
-    }
-
-    # ── Per-port server block (generated via a range) ────────────────────────
-    # Because Nginx does not support range syntax, include a generated file:
-    #   sudo bash -c '
-    #     for p in $(seq 30000 31000); do
-    #       echo "server { listen ${p} ssl; proxy_pass 127.0.0.1:${p}; }"
-    #     done > /etc/nginx/stream.d/gameserver-ports.conf
-    #   '
-    # Then reload nginx.
-    #
-    # A helper script is provided in the repo at scripts/gen-stream-ports.sh
-    include /etc/nginx/stream.d/gameserver-ports.conf;
-}
+# ── Per-port server blocks (generated by scripts/gen-stream-ports.sh) ───────
+# Each game-server pod listens on a port in [30000, 31000] via hostNetwork.
+# Nginx terminates TLS and proxies straight through to 127.0.0.1:<port>.
+#
+# Re-generate after changing the port range:
+#   sudo bash scripts/gen-stream-ports.sh
+#   sudo nginx -t && sudo systemctl reload nginx
+#
+# The include path must match stream-conf.d/ (what nginx.conf loads):
+include /etc/nginx/stream-conf.d/gameserver-ports.conf;
diff --git a/server/server.ts b/server/server.ts
index 76a16ac..73548b3 100644
--- a/server/server.ts
+++ b/server/server.ts
@@ -462,6 +462,21 @@ io.on("connection", (socket) => {
     socket.join(code);
 
     const sanitized = sanitizeName(playerName);
+
+    // Initialize the room if it doesn't exist yet
+    if (!rooms[code]) {
+      const target: Target = { x: 0, y: 0, width: 30, height: 30 };
+      repositionTarget(target);
+      rooms[code] = {
+        players: {},
+        playerCount: 0,
+        target,
+        lastSentState: {},
+        fullSyncCounter: 0,
+        pendingScoreEvents: [],
+      };
+    }
+
     rooms[code].players[socket.id] = makePlayer(socket.id, sanitized);
     rooms[code].playerCount++;
 

From 90e41f4098b6ed30726e797454675128db202d3a Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Sat, 4 Jul 2026 15:21:06 +0530
Subject: [PATCH 07/14] fix: gateway response sent via body and not cookies

---
 client/index.js              | 11 ++---------
 gateway/routes/createRoom.ts |  5 +----
 server/server.ts             | 16 +++++++++-------
 3 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/client/index.js b/client/index.js
index d0384e3..5a7a63f 100644
--- a/client/index.js
+++ b/client/index.js
@@ -60,27 +60,20 @@ createRoomBtn.addEventListener("click", async () => {
     // Gateway picks the least-loaded game server, sets cookies
     // (hostIp, port, roomID) and returns.
     const res = await fetch(`${GATEWAY_URL}/createRoom`, {
-      credentials: "include", // receive the Set-Cookie headers
+      credentials: "include",
     });
-
     if (!res.ok) {
       showLobbyError("No game servers available. Try again.");
       setLobbyLoading(false);
       return;
     }
-
-    // Read the cookies the gateway just set
-    const hostIp = getCookie("hostIp");
-    const port = getCookie("port");
-    const roomID = getCookie("roomID");
+    const { hostIp, port, roomID } = await res.json();
     console.log(`hostIp: ${hostIp}, port: ${port}`);
-
     if (!hostIp || !port || !roomID) {
       showLobbyError("Server response missing. Try again.");
       setLobbyLoading(false);
       return;
     }
-
     // Connect socket directly to the assigned game-server via TLS in prod
     connectSocket(`${WS_SCHEME}://${hostIp}:${port}`, () => {
       socket.emit("createRoom", pName, roomID, (ack) => {
diff --git a/gateway/routes/createRoom.ts b/gateway/routes/createRoom.ts
index 035c994..af87ed8 100644
--- a/gateway/routes/createRoom.ts
+++ b/gateway/routes/createRoom.ts
@@ -69,10 +69,7 @@ const createRoom = async (_: Request, res: Response) => {
     roomMaps[code] = roomInfo;
 
     // Set cookies – must be SameSite=None; Secure for cross-site delivery
-    res.cookie("hostIp", roomInfo.hostIp, COOKIE_OPTS);
-    res.cookie("port", roomInfo.port, COOKIE_OPTS);
-    res.cookie("roomID", code, COOKIE_OPTS);
-    res.status(200).send("Here have your server");
+    res.json({ hostIp: roomInfo.hostIp, port: roomInfo.port, roomID: code });
   } catch (e) {
     console.error(e);
     res.status(400).send("Bad request");
diff --git a/server/server.ts b/server/server.ts
index 73548b3..1528c08 100644
--- a/server/server.ts
+++ b/server/server.ts
@@ -638,17 +638,18 @@ app.get("/status", (req: Request, res: Response) => {
 // In local dev, PORT_MIN / PORT_MAX are unset → falls back to listen(0).
 const PORT_MIN = process.env.PORT_MIN ? parseInt(process.env.PORT_MIN) : 0;
 const PORT_MAX = process.env.PORT_MAX ? parseInt(process.env.PORT_MAX) : 0;
+const PUBLIC_PORT_OFFSET = 10000; // internal port = public port + offset
 
 function pickPort(): number {
-  if (!PORT_MIN || !PORT_MAX) return 0; // let OS pick (local dev)
-  return PORT_MIN + Math.floor(Math.random() * (PORT_MAX - PORT_MIN + 1));
+  if (!PORT_MIN || !PORT_MAX) return 0;
+  const publicPort =
+    PORT_MIN + Math.floor(Math.random() * (PORT_MAX - PORT_MIN + 1));
+  return publicPort + PUBLIC_PORT_OFFSET; // bind on the internal, offset port
 }
-
 async function startOnPort(port: number, retries = 20): Promise<void> {
   return new Promise((resolve, reject) => {
     server.once("error", async (err: NodeJS.ErrnoException) => {
       if (err.code === "EADDRINUSE" && retries > 0) {
-        // Port taken – try another one in the range
         server.removeAllListeners("error");
         const next = pickPort();
         console.warn(`Port ${port} in use, trying ${next}…`);
@@ -659,19 +660,20 @@ async function startOnPort(port: number, retries = 20): Promise<void> {
         reject(err);
       }
     });
-    server.listen(port, resolve);
+    server.listen(port, "127.0.0.1", resolve); // <-- bind loopback only
   });
 }
 startOnPort(pickPort())
   .then(async () => {
     const address = server.address() as AddressInfo;
+    const publicPort =
+      PORT_MIN && PORT_MAX ? address.port - PUBLIC_PORT_OFFSET : address.port;
 
     const serverInfo = {
       hostIp: process.env.HOST_IP,
-      port: address.port,
+      port: publicPort, // <-- report the public-facing port, clients/nginx use this
       connections: 0,
     };
-
     while (true) {
       try {
         console.log("SERVER_MANAGER_URL =", process.env.SERVER_MANAGER_URL);

From 604c05d2b513c9f04e673e02337d1c46b085a444 Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Sat, 4 Jul 2026 15:26:04 +0530
Subject: [PATCH 08/14] debug: client side debug help

---
 client/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/index.js b/client/index.js
index 5a7a63f..7465b02 100644
--- a/client/index.js
+++ b/client/index.js
@@ -59,14 +59,13 @@ createRoomBtn.addEventListener("click", async () => {
   try {
     // Gateway picks the least-loaded game server, sets cookies
     // (hostIp, port, roomID) and returns.
-    const res = await fetch(`${GATEWAY_URL}/createRoom`, {
-      credentials: "include",
-    });
+    const res = await fetch(`${GATEWAY_URL}/createRoom`);
     if (!res.ok) {
       showLobbyError("No game servers available. Try again.");
       setLobbyLoading(false);
       return;
     }
+    console.log(res);
     const { hostIp, port, roomID } = await res.json();
     console.log(`hostIp: ${hostIp}, port: ${port}`);
     if (!hostIp || !port || !roomID) {

From 3e10df9367ca182fc2b092436385f55d74348825 Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Sat, 4 Jul 2026 15:30:24 +0530
Subject: [PATCH 09/14] debug: client side debug fix

---
 client/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/index.js b/client/index.js
index 7465b02..d092460 100644
--- a/client/index.js
+++ b/client/index.js
@@ -65,7 +65,9 @@ createRoomBtn.addEventListener("click", async () => {
       setLobbyLoading(false);
       return;
     }
+    console.log("Logging res:");
     console.log(res);
+    console.log("Logging hostIp and port");
     const { hostIp, port, roomID } = await res.json();
     console.log(`hostIp: ${hostIp}, port: ${port}`);
     if (!hostIp || !port || !roomID) {

From 9fe82d7ab2087fbbfea2b198c5ce1469aad74ca9 Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Sat, 4 Jul 2026 15:56:03 +0530
Subject: [PATCH 10/14] fix: changes in internal port range

---
 scripts/gen-stream-ports.sh | 53 ++++++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/scripts/gen-stream-ports.sh b/scripts/gen-stream-ports.sh
index e75bd47..051372b 100755
--- a/scripts/gen-stream-ports.sh
+++ b/scripts/gen-stream-ports.sh
@@ -2,32 +2,61 @@
 # =============================================================================
 # gen-stream-ports.sh
 # =============================================================================
-# Generates /etc/nginx/stream.d/gameserver-ports.conf
-# Each game-server pod listens on a port in [PORT_MIN, PORT_MAX] via
-# hostNetwork. This script creates one Nginx stream server block per port
-# so that TLS is terminated and traffic is forwarded to 127.0.0.1:<port>.
+# Generates /etc/nginx/stream-conf.d/gameserver-ports.conf
+#
+# Port design – TWO distinct ranges to avoid self-loop:
+# ┌─────────────────────────────────────────────────────────────────────────┐
+# │  EXTERNAL range (TLS-facing, what clients connect to via wss://):       │
+# │    EXT_MIN=20000  EXT_MAX=21000                                         │
+# │                                                                         │
+# │  INTERNAL range (plaintext, where hostNetwork pods actually listen):    │
+# │    INT_MIN=30000  INT_MAX=31000  (OFFSET = INT_MIN - EXT_MIN = 10000)   │
+# │                                                                         │
+# │  Mapping:  nginx listens on EXT_PORT (TLS)                             │
+# │            → proxy_pass to 127.0.0.1:(EXT_PORT + OFFSET)               │
+# │                                                                         │
+# │  Example:  client connects to wss://server.boxgame.shadyggs.xyz:20426  │
+# │            nginx terminates TLS on :20426                               │
+# │            → forwards plaintext to game-server pod on 127.0.0.1:30426  │
+# │                                                                         │
+# │  WHY: If nginx binds 0.0.0.0:N and proxy_pass 127.0.0.1:N, nginx owns  │
+# │       loopback too, so the connection loops back into itself, causing   │
+# │       the SSL_do_handshake error in nginx error.log. Distinct ranges    │
+# │       guarantee proxy_pass always reaches the real pod, not nginx.      │
+# └─────────────────────────────────────────────────────────────────────────┘
 #
 # Run on the VM (requires root / sudo):
 #   sudo bash scripts/gen-stream-ports.sh
 #   sudo nginx -t && sudo systemctl reload nginx
+#
+# FIREWALL: Open EXT range (clients connect here), NOT the INT range:
+#   OCI Security List: TCP 20000-21000 ingress from 0.0.0.0/0
+#   OS iptables:       sudo iptables -I INPUT -p tcp --dport 20000:21000 -j ACCEPT
 # =============================================================================
 
 set -euo pipefail
 
-PORT_MIN="${PORT_MIN:-30000}"
-PORT_MAX="${PORT_MAX:-31000}"
-OUT="/etc/nginx/stream.d/gameserver-ports.conf"
+EXT_MIN="${EXT_MIN:-20000}"
+EXT_MAX="${EXT_MAX:-21000}"
+OFFSET=10000   # INT_PORT = EXT_PORT + OFFSET  →  30000-31000
+OUT="/etc/nginx/stream-conf.d/gameserver-ports.conf"
 
-echo "Generating stream blocks for ports ${PORT_MIN}–${PORT_MAX} → ${OUT}"
+echo "Generating stream blocks: external ${EXT_MIN}–${EXT_MAX} → internal $((EXT_MIN+OFFSET))–$((EXT_MAX+OFFSET))"
+echo "Output: ${OUT}"
 
 {
   echo "# AUTO-GENERATED by gen-stream-ports.sh – do not edit manually"
-  echo "# Re-run the script to regenerate after changing PORT_MIN / PORT_MAX"
+  echo "# Re-run the script to regenerate after changing EXT_MIN / EXT_MAX."
+  echo "#"
+  echo "# Port mapping: listen EXT_PORT (TLS) → proxy_pass 127.0.0.1:(EXT_PORT+${OFFSET})"
+  echo "# External (clients) : ${EXT_MIN}–${EXT_MAX}  (open these in OCI Security List)"
+  echo "# Internal (pods)    : $((EXT_MIN+OFFSET))–$((EXT_MAX+OFFSET))  (hostNetwork, NOT exposed externally)"
   echo ""
-  for port in $(seq "$PORT_MIN" "$PORT_MAX"); do
+  for ext_port in $(seq "$EXT_MIN" "$EXT_MAX"); do
+    int_port=$((ext_port + OFFSET))
     echo "server {"
-    echo "    listen ${port} ssl;"
-    echo "    proxy_pass 127.0.0.1:${port};"
+    echo "    listen ${ext_port} ssl;"
+    echo "    proxy_pass 127.0.0.1:${int_port};"
     echo "}"
     echo ""
   done

From 0bdec99c530024503f1ce960bfa62253d72245d5 Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Sat, 4 Jul 2026 16:32:21 +0530
Subject: [PATCH 11/14] fix: fixed join room function in client

---
 client/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/index.js b/client/index.js
index d092460..574feba 100644
--- a/client/index.js
+++ b/client/index.js
@@ -120,10 +120,9 @@ joinRoomBtn.addEventListener("click", async () => {
       return;
     }
 
-    const hostIp = getCookie("hostIp");
-    const port = getCookie("port");
+    const { hostIp, port, roomID } = res.json();
 
-    if (!hostIp || !port) {
+    if (!hostIp || !port || !roomID) {
       showLobbyError("Could not locate room server.");
       setLobbyLoading(false);
       return;

From 4d157f5c824523b0e2d3fbe9b7f5afe86b46c7df Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Sat, 4 Jul 2026 16:34:42 +0530
Subject: [PATCH 12/14] fix: added async support to json parsing in joinRoom

---
 client/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/index.js b/client/index.js
index 574feba..b47bc4c 100644
--- a/client/index.js
+++ b/client/index.js
@@ -120,7 +120,7 @@ joinRoomBtn.addEventListener("click", async () => {
       return;
     }
 
-    const { hostIp, port, roomID } = res.json();
+    const { hostIp, port, roomID } = await res.json();
 
     if (!hostIp || !port || !roomID) {
       showLobbyError("Could not locate room server.");

From c4a47356d76b77b00753b2955a846beeff449e86 Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Sat, 4 Jul 2026 16:51:47 +0530
Subject: [PATCH 13/14] feat: v1 final commit

---
 client/index.js              |  3 +-
 gateway/routes/addToRoom.ts  | 12 ++++---
 gateway/routes/createRoom.ts | 15 ++++++--
 nginx-gameserver-stream.conf | 66 +++++++++++++++++++++---------------
 server/server.ts             |  6 ++--
 5 files changed, 61 insertions(+), 41 deletions(-)

diff --git a/client/index.js b/client/index.js
index b47bc4c..528ec9e 100644
--- a/client/index.js
+++ b/client/index.js
@@ -121,6 +121,7 @@ joinRoomBtn.addEventListener("click", async () => {
     }
 
     const { hostIp, port, roomID } = await res.json();
+    console.log(hostIp);
 
     if (!hostIp || !port || !roomID) {
       showLobbyError("Could not locate room server.");
@@ -129,7 +130,7 @@ joinRoomBtn.addEventListener("click", async () => {
     }
 
     connectSocket(`${WS_SCHEME}://${hostIp}:${port}`, () => {
-      socket.emit("joinRoom", { name: pName, code }, (ack) => {
+      socket.emit("joinRoom", { name: pName, roomID }, (ack) => {
         setLobbyLoading(false);
         if (ack && ack.success) {
           enterGame(ack.code);
diff --git a/gateway/routes/addToRoom.ts b/gateway/routes/addToRoom.ts
index 68f0e81..8553968 100644
--- a/gateway/routes/addToRoom.ts
+++ b/gateway/routes/addToRoom.ts
@@ -9,11 +9,11 @@ const COOKIE_OPTS = {
 };
 
 // Public hostname clients use to reach game-server pods (same as createRoom)
-const SERVER_HOST_DOMAIN =
-  process.env.SERVER_HOST_DOMAIN || "localhost";
+const SERVER_HOST_DOMAIN = process.env.SERVER_HOST_DOMAIN || "localhost";
 
 const addToRoom = async (req: Request, res: Response) => {
   // roomID comes from the query string: GET /add?roomID=ABCDE
+  console.log(`roomID recvd:${req.query.roomID}`);
   const roomId = (req.query.roomID as string | undefined)?.toUpperCase();
   if (!roomId || roomMaps[roomId] == undefined) {
     res.status(400).send("Invalid room id");
@@ -22,9 +22,11 @@ const addToRoom = async (req: Request, res: Response) => {
 
   // Use the same cookie names as createRoom so the client's getCookie() works.
   // Always send the public domain as hostIp so the browser can open wss://.
-  res.cookie("hostIp", SERVER_HOST_DOMAIN, COOKIE_OPTS);
-  res.cookie("port", roomMaps[roomId]["port"], COOKIE_OPTS);
-  res.status(200).send("here have your server");
+  res.json({
+    hostIp: SERVER_HOST_DOMAIN,
+    port: roomMaps[roomId].port,
+    roomID: roomId,
+  });
   return;
 };
 
diff --git a/gateway/routes/createRoom.ts b/gateway/routes/createRoom.ts
index af87ed8..348d68f 100644
--- a/gateway/routes/createRoom.ts
+++ b/gateway/routes/createRoom.ts
@@ -57,11 +57,20 @@ const createRoom = async (_: Request, res: Response) => {
       return;
     }
 
+    // Port mapping: server-manager returns the INTERNAL pod port (30000–31000).
+    // The client must connect to the EXTERNAL nginx TLS port (20000–21000).
+    // nginx listens on EXT_PORT and proxy_passes to EXT_PORT + 10000 (INT_PORT).
+    // So: externalPort = internalPort - 10000.
+    // See: nginx-gameserver-stream.conf and scripts/gen-stream-ports.sh.
+    const INTERNAL_TO_EXTERNAL_OFFSET = 10000;
+    const internalPort = Number(response.headers.get("port"));
+    const externalPort = internalPort - INTERNAL_TO_EXTERNAL_OFFSET;
+
     const roomInfo = {
-      // Store raw hostIp internally for reference, but tell the client to use
-      // the public domain so TLS (wss://) works from the browser.
+      // Always use the public domain — the raw pod IP (hostNetwork) is
+      // not reachable from the browser.
       hostIp: SERVER_HOST_DOMAIN,
-      port: Number(response.headers.get("port")),
+      port: externalPort, // external TLS port (20000–21000) — what clients dial
     };
 
     // Add roominfo in the map
diff --git a/nginx-gameserver-stream.conf b/nginx-gameserver-stream.conf
index 4e4f0f0..2eb46e8 100644
--- a/nginx-gameserver-stream.conf
+++ b/nginx-gameserver-stream.conf
@@ -3,45 +3,58 @@
 # =============================================================================
 # Purpose
 # -------
-# Game-server pods use hostNetwork and listen on ports 30000–31000 on the VM's
-# host network. The client is served from Vercel (HTTPS), so it must connect
-# via wss:// (TLS). Plain ws:// is blocked by browsers as mixed content.
+# Game-server pods use hostNetwork and listen on INTERNAL ports 30000–31000
+# on the VM. The client is served from Vercel (HTTPS) and must connect via
+# wss:// (TLS). Plain ws:// is blocked by browsers as mixed content.
 #
-# This Nginx stream block terminates TLS for server.boxgame.shadyggs.xyz and
-# forwards each connection to the same port on 127.0.0.1, where the game-server
-# pod is already listening (hostNetwork means the pod port IS the VM port).
+# This config terminates TLS for server.boxgame.shadyggs.xyz on EXTERNAL ports
+# 20000–21000 and forwards each plaintext connection to the same-offset INTERNAL
+# port on 127.0.0.1.
+#
+# Port design – TWO distinct ranges (IMPORTANT – do not collapse back to one)
+# ---------------------------------------------------------------------------
+#   EXTERNAL (TLS, clients connect here):  20000–21000
+#   INTERNAL (plaintext, pods listen here): 30000–31000
+#   OFFSET: 10000  →  nginx listens on EXT_PORT, proxies to EXT_PORT + 10000
+#
+#   Example: wss://server.boxgame.shadyggs.xyz:20426
+#            → nginx :20426 (TLS terminated)
+#            → 127.0.0.1:30426 (game-server pod, hostNetwork, plaintext)
+#
+#   WHY TWO RANGES: If nginx binds 0.0.0.0:N and proxy_pass 127.0.0.1:N,
+#   nginx owns loopback too. The connection loops back into nginx's own TLS
+#   listener, producing repeated SSL_do_handshake() errors in error.log:
+#     SSL: error:1408F09C:SSL routines:ssl3_get_record:http request
+#   Distinct ranges guarantee proxy_pass always hits the real pod.
 #
 # Deployment steps
 # ----------------
 # 1. Install nginx on the VM (NOT inside k8s – this runs on the host):
-#        sudo apt install nginx
+#        sudo dnf install nginx   # Oracle Linux / RHEL
 #
-# 2. Obtain a TLS cert for server.boxgame.shadyggs.xyz.
-#    If cert-manager issued one for gateway.boxgame.shadyggs.xyz you can reuse
-#    the same VM cert, or get a wildcard cert for *.boxgame.shadyggs.xyz.
-#    Recommended: use certbot standalone for this domain:
+# 2. Obtain a TLS cert for server.boxgame.shadyggs.xyz:
 #        sudo certbot certonly --standalone -d server.boxgame.shadyggs.xyz
-#    Cert will land at:
+#    Cert lands at:
 #        /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/fullchain.pem
 #        /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/privkey.pem
 #
-# 3. Enable the stream module. In /etc/nginx/nginx.conf add at the top level
-#    (outside the http {} block):
+# 3. Ensure nginx.conf has at the top level (outside http {}):
 #        stream {
-#            include /etc/nginx/stream.d/*.conf;
+#            include /etc/nginx/stream-conf.d/*.conf;
 #        }
 #
-# 4. Copy this file:
-#        sudo mkdir -p /etc/nginx/stream.d
-#        sudo cp nginx-gameserver-stream.conf /etc/nginx/stream.d/gameserver-tls.conf
+# 4. Deploy this file and generate port blocks:
+#        sudo mkdir -p /etc/nginx/stream-conf.d
+#        sudo cp nginx-gameserver-stream.conf /etc/nginx/stream-conf.d/gameserver-tls.conf
+#        sudo bash scripts/gen-stream-ports.sh
 #
 # 5. Test and reload:
 #        sudo nginx -t && sudo systemctl reload nginx
 #
-# 6. Open the port range in the firewall:
-#        sudo ufw allow 30000:31000/tcp
-#        sudo ufw allow 443/tcp   # for gateway Ingress
-#        sudo ufw allow 80/tcp    # for Let's Encrypt HTTP-01 challenge
+# 6. Open the EXTERNAL port range in firewalls (NOT the internal 30000-31000):
+#        OCI Security List: TCP 20000-21000 ingress from 0.0.0.0/0
+#        OS iptables: sudo iptables -I INPUT -p tcp --dport 20000:21000 -j ACCEPT
+#        (80/tcp and 443/tcp already open for gateway Ingress + Let's Encrypt)
 # =============================================================================
 
 # ── TLS context shared by all server blocks in this file ────────────────
@@ -55,12 +68,9 @@ ssl_session_cache   shared:SSL_stream:10m;
 ssl_session_timeout 10m;
 
 # ── Per-port server blocks (generated by scripts/gen-stream-ports.sh) ───────
-# Each game-server pod listens on a port in [30000, 31000] via hostNetwork.
-# Nginx terminates TLS and proxies straight through to 127.0.0.1:<port>.
-#
-# Re-generate after changing the port range:
+# External ports 20000–21000 (TLS) → internal ports 30000–31000 (plaintext pods).
+# Regenerate after any port-range change:
 #   sudo bash scripts/gen-stream-ports.sh
 #   sudo nginx -t && sudo systemctl reload nginx
-#
-# The include path must match stream-conf.d/ (what nginx.conf loads):
 include /etc/nginx/stream-conf.d/gameserver-ports.conf;
+
diff --git a/server/server.ts b/server/server.ts
index 1528c08..ded9fcc 100644
--- a/server/server.ts
+++ b/server/server.ts
@@ -638,13 +638,12 @@ app.get("/status", (req: Request, res: Response) => {
 // In local dev, PORT_MIN / PORT_MAX are unset → falls back to listen(0).
 const PORT_MIN = process.env.PORT_MIN ? parseInt(process.env.PORT_MIN) : 0;
 const PORT_MAX = process.env.PORT_MAX ? parseInt(process.env.PORT_MAX) : 0;
-const PUBLIC_PORT_OFFSET = 10000; // internal port = public port + offset
 
 function pickPort(): number {
   if (!PORT_MIN || !PORT_MAX) return 0;
   const publicPort =
     PORT_MIN + Math.floor(Math.random() * (PORT_MAX - PORT_MIN + 1));
-  return publicPort + PUBLIC_PORT_OFFSET; // bind on the internal, offset port
+  return publicPort; // bind on the internal, offset port
 }
 async function startOnPort(port: number, retries = 20): Promise<void> {
   return new Promise((resolve, reject) => {
@@ -666,8 +665,7 @@ async function startOnPort(port: number, retries = 20): Promise<void> {
 startOnPort(pickPort())
   .then(async () => {
     const address = server.address() as AddressInfo;
-    const publicPort =
-      PORT_MIN && PORT_MAX ? address.port - PUBLIC_PORT_OFFSET : address.port;
+    const publicPort = address.port;
 
     const serverInfo = {
       hostIp: process.env.HOST_IP,

From 50c64e2e24006dd490c9c367e1502e6297446fca Mon Sep 17 00:00:00 2001
From: anshggss <ptmtripathi@gmail.com>
Date: Sat, 4 Jul 2026 17:29:22 +0530
Subject: [PATCH 14/14] fix:client ui changes

---
 client/index.html |  72 +++-
 client/styles.css | 922 +++++++++++++++++++++++++++++++---------------
 2 files changed, 686 insertions(+), 308 deletions(-)

diff --git a/client/index.html b/client/index.html
index 370b731..019a64c 100644
--- a/client/index.html
+++ b/client/index.html
@@ -15,28 +15,72 @@
 
     <!-- ===== LOBBY SCREEN ===== -->
     <div id="nameScreen">
-        <div class="nameBox" id="lobbyBox">
-            <h2>Box Game</h2>
-            <p>Jump, collect hearts, beat your friends.</p>
+        <div class="landing-container">
 
-            <label class="field-label">Your Name</label>
-            <input type="text" id="nameInput" placeholder="Enter your name…" maxlength="15" autofocus />
+            <section class="hero">
 
-            <div class="divider"><span>choose a room</span></div>
+                <span class="hero-tag">MULTIPLAYER PLATFORMER</span>
 
-            <!-- Create Room -->
-            <button id="createRoomBtn" class="btn-primary">✦ Create Private Room</button>
+                <h1>BOX GAME</h1>
+
+                <p class="hero-description">
+                    Jump across platforms, collect points, compete with your friends,
+                    and top the leaderboard.
+                </p>
+
+                <!-- <div class="hero-features"> -->
+                <!--     <div class="feature"> -->
+                <!--         <span>⚡</span> -->
+                <!--         <p>Low Latency</p> -->
+                <!--     </div> -->
+                <!---->
+                <!--     <div class="feature"> -->
+                <!--         <span>❤</span> -->
+                <!--         <p>Collect Hearts</p> -->
+                <!--     </div> -->
+                <!---->
+                <!--     <div class="feature"> -->
+                <!--         <span>👥</span> -->
+                <!--         <p>Private Rooms</p> -->
+                <!--     </div> -->
+                <!-- </div> -->
+
+            </section>
+
+            <div class="nameBox" id="lobbyBox">
+
+                <h2>Play Now</h2>
+
+                <p>Enter your name and join a room.</p>
+
+                <label class="field-label">Player Name</label>
+
+                <input type="text" id="nameInput" maxlength="15" placeholder="Player name">
+
+                <button id="createRoomBtn" class="btn-primary">
+                    Create Private Room
+                </button>
+
+                <div class="divider">
+                    <span>OR</span>
+                </div>
+
+                <div class="join-row">
+
+                    <input id="roomCodeInput" maxlength="5" placeholder="ABCDE">
+
+                    <button id="joinRoomBtn" class="btn-secondary">
+                        Join
+                    </button>
+
+                </div>
+
+                <p id="lobbyError" class="error-msg"></p>
 
-            <!-- Join Room -->
-            <div class="join-row">
-                <input type="text" id="roomCodeInput" placeholder="Room code…" maxlength="5" />
-                <button id="joinRoomBtn" class="btn-secondary">Join</button>
             </div>
 
-            <p id="lobbyError" class="error-msg"></p>
         </div>
     </div>
-
     <!-- ===== IN-GAME HUD ===== -->
     <div id="hud" style="display:none;">
         <button id="menuBtn" title="Options">☰</button>
diff --git a/client/styles.css b/client/styles.css
index 70d6cd4..40caf27 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -12,7 +12,8 @@ body {
 
 body {
   overflow: hidden;
-  background-color: rgb(217, 235, 25);
+  background: #080808;
+  color: #fff;
 }
 
 canvas {
@@ -23,12 +24,13 @@ canvas {
 
 /* ===========================
    LOBBY / NAME SCREEN
-   =========================== */
+=========================== */
+
 #nameScreen {
   position: fixed;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f1a 70%);
+  inset: 0;
+  background:
+    radial-gradient(circle at top, #1d0000 0%, #0d0d0d 40%, #050505 100%);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -38,373 +40,705 @@ canvas {
 #nameScreen::before {
   content: "";
   position: absolute;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   background:
-    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.3), transparent),
-    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.2), transparent),
-    radial-gradient(2px 2px at 60% 20%, rgba(255,255,255,0.3), transparent),
-    radial-gradient(2px 2px at 80% 50%, rgba(255,255,255,0.2), transparent),
-    radial-gradient(2px 2px at 10% 80%, rgba(255,255,255,0.15),transparent),
-    radial-gradient(2px 2px at 70% 90%, rgba(255,255,255,0.2), transparent),
-    radial-gradient(2px 2px at 90% 10%, rgba(255,255,255,0.25),transparent),
-    radial-gradient(2px 2px at 50% 50%, rgba(255,255,255,0.1), transparent);
-  animation: twinkle 4s ease-in-out infinite alternate;
+    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.18), transparent),
+    radial-gradient(2px 2px at 40% 70%, rgba(255,80,80,.22), transparent),
+    radial-gradient(2px 2px at 70% 25%, rgba(255,255,255,.15), transparent),
+    radial-gradient(2px 2px at 80% 60%, rgba(255,80,80,.18), transparent),
+    radial-gradient(2px 2px at 15% 85%, rgba(255,255,255,.12), transparent),
+    radial-gradient(2px 2px at 60% 90%, rgba(255,80,80,.16), transparent);
+  animation: twinkle 5s ease-in-out infinite alternate;
   pointer-events: none;
 }
 
 @keyframes twinkle {
-  0%   { opacity: 0.5; }
-  100% { opacity: 1; }
+  from {
+    opacity: .4;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .nameBox {
-  background: rgba(255,255,255,0.05);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  padding: 44px 42px 36px;
-  border-radius: 22px;
-  text-align: center;
-  border: 1px solid rgba(255,255,255,0.1);
-  box-shadow:
-    0 25px 60px rgba(0,0,0,0.5),
-    0 0 40px rgba(100,100,255,0.08),
-    inset 0 1px 0 rgba(255,255,255,0.1);
   position: relative;
   z-index: 1;
-  animation: fadeInUp 0.8s ease-out;
-  min-width: 380px;
+
+  min-width: 390px;
+
+  padding: 44px 40px 36px;
+
+  border-radius: 6px;
+
+  background: rgba(18,18,18,.94);
+
+  backdrop-filter: blur(20px);
+
+  border: 1px solid rgba(239,68,68,.15);
+
+  box-shadow:
+      0 25px 70px rgba(0,0,0,.8),
+      0 0 40px rgba(220,38,38,.15),
+      inset 0 1px rgba(255,255,255,.04);
+
+  animation: fadeInUp .7s ease;
+}
+
+.nameBox::before{
+  content:"";
+  position:absolute;
+  inset:-1px;
+  border-radius:6px;
+  background:linear-gradient(
+      135deg,
+      rgba(239,68,68,.35),
+      transparent,
+      rgba(248,113,113,.28)
+  );
+  z-index:-1;
+  opacity:0;
+  transition:.35s;
+}
+
+.nameBox:hover::before{
 }
 
 @keyframes fadeInUp {
-  0%   { opacity: 0; transform: translateY(30px) scale(0.95); }
-  100% { opacity: 1; transform: translateY(0)    scale(1); }
+  from {
+    opacity:0;
+    transform:translateY(30px) scale(.96);
+  }
+  to {
+    opacity:1;
+    transform:none;
+  }
 }
 
-.nameBox h2 {
-  color: #fff;
-  font-size: 30px;
-  font-weight: 800;
-  margin-bottom: 6px;
-  letter-spacing: 2px;
-  background: linear-gradient(135deg, #ffffff, #a78bfa, #60a5fa);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+.nameBox h2{
+  font-size:30px;
+  font-weight:800;
+  letter-spacing:2px;
+  margin-bottom:8px;
+
+  background:linear-gradient(
+      135deg,
+      #ffffff,
+      #ef4444,
+      #fca5a5
+  );
+
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
 }
 
-.nameBox > p {
-  color: rgba(255,255,255,0.4);
-  font-size: 13px;
-  margin-bottom: 24px;
+.nameBox>p{
+  color:rgba(255,255,255,.5);
+  font-size:13px;
+  margin-bottom:24px;
 }
 
-/* field labels */
-.field-label {
-  display: block;
-  text-align: left;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: rgba(255,255,255,0.4);
-  margin-bottom: 6px;
+/* labels */
+
+.field-label{
+  display:block;
+  text-align:left;
+  font-size:11px;
+  text-transform:uppercase;
+  letter-spacing:1px;
+  font-weight:600;
+
+  color:rgba(255,255,255,.45);
+
+  margin-bottom:6px;
 }
 
 /* inputs */
+
 .nameBox input,
-.modal-box input {
-  padding: 13px 18px;
-  width: 100%;
-  border: 2px solid rgba(255,255,255,0.1);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.07);
-  color: #fff;
-  font-size: 15px;
-  outline: none;
-  transition: all 0.25s ease;
-  text-align: center;
-  letter-spacing: 0.5px;
-  margin-bottom: 14px;
+.modal-box input{
+
+  width:100%;
+
+  padding:13px 18px;
+
+  border-radius:6px;
+
+  border:2px solid rgba(239,68,68,.12);
+
+  background:#111;
+
+  color:#fff;
+
+  text-align:center;
+
+  font-size:15px;
+
+  outline:none;
+
+  transition:.25s;
+
+  margin-bottom:14px;
 }
 
 .nameBox input::placeholder,
-.modal-box input::placeholder {
-  color: rgba(255,255,255,0.28);
-  font-style: italic;
+.modal-box input::placeholder{
+  color:rgba(255,255,255,.25);
 }
 
 .nameBox input:focus,
-.modal-box input:focus {
-  border-color: rgba(167,139,250,0.6);
-  background: rgba(255,255,255,0.1);
-  box-shadow: 0 0 18px rgba(167,139,250,0.15);
+.modal-box input:focus{
+
+  border-color:#ef4444;
+
+  background:#171717;
+
+  box-shadow:
+      0 0 18px rgba(239,68,68,.22);
 }
 
-/* buttons */
-.btn-primary {
-  padding: 13px 24px;
-  cursor: pointer;
-  width: 100%;
-  border: none;
-  border-radius: 12px;
-  background: linear-gradient(135deg, #7c3aed, #6366f1, #3b82f6);
-  color: #fff;
-  font-size: 15px;
-  font-weight: 700;
-  letter-spacing: 0.8px;
-  text-transform: uppercase;
-  transition: all 0.25s ease;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(99,102,241,0.4);
-  margin-bottom: 10px;
+/* PRIMARY BUTTON */
+
+.btn-primary{
+
+  width:100%;
+
+  padding:13px;
+
+  border:none;
+
+  border-radius:4px;
+
+  cursor:pointer;
+
+  color:#fff;
+
+  font-size:15px;
+
+  font-weight:700;
+
+  text-transform:uppercase;
+
+  letter-spacing:.8px;
+
+  position:relative;
+
+  overflow:hidden;
+
+  background:linear-gradient(
+      135deg,
+      #991b1b,
+      #dc2626,
+      #ef4444
+  );
+
+  box-shadow:
+      0 6px 22px rgba(220,38,38,.35);
+
+  transition:.25s;
+
+  margin-bottom:10px;
 }
 
-.btn-primary:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgba(99,102,241,0.6);
-  background: linear-gradient(135deg, #8b5cf6, #818cf8, #60a5fa);
+.btn-primary:hover:not(:disabled){
+
+
+  background:linear-gradient(
+      135deg,
+      #b91c1c,
+      #ef4444,
+      #f87171
+  );
+
+  box-shadow:
+      0 10px 30px rgba(239,68,68,.45);
 }
 
-.btn-primary:active { transform: translateY(0); }
-.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-primary:disabled{
+  opacity:.45;
+  cursor:not-allowed;
+}
 
-/* shimmer on primary */
-.btn-primary::after {
-  content: "";
-  position: absolute;
-  top: -50%; left: -60%;
-  width: 40%; height: 200%;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
-  transform: skewX(-20deg);
-  animation: shimmer 3s ease-in-out infinite;
-}
-
-@keyframes shimmer {
-  0%   { left: -60%; }
-  100% { left: 120%; }
-}
-
-.btn-secondary {
-  padding: 12px 18px;
-  cursor: pointer;
-  border: 2px solid rgba(255,255,255,0.15);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.06);
-  color: rgba(255,255,255,0.85);
-  font-size: 14px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-
-.btn-secondary:hover {
-  border-color: rgba(167,139,250,0.5);
-  background: rgba(167,139,250,0.1);
-  color: #fff;
+.btn-primary::after{
+
+  content:"";
+
+  position:absolute;
+
+  top:-50%;
+  left:-70%;
+
+  width:40%;
+  height:200%;
+
+  transform:skewX(-20deg);
+
+  background:
+      linear-gradient(
+          90deg,
+          transparent,
+          rgba(255,255,255,.18),
+          transparent
+      );
+
+  animation:shimmer 3s infinite;
 }
 
-.btn-ghost {
-  padding: 11px 18px;
-  cursor: pointer;
-  border: none;
-  border-radius: 12px;
-  background: transparent;
-  color: rgba(255,255,255,0.4);
-  font-size: 13px;
-  width: 100%;
-  transition: all 0.2s ease;
+@keyframes shimmer{
+
+  from{
+      left:-70%;
+  }
+
+  to{
+      left:120%;
+  }
+
+}
+
+/* secondary */
+
+.btn-secondary{
+
+  padding:12px 18px;
+
+  border-radius:4px;
+
+  cursor:pointer;
+
+  background:      #dc2626;
+
+  color:#f5f5f5;
+
+  border:2px solid rgba(239,68,68,.18);
+
+  transition:.2s;
+
+  font-weight:600;
+}
+
+.btn-secondary:hover{
+
+  border-color:#ef4444;
+
+  background:#1d0a0a;
+
+  color:#fff;
+}
+
+.btn-ghost{
+
+  width:100%;
+
+  padding:11px;
+
+  border:none;
+
+  background:transparent;
+
+  color:rgba(255,255,255,.45);
+
+  border-radius:12px;
+
+  cursor:pointer;
+
+  transition:.2s;
 }
 
-.btn-ghost:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.05); }
+.btn-ghost:hover{
+
+  color:#fff;
+
+  background:rgba(239,68,68,.08);
+}
 
 /* divider */
-.divider {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin: 18px 0 16px;
+
+.divider{
+
+  display:flex;
+
+  align-items:center;
+
+  gap:10px;
+
+  margin:18px 0;
 }
 
 .divider::before,
-.divider::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background: rgba(255,255,255,0.1);
+.divider::after{
+
+  content:"";
+
+  flex:1;
+
+  height:1px;
+
+  background:rgba(239,68,68,.15);
 }
 
-.divider span {
-  color: rgba(255,255,255,0.3);
-  font-size: 11px;
-  letter-spacing: 1px;
-  text-transform: uppercase;
+.divider span{
+
+  color:rgba(255,255,255,.3);
+
+  font-size:11px;
+
+  text-transform:uppercase;
+
+  letter-spacing:1px;
 }
 
 /* join row */
-.join-row {
-  display: flex;
-  gap: 8px;
+
+.join-row{
+  display:flex;
+  gap:8px;
 }
 
-.join-row input {
-  flex: 1;
-  margin-bottom: 0;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 3px;
-  font-weight: 700;
-  font-size: 16px;
+.join-row input{
+  flex:1;
+  margin-bottom:0;
+  letter-spacing:3px;
+  font-weight:700;
+  text-transform:uppercase;
 }
 
-.join-row .btn-secondary {
-  flex-shrink: 0;
+.error-msg{
+  min-height:18px;
+  margin-top:10px;
+  color:#f87171;
+  opacity:0;
+  transition:.35s;
 }
 
-/* error message */
-.error-msg {
-  color: #ff6b6b;
-  font-size: 13px;
-  min-height: 18px;
-  margin-top: 10px;
-  transition: opacity 0.4s ease;
-  opacity: 0;
+/* ===========================
+   HUD
+=========================== */
+
+#hud{
+
+  position:fixed;
+
+  top:14px;
+  right:14px;
+
+  display:flex;
+
+  gap:10px;
+
+  align-items:center;
+
+  z-index:5;
 }
 
-/* glow ring */
-.nameBox::before {
-  content: "";
-  position: absolute;
-  inset: -1px;
-  border-radius: 22px;
-  background: linear-gradient(135deg, rgba(167,139,250,0.3), transparent, rgba(96,165,250,0.3));
-  z-index: -1;
-  opacity: 0;
-  transition: opacity 0.5s ease;
+#menuBtn{
+
+  width:40px;
+  height:40px;
+
+  border:none;
+
+  border-radius:10px;
+
+  background:rgba(0,0,0,.75);
+
+  color:#f87171;
+
+  cursor:pointer;
+
+  transition:.2s;
 }
 
-.nameBox:hover::before { opacity: 1; }
+#menuBtn:hover{
+
+  background:#dc2626;
+
+  color:white;
+
+  transform:scale(1.08);
+}
+
+#roomBadge{
+
+  padding:8px 14px;
+
+  border-radius:10px;
+
+  background:rgba(12,12,12,.9);
+
+  border:1px solid rgba(239,68,68,.18);
+
+  color:#fca5a5;
+
+  font-size:13px;
+
+  font-weight:700;
+
+  letter-spacing:1.5px;
+
+  text-transform:uppercase;
+}
 
 /* ===========================
-   IN-GAME HUD
-   =========================== */
-#hud {
-  position: fixed;
-  top: 14px;
-  right: 14px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  z-index: 5;
-}
-
-#menuBtn {
-  width: 40px;
-  height: 40px;
-  border: none;
-  border-radius: 10px;
-  background: rgba(0,0,0,0.55);
-  backdrop-filter: blur(8px);
-  color: rgba(255,255,255,0.85);
-  font-size: 18px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+   MODAL
+=========================== */
+
+#optionsModal{
+
+  position:fixed;
+
+  inset:0;
+
+  display:flex;
+
+  justify-content:center;
+
+  align-items:center;
+
+  background:rgba(0,0,0,.72);
+
+  backdrop-filter:blur(4px);
+
+  z-index:20;
 }
 
-#menuBtn:hover {
-  background: rgba(99,102,241,0.7);
-  color: #fff;
-  transform: scale(1.08);
+.modal-box{
+
+  min-width:340px;
+
+  padding:36px 36px 28px;
+
+  border-radius:20px;
+
+  background:rgba(18,18,18,.97);
+
+  border:1px solid rgba(239,68,68,.15);
+
+  box-shadow:
+      0 30px 80px rgba(0,0,0,.85),
+      0 0 45px rgba(220,38,38,.12);
+
+  animation:popIn .22s;
 }
 
-#roomBadge {
-  background: rgba(0,0,0,0.5);
-  backdrop-filter: blur(8px);
-  border: 1px solid rgba(255,255,255,0.12);
-  border-radius: 10px;
-  padding: 8px 14px;
-  color: rgba(255,255,255,0.9);
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
+@keyframes popIn{
+
+  from{
+      opacity:0;
+      transform:scale(.9);
+  }
+
+  to{
+      opacity:1;
+      transform:scale(1);
+  }
+
 }
 
-/* ===========================
-   OPTIONS MODAL
-   =========================== */
-#optionsModal {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.6);
-  backdrop-filter: blur(4px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 20;
-  animation: fadeIn 0.15s ease;
+.modal-box h3{
+
+  margin-bottom:22px;
+
+  font-size:22px;
+
+  background:linear-gradient(
+      135deg,
+      #fff,
+      #ef4444
+  );
+
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
 }
 
-@keyframes fadeIn {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
+.room-code-display{
+
+  display:block;
+
+  margin:8px 0;
+
+  font-size:28px;
+
+  font-weight:900;
+
+  letter-spacing:6px;
+
+  color:#ef4444;
 }
 
-.modal-box {
-  background: rgba(20,20,40,0.95);
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 20px;
-  padding: 36px 36px 28px;
-  min-width: 340px;
-  text-align: center;
-  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(99,102,241,0.1);
-  animation: popIn 0.2s cubic-bezier(0.34,1.56,0.64,1);
+#roomInfo{
+
+  margin-top:8px;
+
+  padding:12px 16px;
+
+  border-radius:12px;
+
+  background:#111;
+
+  border:1px solid rgba(239,68,68,.12);
+
+  color:rgba(255,255,255,.55);
+
+  font-size:12px;
 }
 
-@keyframes popIn {
-  0%   { transform: scale(0.85); opacity: 0; }
-  100% { transform: scale(1);    opacity: 1; }
+#roomInfo small{
+
+  display:block;
+
+  margin-top:4px;
+
+  color:rgba(255,255,255,.35);
 }
 
-.modal-box h3 {
-  color: #fff;
-  font-size: 22px;
-  font-weight: 700;
-  margin-bottom: 22px;
-  background: linear-gradient(135deg, #ffffff, #a78bfa);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.modal-box .field-label { margin-top: 4px; }
-
-.room-code-display {
-  font-size: 28px;
-  font-weight: 900;
-  letter-spacing: 6px;
-  color: #a78bfa;
-  display: block;
-  margin: 8px 0 4px;
+.landing-container{
+
+    width:min(1200px,92vw);
+
+    display:grid;
+
+    grid-template-columns:1fr 430px;
+
+    align-items:center;
+
+    gap:80px;
 }
 
-#roomInfo {
-  background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 12px;
-  padding: 12px 16px;
-  margin-top: 4px;
-  color: rgba(255,255,255,0.5);
-  font-size: 12px;
+.hero{
+
+    color:white;
 }
 
-#roomInfo small {
-  display: block;
-  margin-top: 2px;
-  color: rgba(255,255,255,0.35);
+.hero-tag{
+
+    display:inline-block;
+
+    padding:8px 18px;
+
+    border-radius:999px;
+
+    background:rgba(239,68,68,.12);
+
+    border:1px solid rgba(239,68,68,.3);
+
+    color:#f87171;
+
+    font-size:.75rem;
+
+    letter-spacing:2px;
+
+    margin-bottom:24px;
+}
+
+.hero h1{
+
+    font-size:72px;
+
+    line-height:.95;
+
+    margin-bottom:20px;
+
+    font-weight:900;
+
+    background:linear-gradient(
+        180deg,
+        white,
+        #ef4444
+    );
+
+    -webkit-background-clip:text;
+
+    -webkit-text-fill-color:transparent;
+}
+
+.hero-description{
+
+    max-width:560px;
+
+    color:rgba(255,255,255,.7);
+
+    font-size:20px;
+
+    line-height:1.8;
+
+    margin-bottom:42px;
+}
+
+.hero-features{
+
+    display:flex;
+
+    gap:20px;
+
+    flex-wrap:wrap;
+}
+
+.feature{
+
+    width:140px;
+
+    padding:20px;
+
+    border-radius:18px;
+
+    background:rgba(255,255,255,.03);
+
+    border:1px solid rgba(239,68,68,.12);
+
+    text-align:center;
+
+    transition:.25s;
+}
+
+.feature:hover{
+
+    transform:translateY(-6px);
+
+    border-color:#ef4444;
+
+    box-shadow:0 0 25px rgba(239,68,68,.18);
+}
+
+.feature span{
+
+    font-size:28px;
+
+    display:block;
+
+    margin-bottom:10px;
+}
+
+.feature p{
+
+    color:rgba(255,255,255,.8);
+
+    font-size:14px;
+}
+
+@media (max-width:900px){
+
+    .landing-container{
+
+        grid-template-columns:1fr;
+
+        text-align:center;
+
+        gap:40px;
+    }
+
+    .hero-description{
+
+        margin-inline:auto;
+    }
+
+    .hero-features{
+
+        justify-content:center;
+    }
+
+    .hero h1{
+
+        font-size:54px;
+    }
 }