fix: mobile on-screen buttons, reduce spacing, add pause button

index.html

@@ -91,6 +91,7 @@ <h3>Perks</h3>
 <div id="effects-bar"></div>
 
 <div id="controls">
+  <button class="ctrl-btn" id="btn-pause" aria-label="Pause / resume" title="Pause / resume">&#x23F8;</button>
   <button class="ctrl-btn" id="btn-up">&#9650;</button>
   <button class="ctrl-btn" id="btn-left">&#9664;</button>
   <button class="ctrl-btn" id="btn-down">&#9660;</button>

snake.css

@@ -145,6 +145,7 @@ canvas { display: block; border-radius: 4px; }
 #btn-left  { grid-column: 1; grid-row: 2; }
 #btn-down  { grid-column: 2; grid-row: 2; }
 #btn-right { grid-column: 3; grid-row: 2; }
+#btn-pause { grid-column: 3; grid-row: 1; font-size: 1rem; }
 
 #hint { margin-top: 14px; font-size: 0.8rem; color: #555; }
 
@@ -798,4 +799,8 @@ canvas { display: block; border-radius: 4px; }
 
   /* Reset canvas-wrapper order */
   #canvas-wrapper { order: unset; }
+
+  /* Bring controls closer to the canvas */
+  #effects-bar { margin-top: 4px; }
+  #controls    { margin-top: 6px; }
 }

snake.js

@@ -83,6 +83,7 @@ const DOM = {
   btnDown: getElement('btn-down'),
   btnLeft: getElement('btn-left'),
   btnRight: getElement('btn-right'),
+  btnPause: getElement('btn-pause'),
   nameEntryOverlay: getElement('name-entry-overlay'),
   neRank: getElement('ne-rank'),
   nc0: getElement('nc0'),
@@ -834,6 +835,7 @@ function startGame() {
   init();
   draw();
   DOM.overlay.style.display = 'none';
+  DOM.btnPause.textContent = '\u23F8';
   running = true;
   lastTime = performance.now();
   accumulated = 0;
@@ -847,6 +849,12 @@ function enqueueDir(directionName) {
   if (dirQueue.length < 3) dirQueue.push(DIR[directionName]);
 }
 
+function togglePause() {
+  if (!running) return;
+  paused = !paused;
+  DOM.btnPause.textContent = paused ? '\u23F5' : '\u23F8';
+}
+
 function tryDir(directionName) {
   if (!running) return;
   enqueueDir(directionName);
@@ -925,7 +933,7 @@ function onKeyDown(event) {
     return;
   }
   if (event.key === 'p' || event.key === 'P') {
-    paused = !paused;
+    togglePause();
     return;
   }
 
@@ -936,7 +944,12 @@ function onKeyDown(event) {
   enqueueDir(directionName);
 }
 
+function isCtrlBtn(target) {
+  return target instanceof Element && !!target.closest('.ctrl-btn');
+}
+
 function onTouchStart(event) {
+  if (isCtrlBtn(event.target)) return;
   touchStartX = event.touches[0].clientX;
   touchStartY = event.touches[0].clientY;
   const levelupOpen = DOM.levelupOverlay.style.display !== 'none';
@@ -946,6 +959,7 @@ function onTouchStart(event) {
 function onTouchEnd(event) {
   if (DOM.infoDrawer.classList.contains('open')) return;
   if (DOM.levelupOverlay.style.display !== 'none') return;
+  if (isCtrlBtn(event.target)) return;
   const dx = event.changedTouches[0].clientX - touchStartX;
   const dy = event.changedTouches[0].clientY - touchStartY;
   if (Math.abs(dx) < 10 && Math.abs(dy) < 10) return;
@@ -978,10 +992,16 @@ function wireEvents() {
     }
   });
 
-  DOM.btnUp.addEventListener('click', () => tryDir('UP'));
-  DOM.btnDown.addEventListener('click', () => tryDir('DOWN'));
-  DOM.btnLeft.addEventListener('click', () => tryDir('LEFT'));
-  DOM.btnRight.addEventListener('click', () => tryDir('RIGHT'));
+  [
+    [DOM.btnUp,    () => tryDir('UP')],
+    [DOM.btnDown,  () => tryDir('DOWN')],
+    [DOM.btnLeft,  () => tryDir('LEFT')],
+    [DOM.btnRight, () => tryDir('RIGHT')],
+    [DOM.btnPause, () => togglePause()],
+  ].forEach(([btn, handler]) => {
+    btn.addEventListener('click', handler);
+    btn.addEventListener('touchstart', (e) => { e.preventDefault(); handler(); }, { passive: false });
+  });
   DOM.startBtn.addEventListener('click', startGame);
 
   DOM.devPerkBtn.addEventListener('click', () => {