Update application aesthetics with a pastel color scheme and larger text

Introduce the Catppuccin Mocha color palette and increase font sizes for improved readability, while also adding a visual hint for spacebar functionality.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: f3ac8eb3-f610-4678-ab6e-ebf900098be4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 098ca8d5-1a49-468d-abec-89858708710d
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d4b7863b-f7b2-425c-a9b5-ad7bd1885e9d/f3ac8eb3-f610-4678-ab6e-ebf900098be4/N1qS6qo
Replit-Helium-Checkpoint-Created: true

src/public/index.html

@@ -338,6 +338,7 @@
         </div>
         <button id="buzz-btn" class="s-closed" disabled onclick="doBuzz()">BUZZ</button>
         <div class="buzz-status" id="buzz-status">WAITING FOR ROUND</div>
+        <div class="spacebar-hint" id="spacebar-hint">SPACEBAR TO BUZZ</div>
       </div>
 
       <div class="p-panel">

src/public/script.js

@@ -569,28 +569,34 @@ function renderPlayerBuzzer(){
     const already=bz.buzzOrder.includes(myId);
     const isFirst=bz.buzzOrder[0]===myId;
 
+    const hint=document.getElementById('spacebar-hint');
     let newState='';
     if(!bz.roundOpen){
         newState='closed';
         btn.className='s-closed';btn.disabled=true;sts.textContent='WAITING FOR ROUND';
         ripple.style.display='none';
+        if(hint)hint.classList.remove('visible');
     } else if(isFirst){
         newState='first';
         btn.className='s-first';btn.disabled=false;sts.textContent='YOU BUZZED FIRST!';
         ripple.style.display='flex';
+        if(hint)hint.classList.remove('visible');
     } else if(already){
         const pos=bz.buzzOrder.indexOf(myId)+1;
         newState='buzzed';
         btn.className='s-buzzed';btn.disabled=true;sts.textContent='BUZZED — #'+pos+' IN ORDER';
         ripple.style.display='none';
+        if(hint)hint.classList.remove('visible');
     } else if(room.settings.buzzerLockout&&bz.buzzOrder.length>0){
         newState='locked';
         btn.className='s-locked';btn.disabled=true;sts.textContent='BUZZER LOCKED OUT';
         ripple.style.display='none';
+        if(hint)hint.classList.remove('visible');
     } else {
         newState='open';
         btn.className='s-open';btn.disabled=false;sts.textContent='ROUND OPEN — BUZZ!';
         ripple.style.display='flex';
+        if(hint)hint.classList.add('visible');
     }
 
     // Animate state transitions