Fix the pause: it would not hide, it was off centre, and it was too small

Three faults in 1.0.4, and the first was the serious one.

  1. It never went away. Core hides the overlay with `#pause { display: none }`
     and shows it with `#pause.paused { display: flex }`. 1.0.4 styled the BARE
     #pause with display:flex, which wins on specificity, so unpausing removed
     the class and changed nothing — GAME PAUSED sat over the table for the rest
     of the session. Every rule here is now scoped to `.paused` and `display` is
     not set anywhere.

  2. It was off centre because I repositioned it. Core already centres it: a
     full-width band at top calc(50vh - 100px), column flex, centred both ways,
     pointer-events none. That layout was correct and 1.0.4 fought it with
     left/bottom/transform. It is left alone now; only the height changes, and
     the top moves up by exactly half the extra so the centring holds.

  3. It was small: a 322x116 panel in the corner. It is now core's full-width
     band at 300px with a 170px dial — against core's own 100px — and the
     caption at 24px to match core's.

Guarded: check-behaviour now parses the stylesheet and fails any rule that sets
display on an unscoped #pause. Verified it bites. It strips CSS comments first,
because the first version of the guard reported the comment explaining the
guard — which is exactly what the template guard did last time, so that is twice
now and the lesson is written down properly.

Verified by driving the real toggle: running → display none, box 0x0, no class;
paused → display flex, 341x302, centre X exactly on the viewport centre;
unpaused again → display none, box 0x0.

Version 1.0.5.

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

styles/ringbrp.css

@@ -1688,100 +1688,103 @@
 /* ============================================================
    THE PAUSE — a uniselector, stepping
    ============================================================
-   Foundry's pause is a <figure id="pause"> holding an <img class="fa-spin"> and a
-   <figcaption>. Both are replaced here without touching the markup.
+   Foundry's pause is <figure id="pause"> holding an <img> and a <figcaption>, and core
+   hides it with `#pause { display: none }` / shows it with `#pause.paused { display:
+   flex }`. The first version of this styled the bare #pause with display:flex and so
+   overrode the hide — the panel never went away when the game unpaused. EVERY rule here
+   that could affect visibility or layout is therefore scoped to `.paused`, and `display`
+   is not set anywhere.
+
+   Core also already centres it: a full-width band, 180px tall, at top calc(50vh - 100px),
+   column flex, centred both ways, pointer-events none. That layout is correct and is
+   left alone — only its size and its looks change here. The first version repositioned
+   it with left/bottom and pushed it off centre for the trouble.
 
    A uniselector is the stepping switch inside a telephone exchange: an arm that clicks
-   round one contact at a time, hunting for a free line. It is the right object for this
-   game — the department's whole business is a machine that says where things belong,
-   and OPEN DAY is set inside one. Eleven contacts, because eleven minutes is the
-   interval this setting keeps coming back to.
+   round one contact at a time, hunting for a free line. The department's whole business
+   is a machine that says where things belong, and OPEN DAY is set inside one. Eleven
+   contacts, because eleven minutes is the interval this setting keeps returning to.
 
-   It STEPS rather than sweeps. A continuous spin reads as a loading throbber; a
-   discrete click every 700ms reads as a machine working through a list, which is what
-   the department is doing while the table is out of the room.
-
-   No new text: Foundry's own caption is localised and this only restyles it. A string
-   hardcoded here would be one the lang file could never reach.
+   It STEPS rather than sweeps — a contact every 700ms. A continuous spin reads as a
+   loading throbber; a discrete click reads as a machine working through a list.
    ============================================================ */
 
-#pause {
-  /* Core pins this with BOTH top and bottom, so an auto height stretches it down the
-     whole screen — 180px tall for a 16px caption. Pin it once, here, and size to
-     content. The arm is rotated, so its bounding box is the diagonal of its own square:
-     the panel is laid out from the flex basis, never from getBoundingClientRect. */
-  position: fixed;
-  left: 50%; bottom: 14vh; top: auto; right: auto;
-  transform: translateX(-50%);
-  height: auto; width: max-content;
-  display: flex; align-items: center; gap: 16px;
-  min-width: 320px; padding: 14px 22px 14px 16px;
-  background: color-mix(in srgb, var(--rb-void) 88%, transparent);
-  border: 1px solid var(--rb-line);
-  border-top: 2px solid var(--rb-yellow);
-  border-radius: 0;
-  box-shadow: 0 10px 40px rgba(0,0,0,.55);
+/* Taller than core's 180px, and moved up by exactly half the extra so it stays centred. */
+#pause.paused {
+  height: 300px;
+  top: calc(50vh - 150px);
+  gap: 28px;
+  background: linear-gradient(to right,
+    transparent 0%,
+    color-mix(in srgb, var(--rb-void) 82%, transparent) 38%,
+    color-mix(in srgb, var(--rb-void) 82%, transparent) 62%,
+    transparent 100%);
 }
 
-/* the dial: eleven contacts, standing still */
-#pause::before {
+/* the dial: eleven contacts, standing still, behind the arm */
+#pause.paused::before {
   content: "";
-  position: absolute; left: 16px; top: 50%;
-  width: 52px; height: 52px; margin-top: -26px;
+  position: absolute;
+  top: 24px; left: 50%; margin-left: -85px;
+  width: 170px; height: 170px;
   border-radius: 50%;
-  border: 1px solid var(--rb-hairline);
   background:
     repeating-conic-gradient(from -90deg,
-      var(--rb-line) 0deg 2.4deg, transparent 2.4deg 32.727deg);
-  -webkit-mask: radial-gradient(circle, transparent 0 15px, #000 16px);
-          mask: radial-gradient(circle, transparent 0 15px, #000 16px);
-  opacity: .95;
+      var(--rb-line) 0deg 1.6deg, transparent 1.6deg 32.727deg);
+  -webkit-mask: radial-gradient(circle, transparent 0 52px, #000 54px);
+          mask: radial-gradient(circle, transparent 0 52px, #000 54px);
+  opacity: .9;
 }
 
 /* the arm. The <img> keeps its box and loses its pixels: object-position walks the
-   raster out of the frame, which leaves a paintable element without a second wrapper. */
-#pause img {
-  position: relative; z-index: 1;
-  flex: 0 0 52px; width: 52px; height: 52px; margin: 0;
-  object-fit: none; object-position: -999px -999px;
-  border: none; filter: none;
+   raster out of frame, which leaves a paintable element without adding a wrapper. */
+#pause.paused img {
+  width: 170px; height: 170px;
+  object-fit: none; object-position: -9999px -9999px;
+  border: none; box-shadow: none; filter: none;
   /* the arm, and behind it the contact it has just left — without the trailing sector
-     a 700ms step is easy to miss entirely, and the whole point is that it is stepping */
-  background: conic-gradient(from -92deg,
-    var(--rb-yellow) 0deg 5deg,
-    var(--rb-yellow-dim) 5deg 30deg,
-    transparent 30deg 360deg);
-  -webkit-mask: radial-gradient(circle, #000 0 22px, transparent 23px);
-          mask: radial-gradient(circle, #000 0 22px, transparent 23px);
+     a 700ms step is easy to miss, and the stepping is the whole idea */
+  background: conic-gradient(from -91deg,
+    var(--rb-yellow) 0deg 3.5deg,
+    var(--rb-yellow-dim) 3.5deg 28deg,
+    transparent 28deg 360deg);
+  -webkit-mask: radial-gradient(circle, #000 0 78px, transparent 80px);
+          mask: radial-gradient(circle, #000 0 78px, transparent 80px);
   animation: rb-uniselector 7.7s steps(11, end) infinite;
 }
-/* Foundry adds fa-spin to that img; ours is the only rotation that should run. */
-#pause img.fa-spin { animation: rb-uniselector 7.7s steps(11, end) infinite; }
+/* core adds fa-spin to that img; ours must be the only rotation running */
+#pause.paused img.fa-spin { animation: rb-uniselector 7.7s steps(11, end) infinite; }
 
 /* the hub, and the amber that says the record is being written */
-#pause::after {
+#pause.paused::after {
   content: "";
-  position: absolute; left: 38px; top: 50%;
-  width: 8px; height: 8px; margin-top: -4px;
+  position: absolute;
+  top: 101px; left: 50%; margin-left: -8px;
+  width: 16px; height: 16px;
   border-radius: 50%;
   background: var(--rb-yellow);
   animation: rb-pause-pip 2.6s ease-in-out infinite;
 }
 
-#pause figcaption {
+#pause.paused figcaption {
   font-family: var(--rb-display);
-  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
+  font-size: 24px;
+  letter-spacing: .3em;
+  text-transform: uppercase;
   color: var(--rb-yellow);
-  text-shadow: none; padding: 0; margin: 0;
-  border-left: 1px solid var(--rb-hairline); padding-left: 16px;
+  line-height: 1.2;
+  text-shadow: 0 2px 18px var(--rb-void);
 }
 
 @keyframes rb-uniselector { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes rb-pause-pip   { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
 
-/* A stepping dial in the corner of the eye is exactly the sort of thing a reduced-motion
-   preference is asking us not to do. Keep the object, stop the movement. */
+/* A stepping dial in the corner of the eye is exactly what this preference is about.
+   Keep the object, stop the movement — including core's own pulse on the whole figure. */
 @media (prefers-reduced-motion: reduce) {
-  #pause img, #pause img.fa-spin, #pause::after { animation: none; }
-  #pause img { transform: rotate(-32deg); }
+  #pause.paused,
+  #pause.paused img,
+  #pause.paused img.fa-spin,
+  #pause.paused::after { animation: none; }
+  #pause.paused img { transform: rotate(-32.7deg); }
 }