feat: Adding logging solution + alert for mobile phones

.env.example

@@ -0,0 +1,19 @@
+# ── Server ───────────────────────────────────────────────────────────────────
+PORT=8080
+
+# ── Security ─────────────────────────────────────────────────────────────────
+# Generate with: node -e "console.log(require('crypto').randomBytes(48).toString('hex'))"
+JWT_SECRET=CHANGE_ME_TO_A_RANDOM_STRING
+
+# ── Game database (PostgreSQL) ────────────────────────────────────────────────
+POSTGRES_USER=game
+POSTGRES_PASSWORD=CHANGE_ME
+POSTGRES_DB=star_wars_grid
+
+# ── Users database (PostgreSQL) ───────────────────────────────────────────────
+POSTGRES_USERS_USER=users
+POSTGRES_USERS_PASSWORD=CHANGE_ME
+POSTGRES_USERS_DB=star_wars_users
+
+# ── CORS ─────────────────────────────────────────────────────────────────────
+CORS_ORIGIN=*

.gitignore

@@ -1,4 +1,5 @@
 data/postgres/
+data/postgres_users/
 .env
 .env.local
 .env.*.local

Dockerfile

@@ -1,17 +1,29 @@
 FROM node:20-alpine
 
+# Create non-root user/group before switching context
+RUN addgroup -S appgroup && adduser -S appuser -G appgroup
+
 WORKDIR /app
 
+# Install dependencies first for better layer caching
 COPY package.json package-lock.json ./
 RUN npm ci --omit=dev
 
+# Copy application source
 COPY server ./server
 COPY public ./public
 COPY config ./config
 
+# Drop to non-root user
+USER appuser
+
+ENV NODE_ENV=production
 ENV PORT=8080
-ENV CLICK_COOLDOWN_SECONDS=5
 
 EXPOSE 8080
 
-CMD ["node", "server/index.js"]
+# Health-check: lightweight wget is available in node:alpine
+HEALTHCHECK --interval=15s --timeout=5s --start-period=30s --retries=3 \
+  CMD wget -qO- http://localhost:8080/api/config > /dev/null || exit 1
+
+CMD ["node", "server/index.js"]

README.md

@@ -1,16 +1,48 @@
-# Star Wars - Wild Space
+# Star Wars – Wild Space
 
 Exploitable ring only (outer Ø100, inner Ø60). Planet positions are deterministic from the **server world seed**; **stats stay hidden** until you click a tile. Reveals are **persisted in PostgreSQL**.
 
+> **Desktop only** — the galaxy map is not playable on phones or narrow screens (< 768 px wide).
+
+## Layout
+
+The UI is split into two panes:
+
+| Pane | Content |
+|------|---------|
+| **Left column** | Title, team scores, player info, cooldown timer, world seed & period countdown, Refresh button, selection details |
+| **Right side** | Galaxy map — a perfect square anchored to the right edge of the viewport |
+
+## Secrets & environment variables
+
+**Never commit secrets.** All credentials live in **`.env`** (git-ignored).  
+Copy the template and fill in your values before the first run:
+
+```powershell
+cp .env.example .env
+# then edit .env
+```
+
+| Variable | Description |
+|----------|-------------|
+| `JWT_SECRET` | Secret used to sign JWT tokens — use a long random string in production |
+| `POSTGRES_USER` | Game-DB username (default `game`) |
+| `POSTGRES_PASSWORD` | Game-DB password — **change in production** |
+| `POSTGRES_DB` | Game-DB name (default `star_wars_grid`) |
+| `POSTGRES_USERS_USER` | Users-DB username (default `users`) |
+| `POSTGRES_USERS_PASSWORD` | Users-DB password — **change in production** |
+| `POSTGRES_USERS_DB` | Users-DB name (default `star_wars_users`) |
+| `PORT` | HTTP port exposed by the app (default `8080`) |
+
 ## Runtime config (file + volume)
 
-Edit **`config/game.settings.json`** on the host (mounted into the container at `/app/config/game.settings.json`). The server reloads it when the file’s **mtime** changes, on a schedule controlled by **`configReloadIntervalSeconds`** (minimum 5s), so frequent polling is avoided when nothing changed.
+Edit **`config/game.settings.json`** on the host (mounted into the container at `/app/config/game.settings.json`). The server reloads it when the file's **mtime** changes, on a schedule controlled by **`configReloadIntervalSeconds`** (minimum 5 s), so frequent polling is avoided when nothing changed.
 
 | Field | Meaning |
-|--------|--------|
+|-------|---------|
 | `clickCooldownSeconds` | Cooldown between **new** reveals (same as before). |
-| `databaseWipeoutIntervalSeconds` | World period length in **seconds** (default `21600` = 6h). The **world seed** is `swg-<slot>` with `slot = floor(UTC unix seconds / this value)`. When the slot changes, **`grid_cells` is truncated** (full wipe). |
-| `debugModeForTeams` | If `true` or string `"true"` / `"True"` (case-insensitive), the **Blue / Red** segmented control is shown; if `false`, it is hidden. |
+| `databaseWipeoutIntervalSeconds` | World period length in **seconds** (default `21600` = 6 h). The **world seed** is `swg-<slot>` with `slot = floor(UTC unix seconds / this value)`. When the slot changes, **`grid_cells` is truncated** (full wipe). |
+| `debugModeForTeams` | If `true`, the **Blue / Red** segmented control is shown; if `false`, it is hidden. |
 | `configReloadIntervalSeconds` | How often the server **checks** the config file (mtime); also used by the client to poll `/api/config`. |
 
 `GET /api/config` returns these values plus **`worldSeed`**, **`seedPeriodEndsAtUtc`**, **`seedPeriodStartsAtUtc`**.
@@ -18,45 +50,73 @@ Edit **`config/game.settings.json`** on the host (mounted into the container at
 ## Teams (blue / red)
 
 - With **`debugModeForTeams`**: use the **Team** control (top-left) to switch perspective.
-- **Your** discovered tiles use your team color (blue: bright cyan; red: red when revealed). Unclaimed ring tiles use the **classic** idle tint for both teams.
+- **Your** discovered tiles use your team colour. Unclaimed ring tiles use the classic idle tint for both teams.
 - Tiles discovered by the **other** team appear **grey**, show **no planet**, and are **not clickable**. First reveal **owns** the tile (`discovered_by`).
 
 ## Cooldown
 
-After revealing a **new** tile, a **cooldown** runs (top-right). During cooldown you **cannot reveal additional unseen tiles**, but you can still **click tiles your team already discovered** to view their stats.
+After revealing a **new** tile, a **cooldown** runs (left column). During cooldown you **cannot reveal additional unseen tiles**, but you can still **click tiles your team already discovered** to view their stats.
 
 ## Run with Docker Compose (Node + PostgreSQL)
 
-From `d:\Users\GaWin\Travaux\Code\star_wars_grid_game`:
+### Prerequisites
 
-```powershell
-docker compose up --build
-```
+1. Copy the environment template and set your secrets:
+   ```powershell
+   cp star_wars_grid_game/.env.example star_wars_grid_game/.env
+   # Edit .env — at minimum change JWT_SECRET, POSTGRES_PASSWORD, POSTGRES_USERS_PASSWORD
+   ```
 
-Open `http://localhost:8080`.
+2. From `star_wars_grid_game/`:
+   ```powershell
+   docker compose up --build
+   ```
 
-- **App:** port `8080`
-- **Postgres:** port `5432` (user `game`, password `game`, database `star_wars_grid`)
-- **Config:** host folder **`./config`** is mounted to **`/app/config`** — edit `game.settings.json` without rebuilding the image.
+3. Open `http://localhost:8080`.
+
+### Ports
+
+| Service | Port | Notes |
+|---------|------|-------|
+| App | `8080` | configurable via `PORT` in `.env` |
+| Game Postgres | `5432` | user/pass from `.env` |
+| Users Postgres | `5433` | user/pass from `.env` |
 
 ### Database persistence
 
-PostgreSQL data is under **`./data/postgres`** (bind mount). The **world wipe** only clears `grid_cells` when the UTC period slot changes; it does not delete the Postgres data directory.
+PostgreSQL data is under **`./data/postgres`** and **`./data/postgres_users`** (bind mounts). The **world wipe** only clears `grid_cells` when the UTC period slot changes; it does not delete the Postgres data directory.
 
 ## Local dev (without Docker)
 
-Requires PostgreSQL and `DATABASE_URL`, then:
+Requires PostgreSQL, then:
 
 ```powershell
+cd star_wars_grid_game
+cp .env.example .env    # fill in DATABASE_URL etc.
 npm install
-$env:DATABASE_URL="postgres://user:pass@localhost:5432/star_wars_grid"
+# export vars or use a tool like dotenv-cli
+$env:DATABASE_URL="postgres://game:game@localhost:5432/star_wars_grid"
+$env:USERS_DATABASE_URL="postgres://users:users@localhost:5433/star_wars_users"
+$env:JWT_SECRET="dev_secret"
 npm start
 ```
 
 Ensure `config/game.settings.json` exists (or copy from the repo).
 
+## Docker image notes
+
+- Base image: `node:20-alpine`
+- Runs as a **non-root user** (`appuser`) for security
+- `NODE_ENV=production` is set inside the image
+- Built-in **health check**: polls `GET /api/config` every 15 s (`wget`)
+- Secrets (`JWT_SECRET`, DB passwords) are **never baked into the image** — pass them via `.env` / Compose environment
+
 ## API
 
 - `GET /api/config` — cooldown, wipe interval, debug flag, poll interval, `worldSeed`, period timestamps.
 - `GET /api/grid/:seed` — cells for that seed; **`410`** if `seed` is not the current world seed.
-- `POST /api/cell/reveal` — body `{ seed, x, y, team: "blue" \| "red" }` — first reveal wins; **`409`** if the other team owns the tile; **`410`** if seed is stale.
+- `POST /api/cell/reveal` — body `{ seed, x, y, team: "blue" | "red" }` — first reveal wins; **`409`** if the other team owns the tile; **`410`** if seed is stale.
+- `POST /api/auth/register` — `{ username, email, password, team }` → `{ token, user }`.
+- `POST /api/auth/login` — `{ username, password }` → `{ token, user }`.
+- `GET /api/auth/me` — Bearer token required → refreshed `{ token, user }`.
+- `GET /api/scores` — `{ blue: N, red: N }` tile counts for the current period.

docker-compose.yml

@@ -1,17 +1,18 @@
-# Keep `db` as the first service: clearer dependency order and predictable compose overrides.
+# Secrets come from .env (auto-loaded by Compose) — never hard-code credentials here.
+# Copy .env.example to .env and fill in values before running.
 services:
   db:
     image: postgres:16-alpine
     environment:
-      POSTGRES_USER: game
-      POSTGRES_PASSWORD: game
-      POSTGRES_DB: star_wars_grid
+      POSTGRES_USER: ${POSTGRES_USER:-game}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_DB: ${POSTGRES_DB:-star_wars_grid}
     volumes:
       - ./data/postgres:/var/lib/postgresql/data
     ports:
       - "5432:5432"
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U game -d star_wars_grid"]
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-game} -d ${POSTGRES_DB:-star_wars_grid}"]
       interval: 3s
       timeout: 5s
       retries: 15
@@ -20,15 +21,15 @@ services:
   users_db:
     image: postgres:16-alpine
     environment:
-      POSTGRES_USER: users
-      POSTGRES_PASSWORD: users
-      POSTGRES_DB: star_wars_users
+      POSTGRES_USER: ${POSTGRES_USERS_USER:-users}
+      POSTGRES_PASSWORD: ${POSTGRES_USERS_PASSWORD}
+      POSTGRES_DB: ${POSTGRES_USERS_DB:-star_wars_users}
     volumes:
       - ./data/postgres_users:/var/lib/postgresql/data
     ports:
       - "5433:5432"
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U users -d star_wars_users"]
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USERS_USER:-users} -d ${POSTGRES_USERS_DB:-star_wars_users}"]
       interval: 3s
       timeout: 5s
       retries: 15
@@ -37,12 +38,12 @@ services:
   app:
     build: .
     ports:
-      - "8080:8080"
+      - "${PORT:-8080}:8080"
     environment:
-      DATABASE_URL: postgres://game:game@db:5432/star_wars_grid
-      USERS_DATABASE_URL: postgres://users:users@users_db:5432/star_wars_users
-      JWT_SECRET: change_me_in_production_please
-      PORT: "8080"
+      DATABASE_URL: "postgres://${POSTGRES_USER:-game}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB:-star_wars_grid}"
+      USERS_DATABASE_URL: "postgres://${POSTGRES_USERS_USER:-users}:${POSTGRES_USERS_PASSWORD}@users_db:5432/${POSTGRES_USERS_DB:-star_wars_users}"
+      JWT_SECRET: ${JWT_SECRET}
+      PORT: "${PORT:-8080}"
       CONFIG_FILE_PATH: /app/config/game.settings.json
     volumes:
       - ./config:/app/config

public/index.html

@@ -7,7 +7,20 @@
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
-    <!-- Auth Modal -->
+    <!-- Mobile / small-screen notice ───────────────────────────────────────── -->
+    <div class="mobileOverlay" id="mobileOverlay" aria-live="polite" role="alert">
+      <div class="mobileOverlayCard">
+        <div class="mobileOverlayIcon">🚀</div>
+        <h2 class="mobileOverlayTitle">Desktop only</h2>
+        <p class="mobileOverlayText">
+          <strong>Star Wars – Wild Space</strong> requires a desktop browser.<br />
+          The galaxy map is not playable on phones or small screens.<br />
+          Please open this page on a computer.
+        </p>
+      </div>
+    </div>
+
+    <!-- Auth Modal ──────────────────────────────────────────────────────────── -->
     <div class="authOverlay" id="authOverlay">
       <div class="authModal">
         <div class="authTabs">
@@ -73,10 +86,14 @@
       </div>
     </div>
 
+    <!-- Main app layout: left info column + right galaxy square ─────────────── -->
     <div class="app">
-      <header class="topbar">
-        <div class="title">
-          <div class="h1">Star Wars - Wild Space</div>
+
+      <!-- ── Left information column ────────────────────────────────────────── -->
+      <aside class="infoColumn">
+
+        <div class="infoSection infoSection--title">
+          <div class="h1">Star Wars – Wild Space</div>
           <div class="sub">100×100 — exploitable ring only (inner Ø60, outer Ø100)</div>
         </div>
 
@@ -93,55 +110,58 @@
           </span>
         </div>
 
-        <div class="topRight">
-          <div class="topRightTable">
-            <div class="topRightRow" id="userInfoRow">
-              <span class="trKey">player</span>
-              <span class="trVal">
-                <span id="userDisplay">—</span>
-                <button type="button" id="logoutBtn" class="logoutBtn hidden">Logout</button>
-              </span>
-            </div>
-            <div class="topRightRow" id="countdownWrap" aria-live="polite">
-              <span class="trKey countdownLabel">Cooldown</span>
-              <span class="trVal countdownVal">
-                <span id="countdown" class="countdown">0</span>
-                <span class="countdownUnit">s</span>
-              </span>
-            </div>
-            <div class="topRightRow">
-              <span class="trKey muted">clickCooldownSeconds</span>
-              <code class="trVal" id="cooldownConfig">—</code>
-            </div>
-            <div class="topRightRow">
-              <span class="trKey muted">worldSeed</span>
-              <code class="trVal" id="worldSeedDisplay">—</code>
-            </div>
-            <div class="topRightRow">
-              <span class="trKey muted">next period (UTC)</span>
-              <code class="trVal" id="nextPeriodUtc">—</code>
-            </div>
-            <div class="topRightRow">
-              <span class="trKey muted">resets in</span>
-              <code class="trVal" id="refreshCountdown">--:--:--</code>
-            </div>
+        <!-- Info rows -->
+        <div class="infoTable">
+          <div class="infoRow" id="userInfoRow">
+            <span class="infoKey">Player</span>
+            <span class="infoVal">
+              <span id="userDisplay">—</span>
+              <button type="button" id="logoutBtn" class="logoutBtn hidden">Logout</button>
+            </span>
           </div>
-          <div class="controls">
-            <button id="refreshBtn" type="button">Refresh</button>
+          <div class="infoRow" id="countdownWrap" aria-live="polite">
+            <span class="infoKey countdownLabel">Cooldown</span>
+            <span class="infoVal countdownVal">
+              <span id="countdown" class="countdown">0</span>
+              <span class="countdownUnit">s</span>
+            </span>
+          </div>
+          <div class="infoRow">
+            <span class="infoKey muted">clickCooldownSeconds</span>
+            <code class="infoVal" id="cooldownConfig">—</code>
+          </div>
+          <div class="infoRow">
+            <span class="infoKey muted">worldSeed</span>
+            <code class="infoVal" id="worldSeedDisplay">—</code>
+          </div>
+          <div class="infoRow">
+            <span class="infoKey muted">next period (UTC)</span>
+            <code class="infoVal" id="nextPeriodUtc">—</code>
+          </div>
+          <div class="infoRow">
+            <span class="infoKey muted">resets in</span>
+            <code class="infoVal" id="refreshCountdown">--:--:--</code>
           </div>
         </div>
-      </header>
 
-      <main class="main">
-        <section class="board">
-          <canvas id="canvas" width="800" height="800"></canvas>
-          <div id="hint" class="hint">Click a cell in the ring. Planet stats stay hidden until you reveal a tile.</div>
-        </section>
-        <aside class="panel">
+        <div class="controls">
+          <button id="refreshBtn" type="button">Refresh</button>
+        </div>
+
+        <!-- Selection details panel -->
+        <div class="panel">
           <div class="panelTitle">Selection</div>
           <pre id="details" class="details details--hidden">Stats are hidden until you click a tile.</pre>
-        </aside>
+        </div>
+
+      </aside>
+
+      <!-- ── Galaxy (square, anchored to the right edge) ────────────────────── -->
+      <main class="galaxyMain">
+        <canvas id="canvas" width="800" height="800"></canvas>
+        <div id="hint" class="hint">Click a cell in the ring. Planet stats stay hidden until you reveal a tile.</div>
       </main>
+
     </div>
 
     <script type="module" src="./src/main.js"></script>

public/style.css

@@ -1,4 +1,13 @@
-.app {
+/* ── Reset & base ─────────────────────────────────────────────────────────── */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial,
     "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
   color: #e9eef6;
@@ -6,8 +15,55 @@
   min-height: 100vh;
 }
 
-body {
+/* ── Mobile / small-screen overlay ───────────────────────────────────────── */
+
+.mobileOverlay {
+  display: none; /* hidden on desktop — shown via media query below */
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(5, 8, 18, 0.97);
+  backdrop-filter: blur(16px);
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  text-align: center;
+}
+
+.mobileOverlayCard {
+  max-width: 360px;
+  padding: 40px 28px;
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(15, 22, 42, 0.9);
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
+}
+
+.mobileOverlayIcon {
+  font-size: 52px;
+  margin-bottom: 16px;
+}
+
+.mobileOverlayTitle {
+  margin: 0 0 12px;
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: 0.2px;
+  color: rgba(113, 199, 255, 0.95);
+}
+
+.mobileOverlayText {
   margin: 0;
+  font-size: 14px;
+  line-height: 1.7;
+  color: rgba(233, 238, 246, 0.75);
+}
+
+/* Show overlay on small / narrow screens */
+@media (max-width: 768px), (max-height: 500px) {
+  .mobileOverlay {
+    display: flex;
+  }
 }
 
 /* ── Auth overlay ─────────────────────────────────────────────────────────── */
@@ -272,8 +328,8 @@ body {
   display: flex;
   align-items: center;
   gap: 16px;
-  padding: 10px 20px;
-  border-radius: 16px;
+  padding: 10px 16px;
+  border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.04);
   font-size: 22px;
@@ -319,79 +375,96 @@ body {
   font-size: 18px;
 }
 
-/* ── Top bar ──────────────────────────────────────────────────────────────── */
+/* ── Main app layout ──────────────────────────────────────────────────────── */
 
-.topbar {
+.app {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 18px 18px 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(7, 10, 20, 0.65);
-  backdrop-filter: blur(8px);
-  position: sticky;
-  top: 0;
-  z-index: 2;
+  flex-direction: row;
+  align-items: stretch;
+  height: 100vh;
+  overflow: hidden;
 }
 
-.h1 {
-  font-size: 18px;
+/* ── Left information column ──────────────────────────────────────────────── */
+
+.infoColumn {
+  flex: 1 1 0;
+  min-width: 260px;
+  max-width: 420px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 22px 18px 18px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: rgba(7, 10, 20, 0.55);
+  border-right: 1px solid rgba(255, 255, 255, 0.07);
+}
+
+/* Scrollbar styling for the info column */
+.infoColumn::-webkit-scrollbar {
+  width: 5px;
+}
+.infoColumn::-webkit-scrollbar-track {
+  background: transparent;
+}
+.infoColumn::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+}
+
+.infoSection--title .h1 {
+  font-size: 17px;
   font-weight: 700;
   letter-spacing: 0.2px;
 }
 
-.sub {
-  font-size: 12px;
-  opacity: 0.75;
-  margin-top: 3px;
+.infoSection--title .sub {
+  font-size: 11px;
+  opacity: 0.65;
+  margin-top: 4px;
 }
 
-/* ── Top-right table ──────────────────────────────────────────────────────── */
+/* ── Info table (rows of key/value pairs) ─────────────────────────────────── */
 
-.topRight {
+.infoTable {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
-  gap: 10px;
+  gap: 6px;
+}
+
+.infoRow {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-height: 22px;
+}
+
+.infoKey {
   flex: 0 0 auto;
-}
-
-.topRightTable {
-  display: table;
-  border-collapse: separate;
-  border-spacing: 0 4px;
-}
-
-.topRightRow {
-  display: table-row;
-}
-
-.trKey {
-  display: table-cell;
+  font-size: 11px;
+  opacity: 0.65;
+  white-space: nowrap;
+  min-width: 130px;
   text-align: right;
-  padding-right: 8px;
-  font-size: 11px;
-  opacity: 0.7;
-  white-space: nowrap;
-  vertical-align: middle;
 }
 
-.trVal {
-  display: table-cell;
-  text-align: left;
+.infoVal {
+  flex: 1;
   font-size: 11px;
   white-space: nowrap;
-  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.trVal code {
+.infoVal code {
   font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 8px;
+  padding: 2px 7px;
+  border-radius: 7px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.12);
   word-break: break-all;
+  white-space: normal;
 }
 
 /* Countdown row */
@@ -410,14 +483,16 @@ body {
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: rgba(255, 193, 113, 0.9);
+  opacity: 1 !important;
 }
 
 .countdownVal {
-  display: table-cell;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 700;
   color: rgba(255, 193, 113, 1);
-  vertical-align: middle;
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
 }
 
 .countdown {
@@ -429,7 +504,6 @@ body {
 .countdownUnit {
   font-size: 12px;
   opacity: 0.8;
-  margin-left: 2px;
 }
 
 /* User display */
@@ -459,51 +533,86 @@ body {
 }
 
 .muted {
-  opacity: 0.7;
+  opacity: 0.55;
 }
 
+/* ── Controls ──────────────────────────────────────────────────────────────── */
+
 .controls {
   display: flex;
-  align-items: end;
+  align-items: center;
   gap: 10px;
 }
 
 button {
-  padding: 10px 12px;
+  padding: 9px 14px;
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.14);
   background: rgba(113, 199, 255, 0.16);
   color: #e9eef6;
+  font-size: 13px;
   cursor: pointer;
+  transition: background 0.15s;
 }
 
 button:hover {
-  background: rgba(113, 199, 255, 0.22);
+  background: rgba(113, 199, 255, 0.24);
 }
 
-.main {
-  display: grid;
-  grid-template-columns: 1fr 360px;
-  gap: 14px;
-  padding: 14px 18px 18px;
-}
+/* ── Selection panel ─────────────────────────────────────────────────────── */
 
-.board {
-  position: relative;
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.10);
-  background: rgba(255, 255, 255, 0.04);
+.panel {
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  background: rgba(255, 255, 255, 0.03);
+  overflow: hidden;
+  flex: 1 1 auto;
+  min-height: 80px;
+}
+
+.panelTitle {
+  padding: 10px 14px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.7;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+}
+
+.details {
+  margin: 0;
+  padding: 12px 14px 14px;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: rgba(233, 238, 246, 0.92);
+}
+
+.details--hidden {
+  color: rgba(233, 238, 246, 0.4);
+  font-style: italic;
+}
+
+/* ── Galaxy: square, pinned to the right ──────────────────────────────────── */
+
+.galaxyMain {
+  /* Height fills the viewport; aspect-ratio keeps it perfectly square */
+  flex: 0 0 auto;
+  position: relative;
+  height: 100vh;
+  aspect-ratio: 1 / 1;
+  /* Constrain width so the canvas never exceeds available space */
+  max-width: calc(100vw - 260px);
+  background: #000;
   overflow: hidden;
-  min-height: 820px;
 }
 
 canvas {
   display: block;
-  width: min(820px, calc(100vw - 420px));
-  height: min(820px, calc(100vw - 420px));
-  max-width: 820px;
-  max-height: 820px;
-  margin: 0 auto;
+  width: 100%;
+  height: 100%;
   image-rendering: pixelated;
 }
 
@@ -515,46 +624,9 @@ canvas {
   font-size: 12px;
   opacity: 0.8;
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.10);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(7, 10, 20, 0.65);
   backdrop-filter: blur(6px);
-}
-
-.panel {
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.10);
-  background: rgba(255, 255, 255, 0.04);
-  overflow: hidden;
-  height: fit-content;
-}
-
-.panelTitle {
-  padding: 12px 14px;
-  font-weight: 700;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.details {
-  margin: 0;
-  padding: 12px 14px 14px;
-  font-size: 12px;
-  line-height: 1.4;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: rgba(233, 238, 246, 0.92);
-}
-
-.details--hidden {
-  color: rgba(233, 238, 246, 0.45);
-  font-style: italic;
-}
-
-@media (max-width: 1100px) {
-  .main {
-    grid-template-columns: 1fr;
-  }
-  canvas {
-    width: min(820px, calc(100vw - 36px));
-    height: min(820px, calc(100vw - 36px));
-  }
+  max-width: calc(100% - 28px);
+  pointer-events: none;
 }