Hide the score line and score icon in a one-point match

A single game has no match to keep score of, so showing "Score: 0 - 0, out
of 1" and a sheet to edit it was just clutter. Both are hidden while the
match is one point and come back at three or more.

`hidden` alone doesn't do it for the button: .btn sets display:grid, and an
author rule beats the UA's [hidden] rule whatever the specificity — the same
trap behind the original both-icons-showing bug — so .btn[hidden] has to say
it explicitly. The markup carries hidden by default too, so the common
one-point case can't flash the score before the script runs.

The bar returns to its original spacing when the icon goes: the two .75
gaps either side of it merge back into the 1.5 it had before.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

public_html/README.md

@@ -68,6 +68,10 @@ Set **Match** in the settings to the number of points you're playing to — 1, 3
 5 and up to 29. The time you set is *per point*, so a 5-point match at 2:00 a
 point puts 10:00 on each clock, and the settings sheet shows you that sum.
 
+At **1 point** there's no match to keep score of, so the score line and the
+score-sheet icon both disappear and you get the plain single-game clock. Set
+the match to 3 or more and they come back.
+
 The score sheet is the middle icon in the bar. It reads **You** for whoever is
 holding the phone — the bottom half — and **Them** for the far end, and each
 panel shows its own score first, so both players read their own score on the

public_html/index.html

@@ -80,6 +80,7 @@
     gap:3px;
     order:-1;
   }
+  .score[hidden]{display:none}
   .score,.moves{
     font-size:clamp(13px,3.7vw,20px);
     font-weight:700;
@@ -158,6 +159,7 @@
   .btn[aria-pressed="false"]{color:#5E5954}
   .btn svg{width:clamp(23px,6.4vw,32px);height:auto;display:block}
   .btn svg[hidden]{display:none}
+  .btn[hidden]{display:none}      /* .btn's own display would otherwise win */
   .btn:focus-visible{outline:2px solid var(--icon-hot);outline-offset:-6px;border-radius:8px}
 
   /* reset armed for a second tap — the ring unwinds over the same 2s as the timeout */
@@ -311,7 +313,7 @@
   <section class="panel panel--top" data-side="0" data-state="idle">
     <div class="inner">
       <div class="head">
-        <div class="score">Score: <span data-score>0 - 0</span>, out of <span data-target>1</span></div>
+        <div class="score" hidden>Score: <span data-score>0 - 0</span>, out of <span data-target>1</span></div>
         <div class="moves">Moves: <span data-moves>0</span></div>
       </div>
       <div class="stack">
@@ -340,7 +342,7 @@
       </svg>
     </button>
     <span class="gap"></span>
-    <button class="btn" id="score" aria-label="Score">
+    <button class="btn" id="score" aria-label="Score" hidden>
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round">
         <rect x="4" y="3" width="16" height="18" rx="2.6"/>
         <path d="M12 7.5v10"/>
@@ -371,7 +373,7 @@
   <section class="panel panel--bottom" data-side="1" data-state="idle">
     <div class="inner">
       <div class="head">
-        <div class="score">Score: <span data-score>0 - 0</span>, out of <span data-target>1</span></div>
+        <div class="score" hidden>Score: <span data-score>0 - 0</span>, out of <span data-target>1</span></div>
         <div class="moves">Moves: <span data-moves>0</span></div>
       </div>
       <div class="stack">
@@ -571,6 +573,7 @@
       moves: p.querySelector("[data-moves]"),
       score: p.querySelector("[data-score]"),
       target: p.querySelector("[data-target]"),
+      scoreLine: p.querySelector(".score"),
       delay: p.querySelector("[data-delay]"),
       fill: p.querySelector("[data-fill]"),
       dnum: p.querySelector("[data-dnum]")
@@ -579,6 +582,7 @@
   var btnPlay = document.getElementById("playpause");
   var btnSound = document.getElementById("sound");
   var btnReset = document.getElementById("reset");
+  var btnScore = document.getElementById("score");
   var sheet = document.getElementById("sheet");
   var scoreSheet = document.getElementById("scoresheet");
   var scrim = document.getElementById("scrim");
@@ -890,6 +894,17 @@
     swWrap.appendChild(b);
   });
 
+  // a single game has no match score, so the score line and the sheet that
+  // edits it are both out of the way until the match is longer than a point
+  function paintMatchChrome(){
+    var many = cfg.points > 1;
+    function show(node){
+      if(many) node.removeAttribute("hidden"); else node.setAttribute("hidden", "");
+    }
+    show(btnScore);
+    el.forEach(function(e){ show(e.scoreLine); });
+  }
+
   function clock(ms){                       // m:ss, for copy rather than the big readout
     var s = Math.round(ms / 1000);
     return Math.floor(s / 60) + ":" + ("0" + (s % 60)).slice(-2);
@@ -905,6 +920,7 @@
       ? "Reserve time per point."
       : "Reserve time per point. " + cfg.points + " × " + clock(cfg.base) +
         " = " + clock(matchTime()) + " each.";
+    paintMatchChrome();
     document.getElementById("t-sound").setAttribute("aria-checked", cfg.sound ? "true" : "false");
     btnSound.setAttribute("aria-pressed", cfg.sound ? "true" : "false");
     showIcon(btnSound, "on", cfg.sound);

public_html/sw.js

@@ -1,5 +1,5 @@
 /* Cache-first: once installed the clock never touches the network again. */
-const CACHE = "bgclock-v4";
+const CACHE = "bgclock-v5";
 const FILES = [
   "./",
   "./index.html",