From 6408f280ce42253f218e9b075c8900d800083523 Mon Sep 17 00:00:00 2001
From: Marco D'Aleo <marco@marcodaleo.com>
Date: Tue, 7 Jul 2026 14:34:03 +0100
Subject: [PATCH] Slightly improve mobile version, rename html file

---
 ...ame.html => uptime-incident-response.html} | 94 ++++++++++++++++---
 1 file changed, 79 insertions(+), 15 deletions(-)
 rename games/uptime/{uptime-incident-game.html => uptime-incident-response.html} (94%)
diff --git a/games/uptime/uptime-incident-game.html b/games/uptime/uptime-incident-response.html
similarity index 94%
rename from games/uptime/uptime-incident-game.html
rename to games/uptime/uptime-incident-response.html
index 490d4b9..c6efddd 100644
--- a/games/uptime/uptime-incident-game.html
+++ b/games/uptime/uptime-incident-response.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>UPTIME // Incident Response</title>
+<title>UPTIME: Incident Response</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
 <style>
@@ -26,6 +26,11 @@
     --rack:#18243b;
     --rack-face:#202f4b;
     --rack-dark:#0c1220;
+    --node-width:94px;
+    --rack-width:58px;
+    --rack-height:94px;
+    --node-label-size:10px;
+    --edge-width:3;
   }
   *{box-sizing:border-box; margin:0; padding:0;}
   html,body{height:100%;}
@@ -36,6 +41,7 @@
     color:var(--text);
     font-family:'JetBrains Mono', monospace;
     min-height:100vh;
+    min-height:100svh;
     display:flex;
     align-items:center;
     justify-content:center;
@@ -85,7 +91,7 @@
     border-radius:10px;
     position:relative;
     overflow:hidden;
-    aspect-ratio: 16 / 9;
+    aspect-ratio: 5 / 3;
     image-rendering:pixelated;
     box-shadow:0 0 0 1px #000, 0 24px 80px rgba(0,0,0,0.6), 0 0 60px rgba(70,224,212,0.05) inset;
   }
@@ -174,7 +180,7 @@
     text-shadow:0 0 10px rgba(70,224,212,0.38);
   }
   svg.edges{ position:absolute; inset:0; width:100%; height:100%; z-index:2; filter:drop-shadow(0 0 4px rgba(70,224,212,0.08)); }
-  .edge-line{ stroke:#293b60; stroke-width:3; stroke-linecap:round; stroke-dasharray:8 6; opacity:0.78; transition:stroke 0.3s, opacity 0.3s; }
+  .edge-line{ stroke:#293b60; stroke-width:var(--edge-width); stroke-linecap:round; stroke-dasharray:8 6; opacity:0.78; transition:stroke 0.3s, opacity 0.3s; }
   .edge-line.pulse{ stroke:var(--cyan); opacity:0.9; animation:cableflow 1.7s linear infinite; }
   .edge-line.hot{ stroke:var(--critical); opacity:1; stroke-dasharray:3 4; animation:cableflow 0.55s linear infinite; }
   @keyframes cableflow{ to{ stroke-dashoffset:-28; } }
@@ -185,10 +191,10 @@
     transform-origin:center bottom;
     display:flex; flex-direction:column; align-items:center;
     z-index:4; cursor:default; text-align:center;
-    width:94px;
+    width:var(--node-width);
   }
   .node-dot{
-    width:58px; height:94px; border-radius:3px;
+    width:var(--rack-width); height:var(--rack-height); border-radius:3px;
     background:linear-gradient(90deg, var(--rack-dark) 0 8%, var(--rack) 8% 90%, #0a101d 90%);
     border:2px solid #263a5a;
     display:block;
@@ -223,10 +229,10 @@
   @keyframes badflash{ 0%,100%{ transform:translateX(0); filter:brightness(1); } 40%{ transform:translateX(-3px); filter:brightness(1.6); } 70%{ transform:translateX(3px); filter:brightness(1.2); } }
 
   .node-name{
-    font-size:10px; font-weight:700; margin-top:5px; letter-spacing:0.08em; color:#fff;
+    font-size:var(--node-label-size); font-weight:700; margin-top:5px; letter-spacing:0.08em; color:#fff;
     background:rgba(4,6,12,0.78); border:1px solid rgba(47,67,105,0.85); padding:3px 5px;
   }
-  .node-bar{ width:58px; height:4px; background:#0c1220; border-radius:0; margin-top:4px; overflow:hidden; border:1px solid #263a5a; }
+  .node-bar{ width:var(--rack-width); height:4px; background:#0c1220; border-radius:0; margin-top:4px; overflow:hidden; border:1px solid #263a5a; }
   .node-bar-fill{ height:100%; background:var(--healthy); transition:width 0.2s, background 0.2s; }
 
   /* ---- Incident panel ---- */
@@ -344,22 +350,75 @@
     body.game-running .side{ order:1; }
     .queue{ max-height:58vh; min-height:250px; }
     .actions{ grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); }
-    .action-btn{ min-height:40px; font-size:11px; }
+    .action-btn{ min-height:44px; font-size:12px; }
   }
 
   @media (max-width:520px){
+    :root{
+      --node-width:58px;
+      --rack-width:34px;
+      --rack-height:50px;
+      --node-label-size:7px;
+      --edge-width:2.2;
+    }
+    body{ padding:8px; }
     .topbar{ align-items:flex-start; }
-    .stats{ width:100%; justify-content:space-between; gap:10px; }
-    .stat{ text-align:left; }
-    .node{ width:76px; }
-    .node-dot{ width:42px; height:70px; border-radius:3px; }
-    .node-name{ font-size:9px; }
-    .node-bar{ width:42px; }
+    .subtitle{ font-size:9px; letter-spacing:0.14em; }
+    .stats{ width:100%; justify-content:space-between; gap:6px; }
+    .stat{ flex:1 1 calc(50% - 6px); min-width:0; text-align:left; padding:7px 9px; }
+    .stat .val{ font-size:17px; }
+    .stat .lbl{ font-size:8px; letter-spacing:0.16em; }
+    .map-panel{ aspect-ratio: 3 / 4; border-radius:8px; min-height:430px; }
+    .map-caption{ top:8px; left:9px; font-size:8px; letter-spacing:0.12em; }
+    .node-name{ margin-top:4px; padding:2px 3px; letter-spacing:0.03em; }
+    .node-bar{ height:3px; margin-top:3px; }
     .side-head{ letter-spacing:1.2px; }
-    .queue{ max-height:60vh; }
+    .queue{ max-height:54svh; min-height:220px; padding:8px; }
     .debrief-stats{ grid-template-columns:repeat(2, 1fr); }
     .card{ padding:8px; }
     .actions{ grid-template-columns:1fr; }
+    .diff-btn{ padding:7px 9px; font-size:10px; }
+  }
+
+  @media (max-width:380px){
+    :root{
+      --node-width:52px;
+      --rack-width:30px;
+      --rack-height:44px;
+      --node-label-size:7px;
+      --edge-width:2;
+    }
+    .map-caption{ display:none; }
+    .node-name{ padding:2px 3px; letter-spacing:0.03em; }
+  }
+
+  @media (max-width:920px) and (orientation:landscape) and (max-height:560px){
+    :root{
+      --node-width:58px;
+      --rack-width:34px;
+      --rack-height:50px;
+      --node-label-size:7px;
+      --edge-width:2.1;
+    }
+    body{ align-items:flex-start; padding:8px; }
+    .topbar{ align-items:center; padding-bottom:8px; }
+    .title{ font-size:20px; }
+    .subtitle{ display:none; }
+    .stats{ width:auto; gap:6px; }
+    .stat{ min-width:74px; padding:6px 8px; }
+    .stat .val{ font-size:16px; }
+    .stat .lbl{ font-size:7px; letter-spacing:0.12em; }
+    .board{ grid-template-columns:minmax(0, 1fr) minmax(260px, 330px); gap:8px; }
+    .map-panel{ aspect-ratio:4 / 3; min-height:0; order:1; }
+    .side{ order:2; height:calc(100svh - 74px); min-height:250px; }
+    body.game-running .map-panel{ order:1; }
+    body.game-running .side{ order:2; }
+    .queue{ max-height:none; min-height:0; }
+    .actions{ grid-template-columns:1fr; }
+    .action-btn{ min-height:40px; }
+    .overlay{ padding:12px; gap:8px; }
+    .overlay h2{ font-size:20px; }
+    .overlay p{ font-size:10px; line-height:1.4; }
   }
 
   /* ---- Overlays ---- */
@@ -378,6 +437,11 @@
     letter-spacing:1px; cursor:pointer; text-transform:uppercase; margin-top:4px;
   }
   .startbtn:hover{ filter:brightness(1.1); }
+  @media (max-width:520px){
+    .overlay{ gap:10px; padding:14px; }
+    .overlay h2{ font-size:22px; }
+    .overlay p{ font-size:11px; line-height:1.45; }
+  }
   .hint{ position:relative; }
   .maprel{ position:relative; height:100%; }
   body.incident-active .map-panel{ box-shadow:0 0 0 1px #000, 0 24px 80px rgba(0,0,0,0.6), 0 0 72px rgba(255,180,84,0.08) inset; }
