diff --git a/README.md b/README.md
index 6b339d8..edf2f95 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,10 @@ everything works except installation and the service worker.
stray thumb can't wipe a live match. It's absent on a fresh match, where there
is nothing yet to wipe.
- **Pause** freezes mid-turn and resumes exactly where it stopped, delay
- included. Opening either sheet pauses automatically. The settings sheet leaves
+ included. Both halves read **Paused** underneath the delay bar while it is, in
+ the same ink as the clock above it, and the play button lights up — so a
+ stopped clock can't be mistaken for a running one from either side of the
+ board. Opening either sheet pauses automatically. The settings sheet leaves
it paused — everything in there resets the clocks anyway — while the score
sheet picks the turn back up when you close it, so glancing at the score
doesn't cost you a tap on play. It's absent whenever there's no clock running
diff --git a/fastlane/metadata/android/en-US/images/phoneScreenshots/2.png b/fastlane/metadata/android/en-US/images/phoneScreenshots/2.png
index e6c0b56..9018b51 100644
Binary files a/fastlane/metadata/android/en-US/images/phoneScreenshots/2.png and b/fastlane/metadata/android/en-US/images/phoneScreenshots/2.png differ
diff --git a/public_html/index.html b/public_html/index.html
index ad70ed4..1444aeb 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -182,6 +182,49 @@
text-align:right;
}
+ /* ---------- paused ----------
+ A stopped clock used to look exactly like a running one: the panel keeps its
+ accent, and the delay bar simply freezes mid-drain. The only tell was the
+ play glyph in the bar — small, grey, and upside down for one of the two
+ players. So both halves say it in words.
+
+ Hung off the delay row rather than added to .stack, so the big clock does
+ not move a pixel when the clock stops — the same promise .btn--vacant makes
+ in the bar, and the reason .delay fades rather than hides. It also cannot
+ live *inside* .delay: that is opacity:0 whenever no delay is running, and a
+ child can never be more opaque than its parent, which would lose the word on
+ the waiting half, on a spent delay, and at a delay of 0. */
+ .foot{position:relative}
+ .paused{
+ position:absolute;
+ top:100%;
+ left:50%;
+ /* the bar and its number sit dead centre of the panel (see .dnum), so
+ centring on that row centres on the panel, whatever the count reads */
+ transform:translateX(-50%);
+ /* a clear step below the bar rather than .stack's gap: near enough to belong
+ to the delay row, far enough not to crowd it */
+ margin-top:clamp(21px,5.8vw,41px);
+ white-space:nowrap;
+ line-height:1;
+ /* Wider than the delay bar, narrower than the clock — the band is tighter
+ than it sounds, since "3:00" is only about 2.2x the bar. The crossovers
+ are .track's own (20vw between 360 and 700px wide), so the word holds its
+ proportion to the bar at every size instead of drifting at the ends.
+ Part of the width comes from the tracking rather than the glyph size:
+ spaced letters carry "held" without shouting over the clock. */
+ font-size:clamp(34px,9.4vw,66px);
+ font-weight:700;
+ letter-spacing:.08em;
+ /* no colour of its own: it inherits the panel's, which is what the clock and
+ the delay count are already wearing. Each theme picks its own --accent-ink
+ (white on most of them), so the word follows the palette without a rule
+ per theme, and the paused half never has two different inks on it. */
+ opacity:0;
+ transition:opacity .16s ease;
+ }
+ .paused.on{opacity:1}
+
/* ---------- control bar ---------- */
.bar{
background:var(--bar);
@@ -199,6 +242,9 @@
cursor:pointer;
}
.btn:active{color:var(--icon-hot)}
+ /* the way back from a paused clock, lit like a held Reset: the bar is the only
+ thing either player can act on while the clocks are stopped */
+ #playpause.lit{color:var(--icon-hot)}
.btn[aria-pressed="false"]{color:#5E5954}
.btn svg{width:clamp(23px,6.4vw,32px);height:auto;display:block}
.btn svg[hidden]{display:none}
@@ -432,9 +478,12 @@
3:00
Out of
time
-
-
- 15
+
@@ -498,9 +547,12 @@
3:00
Out of
time
-
-
- 15
+
@@ -709,7 +761,8 @@
scoreLines: [].slice.call(p.querySelectorAll(".line:not(.line--moves)")),
delay: p.querySelector("[data-delay]"),
fill: p.querySelector("[data-fill]"),
- dnum: p.querySelector("[data-dnum]")
+ dnum: p.querySelector("[data-dnum]"),
+ paused: p.querySelector("[data-paused]")
};
});
var btnPlay = document.getElementById("playpause");
@@ -886,6 +939,11 @@
setText(el[i].dnum, Math.ceil(dLeft / 1000));
}
+ // both halves, not just the one whose turn it is: the waiting player's
+ // clock is stopped too, and they are the one who can't read the bar's
+ // play glyph the right way up
+ el[i].paused.classList.toggle("on", st.phase === PAUSE);
+
setAttr(el[i].root, "data-state",
(st.phase === FLAG && i === st.active) ? "flagged"
: (i === st.active && st.phase !== IDLE) ? "active" : "idle");
@@ -901,6 +959,7 @@
// nothing running to pause: before a game's first tap, and after a flag,
// where togglePause is inert anyway — the game is over, Reset is the way out
btnPlay.classList.toggle("btn--vacant", st.phase === IDLE || st.phase === FLAG);
+ btnPlay.classList.toggle("lit", st.phase === PAUSE);
}
function loop(){ render(); requestAnimationFrame(loop); }