From 8fbb4c15d79e446f2ab74139037954433df1ee51 Mon Sep 17 00:00:00 2001
From: Pedro Ramon77 <ramonpedro775@gmail.com>
Date: Tue, 6 Oct 2026 18:54:01 -0300
Subject: [PATCH 1/8] feat: adiciona sistema de recordes ao Tetris

---
 inde.html | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/inde.html b/inde.html
index 87e71f8..901ebd0 100644
--- a/inde.html
+++ b/inde.html
@@ -12,6 +12,7 @@
     #menu p a { text-decoration: none; color: black; }
     #upcoming { display: block; margin: 0 auto; background-color: #E0E0E0; }
     #score    { color: blue; font-weight: bold; vertical-align: middle; }
+    #record   { color: black; font-weight: bold; vertical-align: middle; }
     #rows     { color: blue; font-weight: bold; vertical-align: middle; }
     #stats    { position: absolute; bottom: 0em; right: 1em; }
     @media screen and (min-width:   0px) and (min-height:   0px)  { #tetris { font-size: 0.75em; width: 250px; } #menu { width: 100px; height: 200px; } #upcoming { width:  50px; height:  50px; } #canvas { width: 100px; height: 200px; } } /* 10px chunks */
@@ -30,8 +31,9 @@
     <div id="menu">
       <p id="start"><a href="javascript:play();">Press Space to Play.</a></p>
       <p><canvas id="upcoming"></canvas></p>
-      <p>score <span id="score">00000</span></p>
-      <p>rows <span id="rows">0</span></p>
+      <p>score: <span id="score">00000</span></p>
+      <p>record: <span id="record">00000</span></p>
+      <p>rows: <span id="rows">0</span></p>
     </div>
     <canvas id="canvas">
       Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
@@ -245,8 +247,7 @@
     function play() { hide('start'); reset();      paused = false;  playing = true;  }
     function pause() {show('start'); paused = true; playing = false;}
     function restart() {hide('start'); paused = false; playing = true;}
-    function lose() { show('start'); setVisualScore(); playing = false; }
-
+    function lose() { saveRecord(); show('start'); setVisualScore(); playing = false; }
     function setVisualScore(n)      { vscore = n || score; invalidateScore(); }
     function setScore(n)            { score = n; setVisualScore(n);  }
     function addScore(n)            { score = score + n;   }
@@ -367,6 +368,20 @@
       }
     }
 
+    function saveRecord() {
+      var record = Number(localStorage.getItem('tetrisRecord')) || 0;
+      if (score > record) {
+        record = score;
+        localStorage.setItem('tetrisRecord', record);
+      }
+      html('record', ("00000" + record).slice(-5));
+    }
+
+    function showRecord() {
+      var record = Number(localStorage.getItem('tetrisRecord')) || 0;
+      html('record', ("00000" + record).slice(-5));
+    }
+
     //-------------------------------------------------------------------------
     // RENDERING
     //-------------------------------------------------------------------------
@@ -449,7 +464,7 @@
     //-------------------------------------------------------------------------
     // FINALLY, lets run the game
     //-------------------------------------------------------------------------
-
+    showRecord();
     run();
 
   </script>

From 079bf3c9a556bd61b89dff7c13831655f789cd49 Mon Sep 17 00:00:00 2001
From: Pedro Ramon77 <ramonpedro775@gmail.com>
Date: Tue, 6 Oct 2026 19:23:50 -0300
Subject: [PATCH 2/8] feat: adiciona destaque visual ao novo recorde

---
 inde.html | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/inde.html b/inde.html
index 901ebd0..0001fcf 100644
--- a/inde.html
+++ b/inde.html
@@ -12,8 +12,8 @@
     #menu p a { text-decoration: none; color: black; }
     #upcoming { display: block; margin: 0 auto; background-color: #E0E0E0; }
     #score    { color: blue; font-weight: bold; vertical-align: middle; }
-    #record   { color: black; font-weight: bold; vertical-align: middle; }
-    #rows     { color: blue; font-weight: bold; vertical-align: middle; }
+    #record   { color: blue; font-weight: bold; vertical-align: middle; }
+    #new-record { color: #e60000; font-weight: bold; font-size: 18px; text-align: center; margin: 8px 0; text-transform: uppercase; letter-spacing: 1px; animation: piscar 0.8s infinite; } @keyframes piscar { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }    #rows     { color: blue; font-weight: bold; vertical-align: middle; }
     #stats    { position: absolute; bottom: 0em; right: 1em; }
     @media screen and (min-width:   0px) and (min-height:   0px)  { #tetris { font-size: 0.75em; width: 250px; } #menu { width: 100px; height: 200px; } #upcoming { width:  50px; height:  50px; } #canvas { width: 100px; height: 200px; } } /* 10px chunks */
     @media screen and (min-width: 400px) and (min-height: 400px)  { #tetris { font-size: 1.00em; width: 350px; } #menu { width: 150px; height: 300px; } #upcoming { width:  75px; height:  75px; } #canvas { width: 150px; height: 300px; } } /* 15px chunks */
@@ -33,6 +33,7 @@
       <p><canvas id="upcoming"></canvas></p>
       <p>score: <span id="score">00000</span></p>
       <p>record: <span id="record">00000</span></p>
+      <p id="new-record"></p>
       <p>rows: <span id="rows">0</span></p>
     </div>
     <canvas id="canvas">
@@ -95,6 +96,7 @@
         current,       // the current piece
         next,          // the next piece
         score,         // the current score
+        record,        // the current record
         vscore,        // the currently displayed score (it catches up to score in small chunks - like a spinning slot machine)
         rows,          // number of completed rows in the current game
         step;          // how long before current piece drops by 1 row
@@ -264,6 +266,7 @@
 
     function reset() {
       dt = 0;
+      html('new-record', '');
       clearActions();
       clearBlocks();
       clearRows();
@@ -369,16 +372,21 @@
     }
 
     function saveRecord() {
-      var record = Number(localStorage.getItem('tetrisRecord')) || 0;
-      if (score > record) {
+      var recordAtual = Number(localStorage.getItem('tetrisRecord')) || 0;
+      if (score > recordAtual) {
         record = score;
         localStorage.setItem('tetrisRecord', record);
+        html('new-record', 'NEW RECORD !!!');
+      }
+      else {
+        record = recordAtual;
+        html('new-record', '');
       }
       html('record', ("00000" + record).slice(-5));
     }
 
     function showRecord() {
-      var record = Number(localStorage.getItem('tetrisRecord')) || 0;
+      record = Number(localStorage.getItem('tetrisRecord')) || 0;
       html('record', ("00000" + record).slice(-5));
     }
 

From c1095534aa5268b14f5da087814113636cccc01e Mon Sep 17 00:00:00 2001
From: Lana Liz <lanaliztorres@gmail.com>
Date: Thu, 8 Oct 2026 14:21:37 -0300
Subject: [PATCH 3/8] feat: implementa funcionalidade de Game Over com mensagem
 centralizada e recordes

---
 inde.html | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/inde.html b/inde.html
index 0001fcf..1988c1f 100644
--- a/inde.html
+++ b/inde.html
@@ -39,6 +39,7 @@
     <canvas id="canvas">
       Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
     </canvas>
+    <div id="gameover" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: red; font-size: 2em; font-weight: bold; text-shadow: 2px 2px 4px black; background: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 5px;">GAME OVER</div>
   </div>
 
   <script src="stats.js"></script>
@@ -246,10 +247,22 @@
     // GAME LOGIC
     //-------------------------------------------------------------------------
 
-    function play() { hide('start'); reset();      paused = false;  playing = true;  }
-    function pause() {show('start'); paused = true; playing = false;}
-    function restart() {hide('start'); paused = false; playing = true;}
-    function lose() { saveRecord(); show('start'); setVisualScore(); playing = false; }
+    function play() { 
+      hide('start'); 
+      get('gameover').style.display = 'none'; // Esconde a mensagem de Game Over
+      reset();      
+      paused = false;  
+      playing = true;  
+    }
+    function pause() { show('start'); paused = true; playing = false; }
+    function restart() { hide('start'); get('gameover').style.display = 'none'; paused = false; playing = true; }
+    function lose() { 
+      saveRecord(); 
+      show('start'); 
+      get('gameover').style.display = 'block'; // Mostra a mensagem de Game Over no meio da tela
+      setVisualScore(); 
+      playing = false; 
+    }
     function setVisualScore(n)      { vscore = n || score; invalidateScore(); }
     function setScore(n)            { score = n; setVisualScore(n);  }
     function addScore(n)            { score = score + n;   }

From 426189275daf9ad589cb0a3c8b7317f84a080520 Mon Sep 17 00:00:00 2001
From: Lana Liz <lanaliztorres@gmail.com>
Date: Thu, 8 Oct 2026 14:47:31 -0300
Subject: [PATCH 4/8] style: ajusta container para centralizar o Game Over
 exatamente sobre o canvas do jogo

---
 inde.html | 77 +++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 58 insertions(+), 19 deletions(-)

diff --git a/inde.html b/inde.html
index 1988c1f..62405c5 100644
--- a/inde.html
+++ b/inde.html
@@ -3,18 +3,40 @@
 <head>
   <title>Javascript Tetris</title>
   <style>
-    body      { font-family: Helvetica, sans-serif; }
-    #tetris   { margin: 1em auto; padding: 1em; border: 4px solid black; border-radius: 10px; background-color: #F8F8F8; }
-    #stats    { display: inline-block; vertical-align: top; }
-    #canvas   { display: inline-block; vertical-align: top; background: url(texture.jpg); box-shadow: 10px 10px 10px #999; border: 2px solid #333; }
-    #menu     { display: inline-block; vertical-align: top; position: relative; }
-    #menu p   { margin: 0.5em 0; text-align: center; }
-    #menu p a { text-decoration: none; color: black; }
-    #upcoming { display: block; margin: 0 auto; background-color: #E0E0E0; }
-    #score    { color: blue; font-weight: bold; vertical-align: middle; }
-    #record   { color: blue; font-weight: bold; vertical-align: middle; }
+    body        { font-family: Helvetica, sans-serif; }
+    #tetris     { margin: 1em auto; padding: 1em; border: 4px solid black; border-radius: 10px; background-color: #F8F8F8; position: relative; width: fit-content; }
+    #stats      { display: inline-block; vertical-align: top; }
+    #canvas     { display: inline-block; vertical-align: top; background: url(texture.jpg); box-shadow: 10px 10px 10px #999; border: 2px solid #333; }
+    #menu       { display: inline-block; vertical-align: top; position: relative; }
+    #menu p     { margin: 0.5em 0; text-align: center; }
+    #menu p a   { text-decoration: none; color: black; }
+    #upcoming   { display: block; margin: 0 auto; background-color: #E0E0E0; }
+    #score      { color: blue; font-weight: bold; vertical-align: middle; }
+    #record     { color: blue; font-weight: bold; vertical-align: middle; }
     #new-record { color: #e60000; font-weight: bold; font-size: 18px; text-align: center; margin: 8px 0; text-transform: uppercase; letter-spacing: 1px; animation: piscar 0.8s infinite; } @keyframes piscar { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }    #rows     { color: blue; font-weight: bold; vertical-align: middle; }
-    #stats    { position: absolute; bottom: 0em; right: 1em; }
+    #stats      { position: absolute; bottom: 0em; right: 1em; }
+   #gameover { 
+      display: none; 
+      position: absolute; 
+      top: 50%; 
+      left: 50%; 
+      transform: translate(-50%, -50%); 
+      color: #ff3333; 
+      font-family: 'Helvetica', sans-serif; 
+      font-size: 2em; 
+      font-weight: 900; 
+      text-transform: uppercase; 
+      text-shadow: 0 0 12px rgba(255, 0, 0, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.9); 
+      background: rgba(0, 0, 0, 0.85); 
+      padding: 15px 25px; 
+      border-radius: 8px; 
+      border: 2px solid #ff3333; 
+      letter-spacing: 2px; 
+      text-align: center; 
+      z-index: 10; 
+      animation: pulseOver 1.5s infinite ease-in-out; 
+    }  
+    @keyframes pulseOver { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } 100% { transform: translate(-50%, -50%) scale(1); } }
     @media screen and (min-width:   0px) and (min-height:   0px)  { #tetris { font-size: 0.75em; width: 250px; } #menu { width: 100px; height: 200px; } #upcoming { width:  50px; height:  50px; } #canvas { width: 100px; height: 200px; } } /* 10px chunks */
     @media screen and (min-width: 400px) and (min-height: 400px)  { #tetris { font-size: 1.00em; width: 350px; } #menu { width: 150px; height: 300px; } #upcoming { width:  75px; height:  75px; } #canvas { width: 150px; height: 300px; } } /* 15px chunks */
     @media screen and (min-width: 500px) and (min-height: 500px)  { #tetris { font-size: 1.25em; width: 450px; } #menu { width: 200px; height: 400px; } #upcoming { width: 100px; height: 100px; } #canvas { width: 200px; height: 400px; } } /* 20px chunks */
@@ -36,10 +58,14 @@
       <p id="new-record"></p>
       <p>rows: <span id="rows">0</span></p>
     </div>
-    <canvas id="canvas">
-      Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
-    </canvas>
-    <div id="gameover" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: red; font-size: 2em; font-weight: bold; text-shadow: 2px 2px 4px black; background: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 5px;">GAME OVER</div>
+    
+    <!-- Container exclusivo para o canvas e o game over -->
+    <div style="display: inline-block; vertical-align: top; position: relative;">
+      <canvas id="canvas">
+        Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
+      </canvas>
+      <div id="gameover">GAME OVER</div>
+    </div>
   </div>
 
   <script src="stats.js"></script>
@@ -249,17 +275,29 @@
 
     function play() { 
       hide('start'); 
-      get('gameover').style.display = 'none'; // Esconde a mensagem de Game Over
+      get('gameover').style.display = 'none'; // Some apenas quando o jogo começa de fato
       reset();      
       paused = false;  
       playing = true;  
     }
-    function pause() { show('start'); paused = true; playing = false; }
-    function restart() { hide('start'); get('gameover').style.display = 'none'; paused = false; playing = true; }
+
+    function pause() { 
+      show('start'); 
+      paused = true; 
+      playing = false; 
+    }
+
+    function restart() { 
+      hide('start'); 
+      get('gameover').style.display = 'none'; 
+      paused = false; 
+      playing = true; 
+    }
+    
     function lose() { 
       saveRecord(); 
       show('start'); 
-      get('gameover').style.display = 'block'; // Mostra a mensagem de Game Over no meio da tela
+      get('gameover').style.display = 'block'; // Fica visível na tela quando perde
       setVisualScore(); 
       playing = false; 
     }
@@ -485,6 +523,7 @@
     //-------------------------------------------------------------------------
     // FINALLY, lets run the game
     //-------------------------------------------------------------------------
+    get('gameover').style.display = 'none'; // Garante que começa oculto
     showRecord();
     run();
 

From 2c40a50fdcd33389ddb6cbeaee69010510832bdd Mon Sep 17 00:00:00 2001
From: Ana Leticia Alves <143745198+ana-leticia-alves@users.noreply.github.com>
Date: Mon, 12 Oct 2026 20:03:39 -0300
Subject: [PATCH 5/8] =?UTF-8?q?:sparkles:=20feat:=20adiciona=20c=C3=A1lcul?=
 =?UTF-8?q?o=20da=20posi=C3=A7=C3=A3o=20final=20da=20pe=C3=A7a=20fantasma?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 inde.html | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/inde.html b/inde.html
index 1988c1f..0818d92 100644
--- a/inde.html
+++ b/inde.html
@@ -426,11 +426,13 @@
     }
 
     function drawCourt() {
-      if (invalid.court) {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        if (playing)
-          drawPiece(ctx, current.type, current.x, current.y, current.dir);
-        var x, y, block;
+    if (invalid.court) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      if (playing) {
+        drawGhostPiece(ctx, current.type, current.x, getGhostY(), current.dir); // incluir a peça fantasma
+        drawPiece(ctx, current.type, current.x, current.y, current.dir);
+      }
+      var x, y, block;
         for(y = 0 ; y < ny ; y++) {
           for (x = 0 ; x < nx ; x++) {
             if (block = getBlock(x,y))
@@ -470,6 +472,15 @@
       }
     }
 
+    // peça fantasma
+    function getGhostY() {
+    var y = current.y;
+    while (unoccupied(current.type, current.x, y + 1, current.dir)) {
+      y++;
+    }
+    return y;
+    }
+    
     function drawPiece(ctx, type, x, y, dir) {
       eachblock(type, x, y, dir, function(x, y) {
         drawBlock(ctx, x, y, type.color);

From c538091c3ab40ef43a85946a059cdd7e436e8ce7 Mon Sep 17 00:00:00 2001
From: Ana Leticia Alves <143745198+ana-leticia-alves@users.noreply.github.com>
Date: Mon, 12 Oct 2026 20:05:21 -0300
Subject: [PATCH 6/8] =?UTF-8?q?:sparkles:=20feat:=20implementa=20a=20rende?=
 =?UTF-8?q?riza=C3=A7=C3=A3o=20da=20pe=C3=A7a=20fantasma=20no=20tabuleiro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 inde.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/inde.html b/inde.html
index 0818d92..ef22fde 100644
--- a/inde.html
+++ b/inde.html
@@ -480,6 +480,15 @@
     }
     return y;
     }
+
+    function drawGhostPiece(ctx, type, x, y, dir) {
+    ctx.save();
+    ctx.globalAlpha = 0.3;
+    eachblock(type, x, y, dir, function(x, y) {
+      drawBlock(ctx, x, y, type.color);
+    });
+    ctx.restore();
+    }
     
     function drawPiece(ctx, type, x, y, dir) {
       eachblock(type, x, y, dir, function(x, y) {

From 3b1768eee5df1f85e1a794cc8376ab4f3d24dc66 Mon Sep 17 00:00:00 2001
From: Lana Liz <lanaliztorres@gmail.com>
Date: Mon, 12 Oct 2026 22:07:35 -0300
Subject: [PATCH 7/8] style: centraliza perfeitamente o Game Over no canvas do
 jogo

---
 inde.html | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/inde.html b/inde.html
index 1988c1f..6a66c59 100644
--- a/inde.html
+++ b/inde.html
@@ -14,7 +14,38 @@
     #score    { color: blue; font-weight: bold; vertical-align: middle; }
     #record   { color: blue; font-weight: bold; vertical-align: middle; }
     #new-record { color: #e60000; font-weight: bold; font-size: 18px; text-align: center; margin: 8px 0; text-transform: uppercase; letter-spacing: 1px; animation: piscar 0.8s infinite; } @keyframes piscar { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }    #rows     { color: blue; font-weight: bold; vertical-align: middle; }
+<<<<<<< Updated upstream
     #stats    { position: absolute; bottom: 0em; right: 1em; }
+=======
+    #stats      { position: absolute; bottom: 0em; right: 1em; }
+   #gameover { 
+      display: none; 
+      position: absolute; 
+      top: 50%; 
+      left: 50%; 
+      transform: translate(-50%, -50%); 
+      color: #ff3333; 
+      font-family: 'Helvetica', sans-serif; 
+      font-size: 2em; 
+      font-weight: 900; 
+      text-transform: uppercase; 
+      text-shadow: 0 0 12px rgba(255, 0, 0, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.9); 
+      background: rgba(0, 0, 0, 0.85); 
+      padding: 15px 25px; 
+      border-radius: 8px; 
+      border: 2px solid #ff3333; 
+      letter-spacing: 2px; 
+      text-align: center; 
+      z-index: 10; 
+      animation: pulseOver 1.5s infinite ease-in-out; 
+    } 
+
+    @keyframes pulseOver { 
+      0% { transform: translate(-50%, -50%) scale(1); } 
+      50% { transform: translate(-50%, -50%) scale(1.05); } 
+      100% { transform: translate(-50%, -50%) scale(1); } 
+    }
+>>>>>>> Stashed changes
     @media screen and (min-width:   0px) and (min-height:   0px)  { #tetris { font-size: 0.75em; width: 250px; } #menu { width: 100px; height: 200px; } #upcoming { width:  50px; height:  50px; } #canvas { width: 100px; height: 200px; } } /* 10px chunks */
     @media screen and (min-width: 400px) and (min-height: 400px)  { #tetris { font-size: 1.00em; width: 350px; } #menu { width: 150px; height: 300px; } #upcoming { width:  75px; height:  75px; } #canvas { width: 150px; height: 300px; } } /* 15px chunks */
     @media screen and (min-width: 500px) and (min-height: 500px)  { #tetris { font-size: 1.25em; width: 450px; } #menu { width: 200px; height: 400px; } #upcoming { width: 100px; height: 100px; } #canvas { width: 200px; height: 400px; } } /* 20px chunks */

From 86a25ea6994d374168206449129e1ffc1b2825fb Mon Sep 17 00:00:00 2001
From: Matheus Costa <matheuscosta77a@gmail.com>
Date: Thu, 15 Oct 2026 10:09:24 -0300
Subject: [PATCH 8/8] Melhora visual e corrige execucao do Tetris

---
 README.md               | 11 ++++++++
 inde.html => index.html | 60 ++++++++++++++++++++++++-----------------
 script/server           | 23 ++++++++++------
 script/test             | 13 +++++----
 4 files changed, 67 insertions(+), 40 deletions(-)
 rename inde.html => index.html (85%)

diff --git a/README.md b/README.md
index fd8da0a..2f46f04 100644
--- a/README.md
+++ b/README.md
@@ -7,3 +7,14 @@ You can play the game at: https://githubschool.github.io/github-games/
 >> _*SUPPORTED BROWSERS*: Chrome, Firefox, Safari, Opera and IE9+_
 
 This fun open source game was cloned from: https://github.com/jakesgordon/javascript-tetris
+
+## Running locally
+
+The local server uses Docker Compose. With Docker Desktop running, execute
+`script/server` from Git Bash, or `bash script/server` if the script is not
+executable. The script supports both the current `docker compose` command and
+the legacy `docker-compose` executable.
+
+To run the smoke test, use `script/test` (or `bash script/test`). It starts the
+same server without creating a symbolic link, so it also works on Windows
+without enabling symbolic-link privileges.
diff --git a/inde.html b/index.html
similarity index 85%
rename from inde.html
rename to index.html
index b8db314..4cc9e50 100644
--- a/inde.html
+++ b/index.html
@@ -1,39 +1,46 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Javascript Tetris</title>
+  <title>JavaScript Tetris</title>
   <style>
-    body        { font-family: Helvetica, sans-serif; }
-    #tetris     { margin: 1em auto; padding: 1em; border: 4px solid black; border-radius: 10px; background-color: #F8F8F8; position: relative; width: fit-content; }
-    #stats      { display: inline-block; vertical-align: top; }
-    #canvas     { display: inline-block; vertical-align: top; background: url(texture.jpg); box-shadow: 10px 10px 10px #999; border: 2px solid #333; }
-    #menu       { display: inline-block; vertical-align: top; position: relative; }
-    #menu p     { margin: 0.5em 0; text-align: center; }
-    #menu p a   { text-decoration: none; color: black; }
-    #upcoming   { display: block; margin: 0 auto; background-color: #E0E0E0; }
-    #score      { color: blue; font-weight: bold; vertical-align: middle; }
-    #record     { color: blue; font-weight: bold; vertical-align: middle; }
-    #new-record { color: #e60000; font-weight: bold; font-size: 18px; text-align: center; margin: 8px 0; text-transform: uppercase; letter-spacing: 1px; animation: piscar 0.8s infinite; } @keyframes piscar { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }    #rows     { color: blue; font-weight: bold; vertical-align: middle; }
-    #stats      { position: absolute; bottom: 0em; right: 1em; }
+    :root        { color-scheme: dark; --panel: #111827; --panel-light: #1f2937; --accent: #67e8f9; --value: #facc15; }
+    *            { box-sizing: border-box; }
+    body         { min-height: 100vh; margin: 0; display: grid; place-items: center; font-family: Helvetica, sans-serif; background: radial-gradient(circle at top, #312e81, #111827 65%); color: #f8fafc; }
+    #tetris      { margin: 1em; padding: 1.25em; border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; background: rgba(15,23,42,0.88); position: relative; width: fit-content; box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
+    #game-layout { display: flex; gap: 1em; align-items: flex-start; }
+    #menu        { display: inline-block; vertical-align: top; position: relative; padding: 0.35em; }
+    #menu p      { margin: 0.65em 0; text-align: center; }
+    #menu p a    { display: block; padding: 0.65em 0.75em; border: 1px solid rgba(103,232,249,0.5); border-radius: 10px; background: linear-gradient(135deg, #0891b2, #2563eb); color: white; font-size: 0.8em; font-weight: bold; text-decoration: none; box-shadow: 0 6px 14px rgba(8,145,178,0.3); transition: transform 0.15s ease, filter 0.15s ease; }
+    #menu p a:hover, #menu p a:focus-visible { filter: brightness(1.15); transform: translateY(-2px); outline: none; }
+    #upcoming    { display: block; margin: 0 auto; border: 2px solid rgba(103,232,249,0.6); border-radius: 8px; background-color: #0f172a; box-shadow: inset 0 0 18px rgba(0,0,0,0.35); }
+    .next-label  { color: #94a3b8; font-size: 0.7em; font-weight: bold; letter-spacing: 0.14em; text-transform: uppercase; }
+    .stat-row    { display: flex; justify-content: space-between; gap: 0.5em; padding: 0.45em 0.6em; border-radius: 7px; background: rgba(255,255,255,0.06); color: #cbd5e1; font-size: 0.8em; text-align: left !important; }
+    #score, #record, #rows { color: var(--value); font-weight: bold; vertical-align: middle; }
+    #new-record { min-height: 1.2em; color: #fb7185; font-weight: bold; font-size: 0.75em; text-align: center; text-transform: uppercase; letter-spacing: 1px; animation: piscar 0.8s infinite; }
+    #stats      { position: absolute; bottom: 0.5em; right: 0.5em; }
+    .board       { display: inline-block; vertical-align: top; position: relative; }
+    #canvas      { display: block; background: url(texture.jpg); box-shadow: 0 12px 24px rgba(0,0,0,0.45); border: 3px solid #0f172a; border-radius: 8px; }
     #gameover { 
       display: none; 
       position: absolute; 
       top: 50%; 
       left: 50%; 
       transform: translate(-50%, -50%); 
-      color: #ff3333; 
+      min-width: 75%; 
+      color: #fecaca; 
       font-family: 'Helvetica', sans-serif; 
-      font-size: 2em; 
+      font-size: clamp(1.2em, 5vw, 2em); 
       font-weight: 900; 
       text-transform: uppercase; 
-      text-shadow: 0 0 12px rgba(255, 0, 0, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.9); 
-      background: rgba(0, 0, 0, 0.85); 
-      padding: 15px 25px; 
-      border-radius: 8px; 
-      border: 2px solid #ff3333; 
+      text-shadow: 0 0 12px rgba(248,113,113,0.8); 
+      background: rgba(69,10,10,0.9); 
+      padding: 15px 20px; 
+      border-radius: 12px; 
+      border: 2px solid #f87171; 
       letter-spacing: 2px; 
       text-align: center; 
       z-index: 10; 
+      box-shadow: 0 10px 30px rgba(0,0,0,0.45); 
       animation: pulseOver 1.5s infinite ease-in-out; 
     } 
 
@@ -42,6 +49,7 @@
       50% { transform: translate(-50%, -50%) scale(1.05); } 
       100% { transform: translate(-50%, -50%) scale(1); } 
     }
+    @media screen and (max-width: 430px) { #game-layout { gap: 0.35em; } #tetris { padding: 0.75em; } }
     @media screen and (min-width:   0px) and (min-height:   0px)  { #tetris { font-size: 0.75em; width: 250px; } #menu { width: 100px; height: 200px; } #upcoming { width:  50px; height:  50px; } #canvas { width: 100px; height: 200px; } } /* 10px chunks */
     @media screen and (min-width: 400px) and (min-height: 400px)  { #tetris { font-size: 1.00em; width: 350px; } #menu { width: 150px; height: 300px; } #upcoming { width:  75px; height:  75px; } #canvas { width: 150px; height: 300px; } } /* 15px chunks */
     @media screen and (min-width: 500px) and (min-height: 500px)  { #tetris { font-size: 1.25em; width: 450px; } #menu { width: 200px; height: 400px; } #upcoming { width: 100px; height: 100px; } #canvas { width: 200px; height: 400px; } } /* 20px chunks */
@@ -55,22 +63,24 @@
 <body>
 
   <div id="tetris">
+    <div id="game-layout">
     <div id="menu">
       <p id="start"><a href="javascript:play();">Press Space to Play.</a></p>
+      <p class="next-label">Next piece</p>
       <p><canvas id="upcoming"></canvas></p>
-      <p>score: <span id="score">00000</span></p>
-      <p>record: <span id="record">00000</span></p>
+      <p class="stat-row"><span>Score</span><span id="score">00000</span></p>
+      <p class="stat-row"><span>Record</span><span id="record">00000</span></p>
       <p id="new-record"></p>
-      <p>rows: <span id="rows">0</span></p>
+      <p class="stat-row"><span>Rows</span><span id="rows">0</span></p>
     </div>
     
-    <!-- Container exclusivo para o canvas e o game over -->
-    <div style="display: inline-block; vertical-align: top; position: relative;">
+    <div class="board">
       <canvas id="canvas">
         Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
       </canvas>
       <div id="gameover">GAME OVER</div>
     </div>
+    </div>
   </div>
 
   <script src="stats.js"></script>
diff --git a/script/server b/script/server
index 24e83dd..ecb4bf2 100755
--- a/script/server
+++ b/script/server
@@ -2,19 +2,26 @@
 #
 # Start the application
 
-# Exit if docker-compose is not in PATH
-if ! command -v docker-compose &>/dev/null; then
-  echo "Error! Missing dependency: docker-compose. Please install and try again."
+# Prefer the Compose plugin included with current Docker installations, and
+# fall back to the legacy executable when necessary.
+if command -v docker &>/dev/null && docker compose version &>/dev/null; then
+  compose=(docker compose)
+elif command -v docker-compose &>/dev/null; then
+  compose=(docker-compose)
+else
+  echo "Error! Docker Compose is required. Install Docker Desktop and try again."
   exit 1
 fi
 
-# Exit if the Docker daemon isn't running
-if ! docker info &>/dev/null; then
+# Exit if Docker is not available or the daemon isn't running
+if ! command -v docker &>/dev/null || ! docker info &>/dev/null; then
   echo "The Docker daemon doesn't appear to be running. Please start Docker and try again."
   exit 1
 fi
 
-# Remove _site directory if it exits
-[[ -d _site ]] && rm -r _site
+# Remove _site directory if it exists
+if [[ -d _site ]]; then
+  rm -rf _site
+fi
 
-docker-compose up --build
+"${compose[@]}" up --build
diff --git a/script/test b/script/test
index 408c8dc..6e536c2 100755
--- a/script/test
+++ b/script/test
@@ -1,12 +1,11 @@
 #!/usr/bin/env bash
 #
-# Test the app - if the game loads, everything is working!
+# Start the app for a manual smoke test.
 
-# Create symlink to test game
-ln -s inde.html index.html
+set -euo pipefail
 
-# Remove symlink on script exit
-trap "rm index.html" EXIT
+SCRIPT_DIR="$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)"
+PROJECT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
 
-# Start app
-script/server
+cd "$PROJECT_DIR"
+"$SCRIPT_DIR/server"