From 86094d5a2e4267984533ed0ba3412427b8be26b3 Mon Sep 17 00:00:00 2001
From: Chisel <chisel@redmeeple.uk>
Date: Tue, 3 Feb 2026 10:37:41 +0000
Subject: [PATCH 1/7] feat: refine the visual design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added DM Sans from Google Fonts
- Applied it to body text and the timer display

- Introduced CSS custom properties (:root) for colours and spacing
- Primary accent gold: #d4af37 (replacing #ffd700)
- Slightly muted accent green for buttons and highlights

- Light border (rgba(255,255,255,0.08))
- Stronger backdrop blur (12px)
- Softer box-shadow

- Gold colour variable
- Subtle inner glow on timer digits
- sans-serif fallback added for the font stack

- Background: rgba(0,0,0,0.4) with blur
- Top border and shadow to separate it from content

- Thin bottom border on the wrapper
- Border and light inset shadow on character-type tiles

- Focus states for keyboard/D-pad: :focus-visible with green ring
- Size: min 48×48px for Settings, Info, Fullscreen (TV-friendly)
- Micro-interactions: Shorter transitions (~150–200ms) and scale(0.98) on active

- Softer transitions and focus rings
- Borders for clearer hierarchy

- Matching borders and stronger box-shadows
- Extra blur on settings and What's New dialogs

- Consistent border-radius via variables (--radius-sm, --radius-md, --radius-lg)
- Shared transition variables for timing
- Unified accent colour usage across components
- CSP update: style-src and font-src now allow Google Fonts (fonts.googleapis.com and fonts.gstatic.com).
---
 index.html |   8 +-
 styles.css | 402 +++++++++++++++++++++++++++++++++--------------------
 2 files changed, 262 insertions(+), 148 deletions(-)

diff --git a/index.html b/index.html
index de37838..65d1392 100644
--- a/index.html
+++ b/index.html
@@ -71,12 +71,18 @@
     />
 
     <title>Tower Timer</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="styles.css" />
 
     <!-- Content Security Policy -->
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self' https://www.googletagmanager.com https://www.youtube.com https://s.ytimg.com 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https://api.qrserver.com https://img.youtube.com https://i.ytimg.com https://storage.ko-fi.com data:; media-src 'self'; frame-src https://www.youtube.com; connect-src 'self' https://www.google-analytics.com https://*.google-analytics.com https://www.youtube.com https://www.googleapis.com https://play.google.com;"
+      content="default-src 'self'; script-src 'self' https://www.googletagmanager.com https://www.youtube.com https://s.ytimg.com 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https://api.qrserver.com https://img.youtube.com https://i.ytimg.com https://storage.ko-fi.com data:; media-src 'self'; frame-src https://www.youtube.com; connect-src 'self' https://www.google-analytics.com https://*.google-analytics.com https://www.youtube.com https://www.googleapis.com https://play.google.com;"
     />
 
     <!-- Google tag (gtag.js) -->
diff --git a/styles.css b/styles.css
index 1858e8b..40ed3a7 100644
--- a/styles.css
+++ b/styles.css
@@ -1,12 +1,51 @@
+:root {
+  /* Colour palette */
+  --colour-bg: #1a1a1a;
+  --colour-surface: rgba(33, 33, 33, 0.75);
+  --colour-surface-elevated: rgba(42, 42, 42, 0.95);
+  --colour-border: rgba(255, 255, 255, 0.08);
+  --colour-border-strong: rgba(255, 255, 255, 0.15);
+  --colour-text: #ffffff;
+  --colour-text-muted: rgba(255, 255, 255, 0.7);
+  --colour-text-subtle: rgba(255, 255, 255, 0.6);
+  --colour-accent: #45a049;
+  --colour-accent-hover: #3d8b40;
+  --colour-accent-muted: rgba(76, 175, 80, 0.25);
+  --colour-gold: #d4af37;
+  --colour-gold-bright: #e6c547;
+  --colour-good: rgba(25, 118, 210, 0.7);
+  --colour-evil: rgba(211, 47, 47, 0.7);
+  --colour-button-secondary: #2c3e2c;
+  --colour-button-secondary-hover: #3c513c;
+  --colour-blitz: #f44336;
+  --colour-blitz-hover: #e53935;
+  /* Spacing and radius */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --transition-fast: 150ms ease;
+  --transition-normal: 200ms ease;
+  /* Focus ring for accessibility / TV remote */
+  --focus-ring: 3px solid var(--colour-accent);
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
+/* Fire TV / keyboard: clear focus indication */
+button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: none;
+}
+
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -14,8 +53,8 @@ body {
   align-items: center;
   gap: 0.25rem;
   padding-top: 0.25rem;
-  background-color: #1a1a1a;
-  color: #ffffff;
+  background-color: var(--colour-bg);
+  color: var(--colour-text);
   position: relative;
 }
 
@@ -252,12 +291,14 @@ body[data-pace='blitz'] .portrait-warning-dialog button:hover {
 }
 
 .container {
-  background-color: rgba(33, 33, 33, 0.7);
+  background-color: var(--colour-surface);
   padding: 0.75rem;
-  border-radius: 12px;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--colour-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
   text-align: center;
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   width: 95%;
   max-width: 1000px;
   display: flex;
@@ -282,12 +323,12 @@ h1 {
 
 .timer-display .time {
   font-size: min(15vw, 11rem);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Condensed',
-    'Segoe UI', Roboto;
-  font-weight: bold;
-  color: #ffd700;
+  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont,
+    'Segoe UI Condensed', 'Segoe UI', Roboto, sans-serif;
+  font-weight: 700;
+  color: var(--colour-gold);
   font-variant-numeric: tabular-nums;
-  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 24px rgba(212, 175, 55, 0.15);
   line-height: 0.9;
   display: flex;
   flex-direction: row;
@@ -297,7 +338,7 @@ h1 {
 }
 
 .timer-display.wake-up-countdown .time {
-  color: #4caf50;
+  color: var(--colour-accent);
   animation: pulse-text 2s infinite;
 }
 
@@ -314,12 +355,12 @@ h1 {
 
 .nominations-countdown {
   font-size: min(4vw, 1.5rem);
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--colour-text);
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   margin-top: 0.5rem;
   padding: 0.25rem 0.75rem;
-  background: rgba(76, 175, 80, 0.25);
-  border-radius: 6px;
+  background: var(--colour-accent-muted);
+  border-radius: var(--radius-sm);
   line-height: 1.2;
 }
 
@@ -370,31 +411,38 @@ h1 {
 }
 
 .preset-btn {
-  background-color: #2c3e2c;
+  background-color: var(--colour-button-secondary);
   color: white;
   padding: 0.5rem 1rem;
   font-size: 1.2rem;
   min-width: 3rem;
+  transition: background-color var(--transition-fast),
+    transform var(--transition-fast), box-shadow var(--transition-fast);
 }
 
 .preset-btn:hover {
-  background-color: #3c513c;
+  background-color: var(--colour-button-secondary-hover);
+}
+
+.preset-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4);
 }
 
 .preset-btn.active {
-  background-color: #4caf50;
+  background-color: var(--colour-accent);
 }
 
 .minute-btn {
-  background-color: #2c3e2c;
+  background-color: var(--colour-button-secondary);
 }
 
 .minute-btn:hover {
-  background-color: #3c513c;
+  background-color: var(--colour-button-secondary-hover);
 }
 
 .minute-btn.active {
-  background-color: #4caf50;
+  background-color: var(--colour-accent);
 }
 
 #startBtn {
@@ -403,26 +451,31 @@ h1 {
   right: 0.5rem;
   transform: translateY(-50%);
   z-index: 2;
-  background-color: #4caf50;
+  background-color: var(--colour-accent);
   color: white;
   padding: 1.5rem 1rem;
-  border: none;
-  border-radius: 6px;
+  border: 1px solid rgba(76, 175, 80, 0.2);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 1.2rem;
   font-weight: 600;
-  transition: all 0.2s;
+  transition: transform var(--transition-fast),
+    box-shadow var(--transition-fast), background-color var(--transition-fast);
   min-width: 140px;
   min-height: 80px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(8px);
-  border: 1px solid rgba(76, 175, 80, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
 }
 
+#startBtn:focus-visible {
+  outline: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(76, 175, 80, 0.5);
+}
+
 #startBtn .button-content {
   display: flex;
   flex-direction: column;
@@ -454,13 +507,13 @@ h1 {
 }
 
 #startBtn:hover {
-  background-color: #45a049;
+  background-color: var(--colour-accent-hover);
   transform: translateY(calc(-50% + 1px));
 }
 
 #startBtn:active {
-  background-color: #3d8b40;
-  transform: translateY(calc(-50% + 2px));
+  background-color: var(--colour-accent-hover);
+  transform: translateY(calc(-50% + 2px)) scale(0.98);
 }
 
 #startBtn:disabled {
@@ -475,12 +528,17 @@ h1 {
   min-width: 120px;
 }
 
+#resetBtn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.5);
+}
+
 #resetBtn:hover {
   background-color: #6b3410;
 }
 
 #accelerateBtn {
-  background-color: #2c3e2c;
+  background-color: var(--colour-button-secondary);
   color: white;
   min-width: 160px;
   display: inline-flex;
@@ -489,10 +547,16 @@ h1 {
   gap: 0.5rem;
   position: relative;
   overflow: hidden;
-  transition: all 0.2s;
+  transition: transform var(--transition-fast),
+    box-shadow var(--transition-fast), background-color var(--transition-fast);
   --progress-width: 0%;
 }
 
+#accelerateBtn:focus-visible {
+  outline: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(76, 175, 80, 0.4);
+}
+
 #accelerateBtn::before {
   content: '';
   position: absolute;
@@ -529,15 +593,15 @@ h1 {
 }
 
 #fullscreenBtn {
-  background-color: #2c3e2c;
+  background-color: var(--colour-button-secondary);
   color: white;
   padding: 0.75rem;
   min-width: auto;
   position: static;
   opacity: 0.7;
-  transition: opacity 0.2s;
-  height: 42px;
-  width: 42px;
+  transition: opacity var(--transition-fast);
+  height: 48px;
+  width: 48px;
 }
 
 #fullscreenBtn:hover {
@@ -587,34 +651,44 @@ h1 {
 #settingsBtn,
 #infoBtn,
 #fullscreenBtn {
-  background-color: #2c3e2c;
+  background-color: var(--colour-button-secondary);
   border: none;
   padding: 0.75rem;
   cursor: pointer;
   color: #ffffff;
-  border-radius: 4px;
-  transition: all 0.2s;
+  border-radius: var(--radius-md);
+  transition: transform var(--transition-fast),
+    box-shadow var(--transition-fast), background-color var(--transition-fast);
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 42px;
-  width: 42px;
+  min-height: 48px;
+  min-width: 48px;
+  height: 48px;
+  width: 48px;
   position: static;
 }
 
+#settingsBtn:focus-visible,
+#infoBtn:focus-visible,
+#fullscreenBtn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.5);
+}
+
 #settingsBtn:hover,
 #infoBtn:hover,
 #fullscreenBtn:hover {
-  background-color: #3c513c;
+  background-color: var(--colour-button-secondary-hover);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }
 
 #settingsBtn:active,
 #infoBtn:active,
 #fullscreenBtn:active {
-  background-color: #2c3e2c;
-  transform: translateY(0);
+  background-color: var(--colour-button-secondary);
+  transform: translateY(0) scale(0.98);
 }
 
 .settings-icon,
@@ -659,17 +733,17 @@ h1 {
 
 /* Settings Dialog */
 .settings-dialog {
-  border: none;
-  border-radius: 16px;
+  border: 1px solid var(--colour-border);
+  border-radius: var(--radius-xl);
   padding: 0;
-  background-color: rgba(33, 33, 33, 0.95);
-  color: #ffffff;
+  background-color: var(--colour-surface-elevated);
+  color: var(--colour-text);
   max-width: 95vw;
   width: 600px;
   max-height: 90vh;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   position: fixed;
   top: 50%;
   left: 50%;
@@ -701,7 +775,7 @@ h1 {
   font-size: 1rem;
   margin: 0;
   margin-bottom: 0.25rem;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--colour-text-muted);
   text-align: center;
   font-weight: normal;
 }
@@ -731,7 +805,7 @@ h1 {
 .dialog-content h3 {
   font-size: 1rem;
   margin: 0 0 0.75rem 0;
-  color: #4caf50;
+  color: var(--colour-accent);
   font-weight: 500;
 }
 
@@ -741,8 +815,8 @@ h1 {
   display: flex;
   flex-direction: column;
   background: rgba(255, 255, 255, 0.05);
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--colour-border-strong);
   height: fit-content;
   position: relative;
 }
@@ -750,7 +824,7 @@ h1 {
 .setting-group h3 {
   font-size: 0.95rem;
   margin: 0 0 0.35rem 0;
-  color: #4caf50;
+  color: var(--colour-accent);
   font-weight: 500;
 }
 
@@ -798,14 +872,14 @@ h1 {
 
 .info-value {
   font-size: 1.1rem;
-  font-weight: bold;
-  color: #4caf50;
+  font-weight: 700;
+  color: var(--colour-accent);
   font-variant-numeric: tabular-nums;
 }
 
 .info-value-note {
   font-size: 0.8rem;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--colour-text-subtle);
   font-weight: normal;
 }
 
@@ -889,10 +963,10 @@ body[data-pace='blitz'] .info-value {
   -webkit-appearance: none;
   width: 12px;
   height: 12px;
-  background: #4caf50;
+  background: var(--colour-accent);
   border-radius: 50%;
   cursor: pointer;
-  transition: transform 0.2s;
+  transition: transform var(--transition-fast);
 }
 
 .volume-slider::-webkit-slider-thumb:hover {
@@ -902,7 +976,7 @@ body[data-pace='blitz'] .info-value {
 .volume-value {
   min-width: 48px;
   font-size: 0.9rem;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--colour-text-muted);
 }
 
 .dialog-buttons {
@@ -922,7 +996,7 @@ body[data-pace='blitz'] .info-value {
 }
 
 .dialog-buttons button.primary-btn {
-  background: #4caf50;
+  background: var(--colour-accent);
   color: white;
 }
 
@@ -931,13 +1005,18 @@ body[data-pace='blitz'] .info-value {
   color: white;
 }
 
+.dialog-buttons button {
+  transition: transform var(--transition-fast),
+    box-shadow var(--transition-fast), background-color var(--transition-fast);
+}
+
 .dialog-buttons button:hover {
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }
 
 .dialog-buttons button.primary-btn:hover {
-  background: #45a049;
+  background: var(--colour-accent-hover);
 }
 
 .dialog-buttons button:not(.primary-btn):hover {
@@ -969,6 +1048,8 @@ body[data-pace='blitz'] .info-value {
   padding: 0;
   width: 95%;
   max-width: 1000px;
+  border-bottom: 1px solid var(--colour-border);
+  padding-bottom: 0.5rem;
 }
 
 .character-counts {
@@ -984,8 +1065,8 @@ body[data-pace='blitz'] .info-value {
   font-size: 0.8rem;
   padding: 0.15rem 0.5rem;
   margin-top: 0.25rem;
-  background: rgba(76, 175, 80, 0.3);
-  border-radius: 4px;
+  background: var(--colour-accent-muted);
+  border-radius: var(--radius-md);
   display: inline-block;
   line-height: 1;
 }
@@ -997,7 +1078,7 @@ body[data-pace='blitz'] .info-value {
   transform: translateY(-50%);
   z-index: 2;
   font-size: 1.25rem;
-  font-weight: bold;
+  font-weight: 700;
   color: #ffffff;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   margin: 0;
@@ -1008,11 +1089,11 @@ body[data-pace='blitz'] .info-value {
   justify-content: center;
   white-space: nowrap;
   background: #f5f1e6;
-  border-radius: 6px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(139, 69, 19, 0.2);
-  transition: background-color 0.3s ease;
+  transition: background-color var(--transition-normal);
   width: 120px;
 }
 
@@ -1106,59 +1187,61 @@ body[data-pace='blitz'] .info-value {
 }
 
 .clocktower-presets button.current-day {
-  box-shadow: 0 0 0 2px #ffd700;
+  box-shadow: 0 0 0 2px var(--colour-gold);
   animation: pulse 2s infinite;
 }
 
 @keyframes pulse {
   0% {
-    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
+    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5);
   }
   50% {
-    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
+    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
   }
   100% {
-    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
+    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5);
   }
 }
 
 .character-type {
   flex: 1;
   min-width: 100px;
-  background-color: #2a2a2a;
-  border-radius: 8px;
+  background-color: var(--colour-surface-elevated);
+  border-radius: var(--radius-md);
   padding: 0.5rem;
   text-align: center;
-  transition: background-color 0.3s;
+  transition: background-color var(--transition-normal);
   display: flex;
   flex-direction: column;
   align-items: center;
+  border: 1px solid var(--colour-border);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 .character-type .label {
   font-size: 1rem;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--colour-text-muted);
   margin-bottom: 0.25rem;
   font-weight: 500;
 }
 
 .character-type .amount {
   font-size: 2.5rem;
-  font-weight: bold;
-  color: #fff;
+  font-weight: 700;
+  color: var(--colour-text);
   line-height: 1;
 }
 
 /* Good team (blue background) */
 .character-type:nth-child(1),
 .character-type:nth-child(2) {
-  background: rgba(25, 118, 210, 0.7);
+  background: var(--colour-good);
 }
 
 /* Evil team (red background) */
 .character-type:nth-child(3),
 .character-type:nth-child(4) {
-  background: rgba(211, 47, 47, 0.7);
+  background: var(--colour-evil);
 }
 
 .character-type.traveller {
@@ -1195,23 +1278,29 @@ body[data-pace='blitz'] .info-value {
 .clocktower-presets button {
   padding: 0.35rem 0.75rem;
   font-size: 1.1rem;
-  background-color: #2c3e2c;
-  border: none;
-  border-radius: 5px;
+  background-color: var(--colour-button-secondary);
+  border: 1px solid var(--colour-border);
+  border-radius: var(--radius-sm);
   color: white;
   cursor: pointer;
-  transition: background-color 0.3s;
+  transition: background-color var(--transition-fast),
+    transform var(--transition-fast), box-shadow var(--transition-fast);
   width: 100%;
 }
 
+.clocktower-presets button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4);
+}
+
 .clocktower-presets button:hover {
-  background-color: #3c513c;
+  background-color: var(--colour-button-secondary-hover);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .clocktower-presets button.active {
-  background-color: #4caf50;
+  background-color: var(--colour-accent);
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
 }
 
@@ -1257,8 +1346,8 @@ body:has(.clocktower-settings.visible) #regularTimerControls {
 /* Info Dialog */
 .info-dialog {
   padding: 0;
-  border: none;
-  border-radius: 12px;
+  border: 1px solid var(--colour-border);
+  border-radius: var(--radius-lg);
   background-color: #1a2b1a;
   color: white;
   max-width: 600px;
@@ -1340,13 +1429,13 @@ body:has(.clocktower-settings.visible) #regularTimerControls {
 }
 
 .version-display span:nth-child(2) {
-  color: #4caf50;
+  color: var(--colour-accent);
   font-weight: bold;
   font-size: 1rem;
 }
 
 .changelog-link {
-  color: #4caf50;
+  color: var(--colour-accent);
   text-decoration: none;
   font-size: 0.9rem;
   margin-left: 0.5rem;
@@ -1400,7 +1489,7 @@ body:has(.clocktower-settings.visible) #regularTimerControls {
 }
 
 .disclaimer a {
-  color: #4caf50;
+  color: var(--colour-accent);
   text-decoration: none;
 }
 
@@ -1419,7 +1508,7 @@ body:has(.clocktower-settings.visible) #regularTimerControls {
 }
 
 .main-site-link a {
-  color: #4caf50;
+  color: var(--colour-accent);
   text-decoration: none;
 }
 
@@ -1462,25 +1551,25 @@ body:has(.clocktower-settings.visible) #regularTimerControls {
   padding: 0.5rem;
   font-size: 1rem;
   border: 1px solid #4a4a4a;
-  border-radius: 4px;
-  background-color: #2c3e2c;
+  border-radius: var(--radius-md);
+  background-color: var(--colour-button-secondary);
   color: white;
   cursor: pointer;
 }
 
 .game-pace-select:hover {
-  background-color: #3c513c;
+  background-color: var(--colour-button-secondary-hover);
 }
 
 .game-pace-select:focus {
   outline: none;
-  border-color: #4caf50;
+  border-color: var(--colour-accent);
   box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 }
 
 .game-pace-display {
   font-size: 1rem;
-  color: #ffd700;
+  color: var(--colour-gold);
   text-align: center;
   margin-top: 0.25rem;
 }
@@ -1661,10 +1750,10 @@ button:disabled {
 }
 
 .number-input-group button {
-  background-color: #2c3e2c;
+  background-color: var(--colour-button-secondary);
   color: white;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   width: 32px;
   height: 32px;
   font-size: 1.25rem;
@@ -1672,11 +1761,17 @@ button:disabled {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.2s;
+  transition: background-color var(--transition-fast),
+    transform var(--transition-fast);
 }
 
 .number-input-group button:hover {
-  background-color: #3c513c;
+  background-color: var(--colour-button-secondary-hover);
+}
+
+.number-input-group button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4);
 }
 
 .number-input-group input[type='number'] {
@@ -1694,10 +1789,10 @@ button:disabled {
 .setting-group input[type='checkbox'] {
   width: 24px;
   height: 24px;
-  accent-color: #4caf50;
+  accent-color: var(--colour-accent);
   cursor: pointer;
   position: relative;
-  border-radius: 4px;
+  border-radius: var(--radius-md);
 }
 
 /* Add spacing between setting groups in the same column */
@@ -1749,9 +1844,9 @@ button:disabled {
 
 .playlist-link {
   font-size: 0.8rem;
-  color: #4caf50;
+  color: var(--colour-accent);
   text-decoration: none;
-  transition: color 0.2s ease, opacity 0.2s ease;
+  transition: color var(--transition-fast), opacity var(--transition-fast);
   display: flex;
   align-items: center;
   gap: 0.35rem;
@@ -1764,7 +1859,7 @@ button:disabled {
 
 .playlist-link::before {
   content: '→';
-  color: #4caf50;
+  color: var(--colour-accent);
 }
 
 /* YouTube playlist input styling */
@@ -1793,17 +1888,17 @@ button:disabled {
 
 /* What's New Dialog */
 .whats-new-dialog {
-  border: none;
-  border-radius: 16px;
+  border: 1px solid var(--colour-border);
+  border-radius: var(--radius-xl);
   padding: 0;
-  background-color: rgba(33, 33, 33, 0.95);
-  color: #ffffff;
+  background-color: var(--colour-surface-elevated);
+  color: var(--colour-text);
   max-width: 95vw;
   width: 500px;
   max-height: 80vh;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   position: fixed;
   top: 50%;
   left: 50%;
@@ -1861,11 +1956,11 @@ button:disabled {
 .version-number {
   font-size: 1.2rem;
   font-weight: bold;
-  color: #4caf50;
+  color: var(--colour-accent);
 }
 
 .version-date {
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--colour-text-muted);
   font-size: 0.9rem;
 }
 
@@ -1876,7 +1971,7 @@ button:disabled {
 }
 
 .changes-section h3 {
-  color: #4caf50;
+  color: var(--colour-accent);
   margin-bottom: 0.25rem;
   font-size: 1rem;
 }
@@ -1896,7 +1991,7 @@ button:disabled {
 
 .changes-section li::before {
   content: '•';
-  color: #4caf50;
+  color: var(--colour-accent);
   position: absolute;
   left: 0;
 }
@@ -2112,24 +2207,25 @@ button:disabled {
   width: 32px;
   height: 32px;
   padding: 0;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 6px;
-  background: #2c3e2c;
+  border: 1px solid var(--colour-border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--colour-button-secondary);
   color: #fff;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: transform var(--transition-fast),
+    box-shadow var(--transition-fast), background-color var(--transition-fast);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .preview-sound:hover {
-  background: #3c513c;
+  background: var(--colour-button-secondary-hover);
   transform: translateY(-1px);
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
   border-color: rgba(255, 255, 255, 0.3);
 }
 
 .preview-sound:active {
-  transform: scale(0.95) translateY(0);
+  transform: scale(0.98) translateY(0);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
@@ -2140,7 +2236,7 @@ button:disabled {
 }
 
 .preview-sound.playing {
-  background: #4caf50;
+  background: var(--colour-accent);
   border-color: rgba(255, 255, 255, 0.4);
   color: white;
   box-shadow: 0 0 12px rgba(76, 175, 80, 0.4);
@@ -2330,7 +2426,7 @@ button:disabled {
 
 .portrait-warning-dialog h2 {
   margin: 0;
-  color: #4caf50;
+  color: var(--colour-accent);
   font-size: 1.5rem;
 }
 
@@ -2347,18 +2443,18 @@ button:disabled {
 }
 
 .portrait-warning-dialog button {
-  background-color: #4caf50;
+  background-color: var(--colour-accent);
   color: white;
   border: none;
   padding: 0.75rem 1.5rem;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 1rem;
-  transition: background-color 0.2s;
+  transition: background-color var(--transition-fast);
 }
 
 .portrait-warning-dialog button:hover {
-  background-color: #45a049;
+  background-color: var(--colour-accent-hover);
 }
 
 /* Optimize for shorter viewports */
@@ -2444,11 +2540,12 @@ button:disabled {
 .tab-button {
   background: none;
   border: none;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--colour-text-muted);
   padding: 0.5rem 1rem;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: background-color var(--transition-fast),
+    color var(--transition-fast);
   font-size: 0.95rem;
 }
 
@@ -2457,8 +2554,13 @@ button:disabled {
   color: white;
 }
 
+.tab-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4);
+}
+
 .tab-button.active {
-  background: #4caf50;
+  background: var(--colour-accent);
   color: white;
 }
 
@@ -2538,7 +2640,11 @@ button:disabled {
   left: 0;
   right: 0;
   z-index: 999;
-  background: none;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-top: 1px solid var(--colour-border);
+  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
 }
 
 .left-buttons {
@@ -2564,11 +2670,13 @@ button:disabled {
   padding: 8px 16px;
   font-size: 1.1rem;
   border: none;
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   color: white;
   cursor: pointer;
-  transition: all 0.2s;
-  height: 42px;
+  transition: transform var(--transition-fast),
+    box-shadow var(--transition-fast), background-color var(--transition-fast);
+  min-height: 48px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2601,9 +2709,9 @@ button:disabled {
 }
 
 #accelerateBtn:hover {
-  background-color: #3c513c;
+  background-color: var(--colour-button-secondary-hover);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }
 
 /* Keyboard Shortcuts Styles */

From 8b126c87f8360944b0797832f8b4d61bc7de68f8 Mon Sep 17 00:00:00 2001
From: Chisel <chisel@redmeeple.uk>
Date: Tue, 3 Feb 2026 10:41:48 +0000
Subject: [PATCH 2/7] chore(changelog): update changelog for version 1.0.25

---
 changelog.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/changelog.js b/changelog.js
index b3c6bf5..d8f733f 100644
--- a/changelog.js
+++ b/changelog.js
@@ -1,7 +1,19 @@
 // Version tracking
-export const APP_VERSION = '1.0.24';
+export const APP_VERSION = '1.0.25';
 
 export const CHANGELOG = {
+  '1.0.25': {
+    date: '2026-02-03',
+    changes: {
+      improvements: [
+        'Visual design refresh: DM Sans typography, refined colour palette, and polished UI',
+        'Improved focus states for keyboard and TV remote navigation',
+        'Refined timer display with subtle glow; softer shadows and transitions throughout',
+        'Bottom bar and character counts styling; consistent border-radius and spacing',
+        'Resolve code linting warnings',
+      ],
+    },
+  },
   '1.0.24': {
     date: '2026-02-02',
     changes: {

From 2de30889ac347957f0146d341c5c2ad0dc1e4ec3 Mon Sep 17 00:00:00 2001
From: Chisel <chisel@redmeeple.uk>
Date: Tue, 3 Feb 2026 12:04:23 +0000
Subject: [PATCH 3/7] fix: resolve sonarqube findings

---
 index.html |   2 +-
 script.js  | 165 ++++++++++++++++++++++++++---------------------------
 2 files changed, 83 insertions(+), 84 deletions(-)

diff --git a/index.html b/index.html
index 65d1392..405a3d6 100644
--- a/index.html
+++ b/index.html
@@ -91,7 +91,7 @@
       src="https://www.googletagmanager.com/gtag/js?id=G-DHYFSVZZHW"
     ></script>
     <script>
-      window.dataLayer = window.dataLayer || [];
+      globalThis.dataLayer = globalThis.dataLayer || [];
       function gtag() {
         dataLayer.push(arguments);
       }
diff --git a/script.js b/script.js
index 939dc54..1cca659 100644
--- a/script.js
+++ b/script.js
@@ -24,26 +24,26 @@ let minutesDisplay,
 const connectivityUtils = {
   isOnline: () => navigator.onLine,
   addStatusListener: (onlineCallback, offlineCallback) => {
-    window.addEventListener('online', onlineCallback);
-    window.addEventListener('offline', offlineCallback);
+    globalThis.addEventListener('online', onlineCallback);
+    globalThis.addEventListener('offline', offlineCallback);
   },
   removeStatusListener: (onlineCallback, offlineCallback) => {
-    window.removeEventListener('online', onlineCallback);
-    window.removeEventListener('offline', offlineCallback);
+    globalThis.removeEventListener('online', onlineCallback);
+    globalThis.removeEventListener('offline', offlineCallback);
   },
 };
 
 const orientationUtils = {
-  isPortrait: () => window.matchMedia('(orientation: portrait)').matches,
+  isPortrait: () => globalThis.matchMedia('(orientation: portrait)').matches,
   addOrientationListener: (callback) => {
-    window
+    globalThis
       .matchMedia('(orientation: portrait)')
       .addEventListener('change', (e) => {
         callback(e.matches);
       });
   },
   removeOrientationListener: (callback) => {
-    window
+    globalThis
       .matchMedia('(orientation: portrait)')
       .removeEventListener('change', callback);
   },
@@ -51,17 +51,17 @@ const orientationUtils = {
 
 const youtubeUtils = {
   play: () => {
-    if (playMusic && youtubePlayer && youtubePlayer.playVideo) {
+    if (playMusic && youtubePlayer?.playVideo) {
       youtubePlayer.playVideo();
     }
   },
   pause: () => {
-    if (playMusic && youtubePlayer && youtubePlayer.pauseVideo) {
+    if (playMusic && youtubePlayer?.pauseVideo) {
       youtubePlayer.pauseVideo();
     }
   },
   stop: () => {
-    if (playMusic && youtubePlayer && youtubePlayer.stopVideo) {
+    if (playMusic && youtubePlayer?.stopVideo) {
       youtubePlayer.stopVideo();
     }
   },
@@ -1001,7 +1001,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   document
     .getElementById('autoOpenNominationsDelay')
     .addEventListener('change', (e) => {
-      autoOpenNominationsDelay = parseInt(e.target.value, 10);
+      autoOpenNominationsDelay = Number.Number.parseInt(e.target.value, 10);
       saveSettings();
     });
 
@@ -1056,18 +1056,18 @@ function loadSettings() {
     travellerCount = settings.travellerCount || 0;
     currentDay = settings.currentDay || 1;
     currentPace = settings.currentPace || 'normal';
-    playMusic = settings.playMusic !== undefined ? settings.playMusic : false;
+    playMusic = settings.playMusic === undefined ? false : settings.playMusic;
     playMusicAtNight =
-      settings.playMusicAtNight !== undefined
-        ? settings.playMusicAtNight
-        : false;
+      settings.playMusicAtNight === undefined
+        ? false
+        : settings.playMusicAtNight;
     playSoundEffects =
-      settings.playSoundEffects !== undefined
-        ? settings.playSoundEffects
-        : true;
+      settings.playSoundEffects === undefined
+        ? true
+        : settings.playSoundEffects;
     soundEffectsVolume = settings.soundEffectsVolume || 75;
     keepDisplayOn =
-      settings.keepDisplayOn !== undefined ? settings.keepDisplayOn : true;
+      settings.keepDisplayOn === undefined ? true : settings.keepDisplayOn;
     youtubeVolume = settings.youtubeVolume || 15;
     backgroundTheme = settings.backgroundTheme || 'medieval-cartoon';
     youtubePlaylistUrl =
@@ -1078,9 +1078,9 @@ function loadSettings() {
       settings.nominationsOpenSoundFile || 'nominations-open-laura.mp3';
     autoOpenNominations = settings.autoOpenNominations || false;
     autoOpenNominationsDelay =
-      settings.autoOpenNominationsDelay !== undefined
-        ? settings.autoOpenNominationsDelay
-        : 60;
+      settings.autoOpenNominationsDelay === undefined
+        ? 60
+        : settings.autoOpenNominationsDelay;
     acceptedPortraitWarning = settings.acceptedPortraitWarning || false;
     keyboardShortcuts = settings.keyboardShortcuts || {
       ...DEFAULT_KEYBOARD_SHORTCUTS,
@@ -1216,8 +1216,8 @@ function loadSettings() {
     .classList.toggle('visible', travellerCount > 0);
   document.getElementById('travellerAmount').textContent = travellerCount;
   updateYoutubeLink();
-  document.body.setAttribute('data-theme', backgroundTheme);
-  document.body.setAttribute('data-pace', currentPace);
+  document.body.dataset.theme = backgroundTheme;
+  document.body.dataset.pace = currentPace;
 
   // Initialize YouTube player if music is enabled
   if (playMusic) {
@@ -1249,7 +1249,7 @@ function loadSettings() {
   }
 
   // Ensure change history dialog stays closed after everything loads
-  if (changeHistoryDialog && changeHistoryDialog.open) {
+  if (changeHistoryDialog?.open) {
     changeHistoryDialog.close();
     changeHistoryDialog.removeAttribute('open');
   }
@@ -1265,10 +1265,10 @@ function loadSettings() {
   }
 }
 
-// Additional safeguard on window load to ensure change history dialog is closed
-window.addEventListener('load', () => {
+// Additional safeguard on globalThis load to ensure change history dialog is closed
+globalThis.addEventListener('load', () => {
   const changeHistoryDialog = document.getElementById('changeHistoryDialog');
-  if (changeHistoryDialog && changeHistoryDialog.open) {
+  if (changeHistoryDialog?.open) {
     changeHistoryDialog.close();
     changeHistoryDialog.removeAttribute('open');
   }
@@ -1277,11 +1277,12 @@ window.addEventListener('load', () => {
 // Save settings to localStorage
 function saveSettings() {
   const dayInfo = document.querySelector('.day-display');
-  const dayState = dayInfo.classList.contains('dusk')
-    ? 'dusk'
-    : dayInfo.classList.contains('dawn')
-    ? 'dawn'
-    : '';
+  let dayState = '';
+  if (dayInfo?.classList?.contains('dusk')) {
+    dayState = 'dusk';
+  } else if (dayInfo?.classList?.contains('dawn')) {
+    dayState = 'dawn';
+  }
 
   const settings = {
     playerCount,
@@ -1386,7 +1387,7 @@ function updateClocktowerPresets() {
 // Update player count
 function updatePlayerCount() {
   playerCount = Math.min(
-    Math.max(parseInt(playerCountInput.value) || 5, 5),
+    Math.max(Number.parseInt(playerCountInput.value) || 5, 5),
     15
   );
   playerCountInput.value = playerCount;
@@ -1399,7 +1400,7 @@ function updatePlayerCount() {
 // Update traveller count
 function updateTravellerCount() {
   travellerCount = Math.min(
-    Math.max(parseInt(travellerCountInput.value) || 0, 0),
+    Math.max(Number.parseInt(travellerCountInput.value) || 0, 0),
     5
   );
   travellerCountInput.value = travellerCount;
@@ -1454,14 +1455,14 @@ function switchSettingsTab(tabName) {
 
 // Fullscreen functionality
 function toggleFullscreen() {
-  if (!document.fullscreenElement) {
-    document.documentElement.requestFullscreen().catch((err) => {
-      console.log('Error attempting to enable fullscreen:', err);
-    });
-  } else {
+  if (document.fullscreenElement) {
     if (document.exitFullscreen) {
       document.exitFullscreen();
     }
+  } else {
+    document.documentElement.requestFullscreen().catch((err) => {
+      console.log('Error attempting to enable fullscreen:', err);
+    });
   }
 }
 
@@ -1580,7 +1581,8 @@ function startNominationsCountdown() {
 function createBeep() {
   if (!playSoundEffects) return;
 
-  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  const audioContext = new (globalThis.AudioContext ||
+    globalThis.webkitAudioContext)();
   const oscillator = audioContext.createOscillator();
   const gainNode = audioContext.createGain();
 
@@ -1668,7 +1670,7 @@ function accelerateTime() {
       updateStartButtonText(BUTTON_LABELS.RESUME);
       currentInterval = normalInterval;
       // Stop YouTube player when accelerated time ends
-      if (playMusic && youtubePlayer && youtubePlayer.pauseVideo) {
+      if (playMusic && youtubePlayer?.pauseVideo) {
         youtubePlayer.pauseVideo();
       }
       if (currentDay !== null) {
@@ -1778,7 +1780,7 @@ function resetTimer() {
 
 // Handle minutes preset selection
 function handleMinuteClick(e) {
-  const minutes = parseInt(e.target.dataset.minutes);
+  const minutes = Number.parseInt(e.target.dataset.minutes);
   selectedMinutes = minutes;
 
   // Update active state
@@ -1794,7 +1796,7 @@ function handleMinuteClick(e) {
 
 // Handle seconds preset selection
 function handleSecondClick(e) {
-  const seconds = parseInt(e.target.dataset.seconds);
+  const seconds = Number.parseInt(e.target.dataset.seconds);
   selectedSeconds = seconds;
 
   // Update active state
@@ -1815,9 +1817,9 @@ document.addEventListener('fullscreenchange', updateFullscreenButton);
 document.querySelectorAll('.number-input-group button').forEach((button) => {
   button.addEventListener('click', (e) => {
     const input = document.getElementById(e.target.dataset.input);
-    const min = parseInt(input.min);
-    const max = parseInt(input.max);
-    const currentValue = parseInt(input.value) || min;
+    const min = Number.parseInt(input.min);
+    const max = Number.parseInt(input.max);
+    const currentValue = Number.parseInt(input.value) || min;
 
     if (button.classList.contains('increment')) {
       input.value = Math.min(currentValue + 1, max);
@@ -1902,8 +1904,8 @@ function playWakeUpSound() {
         dayPreset.classList.add('active');
 
         // Update selected time
-        selectedMinutes = parseInt(dayPreset.dataset.minutes);
-        selectedSeconds = parseInt(dayPreset.dataset.seconds);
+        selectedMinutes = Number.parseInt(dayPreset.dataset.minutes);
+        selectedSeconds = Number.parseInt(dayPreset.dataset.seconds);
 
         // Set and display the new time
         timeLeft = selectedMinutes * 60 + selectedSeconds;
@@ -1928,7 +1930,7 @@ function startCountdown() {
 
   // Start music if enabled and not in dusk state
   const dayInfo = document.querySelector('.day-display');
-  const isDusk = dayInfo && dayInfo.classList.contains('dusk');
+  const isDusk = dayInfo?.classList?.contains('dusk');
   if (playMusic && !isDusk) {
     if (player && player.getPlayerState() !== YT.PlayerState.PLAYING) {
       player.playVideo();
@@ -1950,7 +1952,7 @@ function startCountdown() {
       clearInterval(timerId);
       playEndSound();
       isRunning = false;
-      if (playMusic && player && player.pauseVideo) {
+      if (playMusic && player?.pauseVideo) {
         player.pauseVideo();
         // Update play/pause button state
         const playPauseBtn = document.querySelector('.youtube-control');
@@ -2049,7 +2051,7 @@ function updateDayDisplay(state = '') {
   document.querySelectorAll('.clocktower-btn').forEach((btn) => {
     btn.classList.toggle(
       'current-day',
-      parseInt(btn.dataset.day) === currentDay
+      Number.parseInt(btn.dataset.day) === currentDay
     );
   });
 
@@ -2088,7 +2090,7 @@ function closeInfo() {
 // Update game pace
 function updateGamePace(newPace) {
   currentPace = newPace;
-  document.body.setAttribute('data-pace', newPace);
+  document.body.dataset.pace = newPace;
   updateClocktowerPresets();
   updateDayDisplay();
   updateEstimatedGameLength();
@@ -2153,7 +2155,7 @@ let player = null;
 // Load YouTube IFrame API
 function loadYoutubeApi() {
   if (
-    !window.YT &&
+    !globalThis.YT &&
     !document.querySelector('script[src*="youtube.com/iframe_api"]')
   ) {
     const tag = document.createElement('script');
@@ -2164,7 +2166,7 @@ function loadYoutubeApi() {
 }
 
 function initYoutubePlayer() {
-  if (!window.YT || !youtubeApiReady) {
+  if (!globalThis.YT || !youtubeApiReady) {
     loadYoutubeApi();
   } else {
     createYoutubePlayer();
@@ -2172,7 +2174,7 @@ function initYoutubePlayer() {
 }
 
 // Called by YouTube API when ready
-window.onYouTubeIframeAPIReady = function () {
+globalThis.onYouTubeIframeAPIReady = function () {
   youtubeApiReady = true;
   if (playMusic) {
     createYoutubePlayer();
@@ -2326,7 +2328,7 @@ function onPlayerReady(event) {
   // If timer is already running, start playing
   if (isRunning && timeLeft > 0) {
     const dayInfo = document.querySelector('.day-display');
-    const isDusk = dayInfo && dayInfo.classList.contains('dusk');
+    const isDusk = dayInfo?.classList?.contains('dusk');
     if (!isDusk) {
       event.target.playVideo();
     }
@@ -2470,11 +2472,11 @@ function updateMusicPlayback() {
 
 // Update YouTube volume
 function updateYoutubeVolume() {
-  youtubeVolume = parseInt(document.getElementById('musicVolume').value);
+  youtubeVolume = Number.parseInt(document.getElementById('musicVolume').value);
   document.querySelector(
     'label:has(#musicVolume) .volume-value'
   ).textContent = `${youtubeVolume}%`;
-  if (player && player.setVolume) {
+  if (player?.setVolume) {
     player.setVolume(youtubeVolume);
   }
   // Update volume info display
@@ -2522,12 +2524,10 @@ function updateSoundEffects() {
         ? !playSoundEffects || !autoOpenNominations
         : !playSoundEffects;
       element.classList.toggle('inactive', inactive);
-      element.setAttribute(
-        'data-inactive-message',
+      element.dataset.inactiveMessage =
         isNominationsOpen && !autoOpenNominations
           ? 'Enable "Automatically open nominations" in Game settings first'
-          : 'Enable "Play Sound Effects" first'
-      );
+          : 'Enable "Play Sound Effects" first';
       if (type === 'label') {
         const input = element.querySelector('select, input');
         if (input) {
@@ -2543,7 +2543,7 @@ function updateSoundEffects() {
 
 // Update sound effects volume
 function updateSoundEffectsVolume() {
-  soundEffectsVolume = parseInt(
+  soundEffectsVolume = Number.parseInt(
     document.getElementById('soundEffectsVolume').value
   );
   document.querySelector(
@@ -2560,7 +2560,7 @@ function updateSoundEffectsVolume() {
 // Update background theme
 function updateBackgroundTheme() {
   backgroundTheme = document.getElementById('backgroundTheme').value;
-  document.body.setAttribute('data-theme', backgroundTheme);
+  document.body.dataset.theme = backgroundTheme;
   saveSettings();
 }
 
@@ -2568,7 +2568,7 @@ function updateBackgroundTheme() {
 function extractVideoAndPlaylistIds(url) {
   const videoRegex =
     /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i;
-  const playlistRegex = /[?&]list=([^#\&\?]+)/;
+  const playlistRegex = /[?&]list=([^#&?]+)/;
 
   const videoMatch = url.match(videoRegex);
   const playlistMatch = url.match(playlistRegex);
@@ -2594,8 +2594,15 @@ function updatePlaylistBadge(title) {
   const playlistLabel = playlistName.querySelector('.playlist-label');
   const trackTitle = playlistName.querySelector('.track-title');
 
-  // Update playlist label if needed
-  if (!title) {
+  // Update playlist label if needed, or update track title
+  if (title) {
+    if (title.length > 40) {
+      trackTitle.textContent = title.substring(0, 37) + '...';
+    } else {
+      trackTitle.textContent = title;
+    }
+    trackTitle.title = title; // Add full title as tooltip
+  } else {
     if (youtubePlaylistUrl === DEFAULT_YOUTUBE_PLAYLIST) {
       playlistLabel.textContent = 'Bardcore';
     } else if (youtubePlaylistUrl === ATMOSPHERIC_PLAYLIST) {
@@ -2604,14 +2611,6 @@ function updatePlaylistBadge(title) {
       playlistLabel.textContent = 'Custom';
     }
     trackTitle.textContent = 'Not Playing';
-  } else {
-    // Update track title
-    if (title.length > 40) {
-      trackTitle.textContent = title.substring(0, 37) + '...';
-    } else {
-      trackTitle.textContent = title;
-    }
-    trackTitle.title = title; // Add full title as tooltip
   }
 }
 
@@ -2663,14 +2662,14 @@ function showWhatsNew(lastVersion) {
 
       return `
         ${
-          version !== latestVersion
-            ? `
+          version === latestVersion
+            ? ''
+            : `
           <div class="version-info">
             <span class="version-number">Version ${version}</span>
             <span class="version-date">${data.date}</span>
           </div>
         `
-            : ''
         }
         ${
           features.length > 0
@@ -2699,9 +2698,9 @@ function showWhatsNew(lastVersion) {
             : ''
         }
         ${
-          version !== versions[versions.length - 1][0]
-            ? '<hr class="version-separator">'
-            : ''
+          version === versions[versions.length - 1][0]
+            ? ''
+            : '<hr class="version-separator">'
         }
       `;
     })
@@ -2722,7 +2721,7 @@ function showChangeHistory() {
   }
 
   const versions = Object.entries(CHANGELOG).sort(
-    ([a], [b]) => parseFloat(b) - parseFloat(a)
+    ([a], [b]) => Number.parseFloat(b) - Number.parseFloat(a)
   );
 
   // Don't open dialog if there's no changelog data

From f5c0124c3f39999bfdc0d7d4454132b341332deb Mon Sep 17 00:00:00 2001
From: Chisel <chisel@redmeeple.uk>
Date: Tue, 3 Feb 2026 12:11:01 +0000
Subject: [PATCH 4/7] fix: dropdown population of legacy sound filenames

---
 script.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index 1cca659..1945f7b 100644
--- a/script.js
+++ b/script.js
@@ -1072,10 +1072,23 @@ function loadSettings() {
     backgroundTheme = settings.backgroundTheme || 'medieval-cartoon';
     youtubePlaylistUrl =
       settings.youtubePlaylistUrl || DEFAULT_YOUTUBE_PLAYLIST;
-    endOfDaySound = settings.endOfDaySound || 'cathedral-bell-v2.mp3';
-    wakeUpSoundFile = settings.wakeUpSoundFile || 'chisel-bell-01-loud-v2.mp3';
+    // Normalise legacy sound filenames (without -v2) so dropdowns show the correct option
+    const normaliseSoundFile = (value, defaultVal) => {
+      const v = value || defaultVal;
+      return v.endsWith('-v2.mp3') ? v : v.slice(0, -4) + '-v2.mp3';
+    };
+    endOfDaySound = normaliseSoundFile(
+      settings.endOfDaySound,
+      'cathedral-bell-v2.mp3'
+    );
+    wakeUpSoundFile = normaliseSoundFile(
+      settings.wakeUpSoundFile,
+      'chisel-bell-01-loud-v2.mp3'
+    );
     nominationsOpenSoundFile =
       settings.nominationsOpenSoundFile || 'nominations-open-laura.mp3';
+    settings.endOfDaySound = endOfDaySound;
+    settings.wakeUpSoundFile = wakeUpSoundFile;
     autoOpenNominations = settings.autoOpenNominations || false;
     autoOpenNominationsDelay =
       settings.autoOpenNominationsDelay === undefined

From 6a4c9cfa22e44ec177ea46754de69b44ac19b59c Mon Sep 17 00:00:00 2001
From: Chisel <chisel@redmeeple.uk>
Date: Tue, 3 Feb 2026 12:16:24 +0000
Subject: [PATCH 5/7] fix: resolve more sonarqube issues

---
 script.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/script.js b/script.js
index 1945f7b..d8b05e7 100644
--- a/script.js
+++ b/script.js
@@ -2254,7 +2254,7 @@ function createYoutubePlayerContainer() {
   const rightButtons = bottomContainer.querySelector('.right-buttons');
 
   // Insert the container before the right buttons
-  bottomContainer.insertBefore(container, rightButtons);
+  rightButtons.before(container);
 
   return container;
 }
@@ -2580,7 +2580,7 @@ function updateBackgroundTheme() {
 // Extract video and playlist IDs from YouTube URL
 function extractVideoAndPlaylistIds(url) {
   const videoRegex =
-    /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i;
+    /(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?/\s]{11})/i;
   const playlistRegex = /[?&]list=([^#&?]+)/;
 
   const videoMatch = url.match(videoRegex);
@@ -2711,9 +2711,7 @@ function showWhatsNew(lastVersion) {
             : ''
         }
         ${
-          version === versions[versions.length - 1][0]
-            ? ''
-            : '<hr class="version-separator">'
+          version === versions.at(-1)[0] ? '' : '<hr class="version-separator">'
         }
       `;
     })

From 5496cebdec8b3215af81359e01660e836232b975 Mon Sep 17 00:00:00 2001
From: Chisel <chisel@redmeeple.uk>
Date: Tue, 3 Feb 2026 12:21:47 +0000
Subject: [PATCH 6/7] fix: resolve more sonarqube issues

---
 script.js | 201 +++++++++++++++++++++++++-----------------------------
 1 file changed, 92 insertions(+), 109 deletions(-)

diff --git a/script.js b/script.js
index d8b05e7..8a94bbf 100644
--- a/script.js
+++ b/script.js
@@ -1047,87 +1047,76 @@ function roundToNearestQuarter(n) {
   return Math.round(n * 4) / 4;
 }
 
-// Load settings from localStorage
-function loadSettings() {
-  const savedSettings = localStorage.getItem('quickTimerSettings');
-  if (savedSettings) {
-    const settings = JSON.parse(savedSettings);
-    playerCount = settings.playerCount || 10;
-    travellerCount = settings.travellerCount || 0;
-    currentDay = settings.currentDay || 1;
-    currentPace = settings.currentPace || 'normal';
-    playMusic = settings.playMusic === undefined ? false : settings.playMusic;
-    playMusicAtNight =
-      settings.playMusicAtNight === undefined
-        ? false
-        : settings.playMusicAtNight;
-    playSoundEffects =
-      settings.playSoundEffects === undefined
-        ? true
-        : settings.playSoundEffects;
-    soundEffectsVolume = settings.soundEffectsVolume || 75;
-    keepDisplayOn =
-      settings.keepDisplayOn === undefined ? true : settings.keepDisplayOn;
-    youtubeVolume = settings.youtubeVolume || 15;
-    backgroundTheme = settings.backgroundTheme || 'medieval-cartoon';
-    youtubePlaylistUrl =
-      settings.youtubePlaylistUrl || DEFAULT_YOUTUBE_PLAYLIST;
-    // Normalise legacy sound filenames (without -v2) so dropdowns show the correct option
-    const normaliseSoundFile = (value, defaultVal) => {
-      const v = value || defaultVal;
-      return v.endsWith('-v2.mp3') ? v : v.slice(0, -4) + '-v2.mp3';
-    };
-    endOfDaySound = normaliseSoundFile(
-      settings.endOfDaySound,
-      'cathedral-bell-v2.mp3'
-    );
-    wakeUpSoundFile = normaliseSoundFile(
-      settings.wakeUpSoundFile,
-      'chisel-bell-01-loud-v2.mp3'
-    );
-    nominationsOpenSoundFile =
-      settings.nominationsOpenSoundFile || 'nominations-open-laura.mp3';
-    settings.endOfDaySound = endOfDaySound;
-    settings.wakeUpSoundFile = wakeUpSoundFile;
-    autoOpenNominations = settings.autoOpenNominations || false;
-    autoOpenNominationsDelay =
-      settings.autoOpenNominationsDelay === undefined
-        ? 60
-        : settings.autoOpenNominationsDelay;
-    acceptedPortraitWarning = settings.acceptedPortraitWarning || false;
-    keyboardShortcuts = settings.keyboardShortcuts || {
-      ...DEFAULT_KEYBOARD_SHORTCUTS,
-    };
+// Apply parsed settings object to globals and persist; runs migration and version check
+function applyParsedSettings(settings) {
+  const normaliseSoundFile = (value, defaultVal) => {
+    const v = value || defaultVal;
+    return v.endsWith('-v2.mp3') ? v : v.slice(0, -4) + '-v2.mp3';
+  };
 
-    // Migration: Fix any old lowercase 'wakeup' entries
-    if (keyboardShortcuts.wakeup && !keyboardShortcuts.wakeUp) {
-      keyboardShortcuts.wakeUp = keyboardShortcuts.wakeup;
-      delete keyboardShortcuts.wakeup;
-      saveSettings(); // Save the corrected shortcuts
-    }
+  playerCount = settings.playerCount || 10;
+  travellerCount = settings.travellerCount || 0;
+  currentDay = settings.currentDay || 1;
+  currentPace = settings.currentPace || 'normal';
+  playMusic = settings.playMusic === undefined ? false : settings.playMusic;
+  playMusicAtNight =
+    settings.playMusicAtNight === undefined ? false : settings.playMusicAtNight;
+  playSoundEffects =
+    settings.playSoundEffects === undefined ? true : settings.playSoundEffects;
+  soundEffectsVolume = settings.soundEffectsVolume || 75;
+  keepDisplayOn =
+    settings.keepDisplayOn === undefined ? true : settings.keepDisplayOn;
+  youtubeVolume = settings.youtubeVolume || 15;
+  backgroundTheme = settings.backgroundTheme || 'medieval-cartoon';
+  youtubePlaylistUrl = settings.youtubePlaylistUrl || DEFAULT_YOUTUBE_PLAYLIST;
+  endOfDaySound = normaliseSoundFile(
+    settings.endOfDaySound,
+    'cathedral-bell-v2.mp3'
+  );
+  wakeUpSoundFile = normaliseSoundFile(
+    settings.wakeUpSoundFile,
+    'chisel-bell-01-loud-v2.mp3'
+  );
+  nominationsOpenSoundFile =
+    settings.nominationsOpenSoundFile || 'nominations-open-laura.mp3';
+  settings.endOfDaySound = endOfDaySound;
+  settings.wakeUpSoundFile = wakeUpSoundFile;
+  autoOpenNominations = settings.autoOpenNominations || false;
+  autoOpenNominationsDelay =
+    settings.autoOpenNominationsDelay === undefined
+      ? 60
+      : settings.autoOpenNominationsDelay;
+  acceptedPortraitWarning = settings.acceptedPortraitWarning || false;
+  keyboardShortcuts = settings.keyboardShortcuts || {
+    ...DEFAULT_KEYBOARD_SHORTCUTS,
+  };
 
-    // Check for new version
-    const lastSeenVersion = settings.lastSeenVersion;
-    if (lastSeenVersion && lastSeenVersion !== APP_VERSION) {
-      showWhatsNew(lastSeenVersion);
-    }
-    settings.lastSeenVersion = APP_VERSION;
-    localStorage.setItem('quickTimerSettings', JSON.stringify(settings));
+  if (keyboardShortcuts.wakeup && !keyboardShortcuts.wakeUp) {
+    keyboardShortcuts.wakeUp = keyboardShortcuts.wakeup;
+    delete keyboardShortcuts.wakeup;
+    saveSettings();
+  }
 
-    // Restore day state if it exists
-    const dayState = settings.dayState || '';
-    updateDayDisplay(dayState);
-  } else {
-    isFirstLoad = true;
-    currentDay = 1;
-    endSound = new Audio(`sounds/end-of-day/${endOfDaySound}`);
-    wakeUpSound = new Audio(`sounds/wake-up/${wakeUpSoundFile}`);
-    nominationsOpenSound = new Audio(
-      `sounds/nominations-open/${nominationsOpenSoundFile}`
-    );
+  const lastSeenVersion = settings.lastSeenVersion;
+  if (lastSeenVersion && lastSeenVersion !== APP_VERSION) {
+    showWhatsNew(lastSeenVersion);
   }
+  settings.lastSeenVersion = APP_VERSION;
+  localStorage.setItem('quickTimerSettings', JSON.stringify(settings));
+  updateDayDisplay(settings.dayState || '');
+}
 
-  // Always update UI to reflect settings
+function initSoundsFirstLoad() {
+  isFirstLoad = true;
+  currentDay = 1;
+  endSound = new Audio(`sounds/end-of-day/${endOfDaySound}`);
+  wakeUpSound = new Audio(`sounds/wake-up/${wakeUpSoundFile}`);
+  nominationsOpenSound = new Audio(
+    `sounds/nominations-open/${nominationsOpenSoundFile}`
+  );
+}
+
+function applySettingsToForm() {
   playerCountInput.value = playerCount;
   travellerCountInput.value = travellerCount;
   document.getElementById('gamePace').value = currentPace;
@@ -1175,7 +1164,6 @@ function loadSettings() {
     `sounds/nominations-open/${nominationsOpenSoundFile}`
   );
 
-  // Enable/disable volume controls based on their respective settings
   const musicVolumeInput = document.getElementById('musicVolume');
   musicVolumeInput.disabled = !playMusic;
   musicVolumeInput.closest('label').classList.toggle('inactive', !playMusic);
@@ -1186,7 +1174,6 @@ function loadSettings() {
     .closest('label')
     .classList.toggle('inactive', !playSoundEffects);
 
-  // Update states for music-related elements
   const musicDependentElements = [
     {
       element: document.getElementById('playMusicAtNight').closest('label'),
@@ -1210,7 +1197,6 @@ function loadSettings() {
     },
   ];
 
-  // Apply inactive state to all dependent elements
   musicDependentElements.forEach(({ element, type }) => {
     if (element) {
       element.classList.toggle('inactive', !playMusic);
@@ -1222,8 +1208,19 @@ function loadSettings() {
       }
     }
   });
+}
+
+// Load settings from localStorage
+function loadSettings() {
+  const savedSettings = localStorage.getItem('quickTimerSettings');
+  if (savedSettings) {
+    applyParsedSettings(JSON.parse(savedSettings));
+  } else {
+    initSoundsFirstLoad();
+  }
+
+  applySettingsToForm();
 
-  // Update display elements
   document
     .getElementById('travellerDisplay')
     .classList.toggle('visible', travellerCount > 0);
@@ -1232,7 +1229,6 @@ function loadSettings() {
   document.body.dataset.theme = backgroundTheme;
   document.body.dataset.pace = currentPace;
 
-  // Initialize YouTube player if music is enabled
   if (playMusic) {
     initYoutubePlayer();
   } else {
@@ -1245,29 +1241,22 @@ function loadSettings() {
     youtubePlayer = null;
   }
 
-  // Update character amounts and presets
   updateCharacterAmounts(playerCount);
   updateClocktowerPresets();
   updateEstimatedGameLength();
-
-  // Update sound effects dependent elements
   updateSoundEffects();
 
-  // Show settings dialog on first load
   if (isFirstLoad) {
-    // Add a small delay to ensure other dialogs have had a chance to initialize
     setTimeout(() => {
       settingsDialog.showModal();
     }, 100);
   }
 
-  // Ensure change history dialog stays closed after everything loads
   if (changeHistoryDialog?.open) {
     changeHistoryDialog.close();
     changeHistoryDialog.removeAttribute('open');
   }
 
-  // Update playlist title
   const { playlistId } = extractVideoAndPlaylistIds(youtubePlaylistUrl);
   if (playlistId) {
     fetchPlaylistTitle(playlistId).then((title) => {
@@ -2811,21 +2800,28 @@ function closeChangeHistory() {
   }
 }
 
+function tryHandleResetShortcut(e, currentKey) {
+  if (
+    !keyboardShortcuts.reset ||
+    currentKey !== keyboardShortcuts.reset ||
+    settingsDialog.open ||
+    infoDialog.open
+  ) {
+    return;
+  }
+  if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+  resetTimer();
+}
+
 // Add keyboard navigation support
 function setupKeyboardNavigation() {
-  // Remove any existing keyboard navigation listeners
   document.removeEventListener('keydown', handleKeyboardNavigation);
 
   function handleKeyboardNavigation(e) {
-    // Skip if we're in a shortcut input field
-    if (e.target.classList.contains('shortcut-input')) {
-      return;
-    }
+    if (e.target.classList.contains('shortcut-input')) return;
 
-    // Get the current key
     const currentKey = e.key;
 
-    // Check each shortcut
     if (
       keyboardShortcuts.settings &&
       currentKey === keyboardShortcuts.settings &&
@@ -2846,18 +2842,7 @@ function setupKeyboardNavigation() {
         startTimer();
       }
     }
-    if (
-      keyboardShortcuts.reset &&
-      currentKey === keyboardShortcuts.reset &&
-      !settingsDialog.open &&
-      !infoDialog.open &&
-      !e.ctrlKey && // Don't trigger if Ctrl is pressed (Ctrl+R for refresh)
-      !e.metaKey && // Don't trigger if Cmd is pressed (Cmd+R for refresh on Mac)
-      !e.altKey && // Don't trigger if Alt is pressed
-      !e.shiftKey // Don't trigger if Shift is pressed
-    ) {
-      resetTimer();
-    }
+    tryHandleResetShortcut(e, currentKey);
     if (
       keyboardShortcuts.fullscreen &&
       currentKey === keyboardShortcuts.fullscreen
@@ -2865,8 +2850,6 @@ function setupKeyboardNavigation() {
       e.preventDefault();
       toggleFullscreen();
     }
-
-    // Escape key for fullscreen exit
     if (e.key === 'Escape' && document.fullscreenElement) {
       document.exitFullscreen();
     }

From c55808e59bc196398e61f121a264be3ae63cff26 Mon Sep 17 00:00:00 2001
From: Chisel <chisel@redmeeple.uk>
Date: Tue, 3 Feb 2026 13:40:30 +0000
Subject: [PATCH 7/7] fix: resolve more sonarqube issues

---
 script.js | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/script.js b/script.js
index 8a94bbf..0ec9a71 100644
--- a/script.js
+++ b/script.js
@@ -2568,15 +2568,26 @@ function updateBackgroundTheme() {
 
 // Extract video and playlist IDs from YouTube URL
 function extractVideoAndPlaylistIds(url) {
-  const videoRegex =
-    /(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?/\s]{11})/i;
-  const playlistRegex = /[?&]list=([^#&?]+)/;
+  const videoIdPattern = String.raw`[^"&?/\s]{11}`;
+  const youtuBeRegex = new RegExp(
+    String.raw`youtu\.be/(${videoIdPattern})`,
+    'i'
+  );
+  const youtubePathRegex = new RegExp(
+    String.raw`(?:v|e(?:mbed)?)/(${videoIdPattern})`,
+    'i'
+  );
+  const youtubeQueryRegex = new RegExp(String.raw`[?&]v=(${videoIdPattern})`);
+
+  const videoId =
+    url.match(youtuBeRegex)?.[1] ??
+    url.match(youtubePathRegex)?.[1] ??
+    url.match(youtubeQueryRegex)?.[1];
 
-  const videoMatch = url.match(videoRegex);
-  const playlistMatch = url.match(playlistRegex);
+  const playlistMatch = url.match(/[?&]list=([^#&?]+)/);
 
   return {
-    videoId: videoMatch ? videoMatch[1] : null,
+    videoId: videoId ?? null,
     playlistId: playlistMatch ? playlistMatch[1] : null,
   };
 }