From 6afb85387486c69a7351f9fc42cf455fae4bb0c4 Mon Sep 17 00:00:00 2001
From: KeshavAnandCode <keshavanand.dev@gmail.com>
Date: Wed, 25 Mar 2026 21:14:15 +0000
Subject: [PATCH] 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 |    1 +
 src/public/script.js  |    6 +
 src/public/styles.css | 1252 ++++++++++++++++++-----------------------
 3 files changed, 564 insertions(+), 695 deletions(-)

diff --git a/src/public/index.html b/src/public/index.html
index 8fb8707..73a7c6c 100644
--- a/src/public/index.html
+++ b/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">
diff --git a/src/public/script.js b/src/public/script.js
index f26e7a8..9b167b5 100644
--- a/src/public/script.js
+++ b/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
diff --git a/src/public/styles.css b/src/public/styles.css
index 6a77011..1317972 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -9,101 +9,73 @@
 }
 
 html {
-    font-size: 17px;
+    font-size: 18px;
     scroll-behavior: smooth;
 }
 
 body {
     font-family: 'JetBrains Mono', monospace;
-    background: #04080a;
-    color: #c8ffcc;
+    background: #1e1e2e;
+    color: #cdd6f4;
     min-height: 100dvh;
     overflow-x: hidden;
-    position: relative;
 }
 
-/* scanline overlay */
-body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background: repeating-linear-gradient(
-        0deg,
-        transparent,
-        transparent 2px,
-        rgba(0, 255, 65, 0.013) 2px,
-        rgba(0, 255, 65, 0.013) 4px
-    );
-    pointer-events: none;
-    z-index: 9999;
-}
+/* ── SCROLLBAR ─────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: #181825; }
+::-webkit-scrollbar-thumb { background: #45475a; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #585b70; }
 
-/* subtle grid background */
-body::after {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background-image:
-        linear-gradient(rgba(0,255,65,0.025) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(0,255,65,0.025) 1px, transparent 1px);
-    background-size: 40px 40px;
-    pointer-events: none;
-    z-index: 0;
-}
-
-::-webkit-scrollbar {
-    width: 4px;
-}
-::-webkit-scrollbar-track {
-    background: #04080a;
-}
-::-webkit-scrollbar-thumb {
-    background: #0f3020;
-    border-radius: 2px;
-}
-::-webkit-scrollbar-thumb:hover {
-    background: #1a5030;
-}
-
-/* ── TOKENS ────────────────────────────────────────── */
+/* ── CATPPUCCIN MOCHA TOKENS ───────────────────────── */
 :root {
-    --g: #00ff41;
-    --g2: #00cc34;
-    --g3: #006b1e;
-    --gdark: #001a09;
-    --gbright: #4dff7a;
-    --bg: #04080a;
-    --bg2: #070e0a;
-    --bg3: #0b1410;
-    --panel: #080f0b;
-    --panel2: #0c1812;
-    --border: #0f2a18;
-    --border2: #1a4a28;
-    --text: #c8ffcc;
-    --dim: #3a7a48;
-    --mid: #6abf7a;
-    --red: #ff4455;
-    --yellow: #ffe141;
-    --cyan: #41ffe4;
-    --r: 6px;
-    --r2: 10px;
-
-    --glow-sm: 0 0 8px rgba(0,255,65,0.3);
-    --glow-md: 0 0 20px rgba(0,255,65,0.25), 0 0 60px rgba(0,255,65,0.08);
-    --glow-lg: 0 0 40px rgba(0,255,65,0.35), 0 0 100px rgba(0,255,65,0.12);
-    --shadow-panel: 0 4px 24px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.4);
-    --shadow-card: 0 8px 32px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
+    /* Backgrounds */
+    --base:    #1e1e2e;
+    --mantle:  #181825;
+    --crust:   #11111b;
+    --s0:      #313244;
+    --s1:      #45475a;
+    --s2:      #585b70;
+    /* Text */
+    --ov0:     #6c7086;
+    --ov1:     #7f849c;
+    --ov2:     #9399b2;
+    --sub0:    #a6adc8;
+    --sub1:    #bac2de;
+    --text:    #cdd6f4;
+    /* Accent colours */
+    --lav:     #b4befe;
+    --blue:    #89b4fa;
+    --sapp:    #74c7ec;
+    --sky:     #89dceb;
+    --teal:    #94e2d5;
+    --green:   #a6e3a1;
+    --yellow:  #f9e2af;
+    --peach:   #fab387;
+    --maroon:  #eba0ac;
+    --red:     #f38ba8;
+    --mauve:   #cba6f7;
+    --pink:    #f5c2e7;
+    /* Convenience aliases */
+    --accent:  var(--lav);
+    --dim:     var(--ov1);
+    --mid:     var(--sub0);
+    --border:  var(--s0);
+    --border2: var(--s1);
+    --panel:   #24243e;
+    --panel2:  #1a1a2e;
+    /* Radii */
+    --r:  8px;
+    --r2: 14px;
+    /* Shadows */
+    --shadow-sm:    0 2px 8px rgba(0,0,0,0.4);
+    --shadow-panel: 0 4px 24px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
+    --shadow-card:  0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
 }
 
 /* ── UTILS ─────────────────────────────────────────── */
 .glow {
-    text-shadow: 0 0 16px var(--g), 0 0 40px rgba(0,255,65,.35), 0 0 80px rgba(0,255,65,.12);
-}
-.glow-red {
-    text-shadow: 0 0 14px var(--red), 0 0 35px rgba(255,68,85,.3);
-}
-.glow-yellow {
-    text-shadow: 0 0 14px var(--yellow), 0 0 35px rgba(255,225,65,.3);
+    text-shadow: 0 0 20px rgba(180,190,254,0.45), 0 0 50px rgba(180,190,254,0.2);
 }
 
 /* ── LAYOUT ────────────────────────────────────────── */
@@ -111,8 +83,6 @@ body::after {
     min-height: 100dvh;
     display: flex;
     flex-direction: column;
-    position: relative;
-    z-index: 1;
 }
 
 /* ── HEADER ────────────────────────────────────────── */
@@ -120,38 +90,35 @@ header {
     display: flex;
     align-items: center;
     gap: 16px;
-    padding: 0 28px;
-    height: 62px;
-    min-height: 62px;
-    background: rgba(7,14,10,0.97);
-    border-bottom: 1px solid var(--border2);
+    padding: 0 32px;
+    height: 72px;
+    min-height: 72px;
+    background: #181825;
+    border-bottom: 1px solid var(--s1);
     position: sticky;
     top: 0;
     z-index: 200;
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    box-shadow: 0 1px 0 rgba(0,255,65,0.06), 0 4px 16px rgba(0,0,0,0.5);
+    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
 }
 
 .logo-wrap {
     display: flex;
     flex-direction: column;
-    gap: 1px;
+    gap: 3px;
 }
 
 .logo {
     font-size: 22px;
     font-weight: 800;
-    letter-spacing: 8px;
-    color: var(--g);
-    text-shadow: 0 0 12px var(--g), 0 0 30px rgba(0,255,65,.25);
+    letter-spacing: 6px;
+    color: var(--lav);
     line-height: 1;
 }
 
 .logo-sub {
-    font-size: 9px;
-    color: var(--dim);
-    letter-spacing: 3px;
+    font-size: 11px;
+    color: var(--ov1);
+    letter-spacing: 2px;
 }
 
 .hdr-r {
@@ -162,32 +129,33 @@ header {
 }
 
 .room-chip {
-    font-size: 12px;
+    font-size: 14px;
     letter-spacing: 3px;
-    color: var(--g2);
-    background: rgba(0,255,65,0.06);
-    border: 1px solid rgba(0,255,65,0.2);
-    padding: 4px 12px;
-    border-radius: 4px;
+    color: var(--lav);
+    background: rgba(180,190,254,0.1);
+    border: 1px solid rgba(180,190,254,0.3);
+    padding: 6px 14px;
+    border-radius: 6px;
     display: none;
+    font-weight: 600;
 }
 
 .conn-pill {
     display: flex;
     align-items: center;
-    gap: 7px;
-    font-size: 11px;
-    color: var(--dim);
-    letter-spacing: 1.5px;
-    background: var(--bg3);
-    border: 1px solid var(--border);
-    padding: 5px 12px;
+    gap: 8px;
+    font-size: 13px;
+    color: var(--ov1);
+    letter-spacing: 1px;
+    background: var(--s0);
+    border: 1px solid var(--s1);
+    padding: 7px 14px;
     border-radius: 20px;
 }
 
 .conn-dot {
-    width: 8px;
-    height: 8px;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
     background: var(--red);
     flex-shrink: 0;
@@ -195,14 +163,14 @@ header {
 }
 
 .conn-dot.on {
-    background: var(--g);
-    box-shadow: 0 0 8px var(--g), 0 0 16px rgba(0,255,65,.5);
+    background: var(--green);
+    box-shadow: 0 0 8px rgba(166,227,161,0.6);
     animation: dot-pulse 2s ease-in-out infinite;
 }
 
 @keyframes dot-pulse {
-    0%, 100% { box-shadow: 0 0 6px var(--g), 0 0 12px rgba(0,255,65,.4); }
-    50% { box-shadow: 0 0 10px var(--g), 0 0 22px rgba(0,255,65,.6); }
+    0%, 100% { box-shadow: 0 0 5px rgba(166,227,161,0.5); }
+    50%       { box-shadow: 0 0 12px rgba(166,227,161,0.8); }
 }
 
 /* ── SCREENS ───────────────────────────────────────── */
@@ -223,287 +191,250 @@ header {
     align-items: center;
     justify-content: center;
     padding: 60px 24px;
-    gap: 48px;
+    gap: 52px;
 }
 
 .hero {
     text-align: center;
-    position: relative;
 }
 
-.hero-decoration {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 320px;
-    height: 320px;
-    border-radius: 50%;
-    border: 1px solid rgba(0,255,65,0.06);
-    pointer-events: none;
-}
-
-.hero-decoration::before {
-    content: '';
-    position: absolute;
-    inset: 20px;
-    border-radius: 50%;
-    border: 1px solid rgba(0,255,65,0.04);
-}
+.hero-decoration { display: none; }
 
 .hero h1 {
-    font-size: clamp(64px, 15vw, 120px);
+    font-size: clamp(60px, 14vw, 108px);
     font-weight: 800;
-    letter-spacing: 20px;
-    color: var(--g);
+    letter-spacing: 16px;
+    color: var(--lav);
     line-height: 1;
-    text-shadow: 0 0 20px var(--g), 0 0 50px rgba(0,255,65,.4), 0 0 120px rgba(0,255,65,.15);
-    position: relative;
+    text-shadow: 0 0 40px rgba(180,190,254,0.4), 0 0 80px rgba(180,190,254,0.15);
 }
 
 .hero p {
-    font-size: 11px;
-    color: var(--dim);
-    letter-spacing: 5px;
-    margin-top: 18px;
-    position: relative;
+    font-size: 14px;
+    color: var(--sub0);
+    letter-spacing: 4px;
+    margin-top: 20px;
 }
 
 .hero-badge {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
-    margin-top: 12px;
-    padding: 5px 14px;
-    border: 1px solid var(--border2);
+    gap: 8px;
+    margin-top: 16px;
+    padding: 7px 16px;
+    border: 1px solid var(--s2);
     border-radius: 20px;
-    font-size: 10px;
+    font-size: 12px;
     letter-spacing: 2px;
-    color: var(--dim);
+    color: var(--ov2);
+    background: var(--s0);
 }
 
 .hero-badge-dot {
-    width: 6px;
-    height: 6px;
+    width: 8px;
+    height: 8px;
     border-radius: 50%;
-    background: var(--g);
-    box-shadow: 0 0 6px var(--g);
+    background: var(--green);
+    box-shadow: 0 0 6px rgba(166,227,161,0.6);
     animation: dot-pulse 2s ease-in-out infinite;
 }
 
 .land-cards {
     display: flex;
-    gap: 20px;
+    gap: 24px;
     flex-wrap: wrap;
     justify-content: center;
     width: 100%;
-    max-width: 800px;
+    max-width: 900px;
 }
 
 .land-card {
-    background: linear-gradient(135deg, var(--panel) 0%, rgba(8,20,14,0.9) 100%);
-    border: 1px solid var(--border2);
+    background: var(--panel);
+    border: 1px solid var(--s1);
     border-radius: var(--r2);
-    padding: 36px 32px;
+    padding: 40px 36px;
     flex: 1;
-    min-width: 300px;
-    max-width: 380px;
+    min-width: 320px;
+    max-width: 420px;
     display: flex;
     flex-direction: column;
-    gap: 20px;
-    transition: border-color .25s, box-shadow .25s, transform .25s;
+    gap: 22px;
+    transition: border-color .25s, box-shadow .25s, transform .2s;
     box-shadow: var(--shadow-card);
-    position: relative;
-    overflow: hidden;
-}
-
-.land-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(0,255,65,0.3), transparent);
-    opacity: 0;
-    transition: opacity .25s;
 }
 
 .land-card:hover {
-    border-color: rgba(0,255,65,0.25);
-    box-shadow: var(--shadow-card), 0 0 30px rgba(0,255,65,0.08);
+    border-color: var(--lav);
+    box-shadow: var(--shadow-card), 0 0 24px rgba(180,190,254,0.12);
     transform: translateY(-3px);
 }
 
-.land-card:hover::before {
-    opacity: 1;
-}
-
 .land-card-icon {
-    width: 44px;
-    height: 44px;
-    border-radius: 8px;
-    background: rgba(0,255,65,0.08);
-    border: 1px solid rgba(0,255,65,0.15);
+    width: 48px;
+    height: 48px;
+    border-radius: 10px;
+    background: rgba(180,190,254,0.1);
+    border: 1px solid rgba(180,190,254,0.2);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 20px;
-    color: var(--g);
+    font-size: 22px;
+    color: var(--lav);
 }
 
 .land-card h2 {
-    font-size: 13px;
-    letter-spacing: 3px;
-    color: var(--g);
-    margin-bottom: -6px;
+    font-size: 15px;
+    letter-spacing: 2px;
+    color: var(--lav);
+    margin-bottom: -4px;
+    font-weight: 700;
 }
 
 .land-card p {
-    font-size: 13px;
-    color: var(--dim);
+    font-size: 15px;
+    color: var(--sub0);
     line-height: 1.8;
 }
 
 .rejoin-bar {
-    font-size: 12px;
-    color: var(--dim);
+    font-size: 14px;
+    color: var(--ov1);
     margin-top: -16px;
 }
 
 .rejoin-bar a {
-    color: var(--g2);
+    color: var(--blue);
     text-decoration: none;
     letter-spacing: 1px;
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    padding: 8px 16px;
-    border: 1px solid var(--border2);
-    border-radius: 6px;
+    padding: 10px 20px;
+    border: 1px solid var(--s1);
+    border-radius: 8px;
     transition: all .2s;
+    font-size: 14px;
 }
 
 .rejoin-bar a:hover {
-    color: var(--g);
-    border-color: rgba(0,255,65,0.3);
-    background: rgba(0,255,65,0.04);
+    color: var(--lav);
+    border-color: var(--lav);
+    background: rgba(180,190,254,0.06);
 }
 
 /* ── SETUP ─────────────────────────────────────────── */
 #s-setup {
     align-items: center;
     overflow-y: auto;
-    padding: 36px 24px;
+    padding: 44px 24px;
 }
 
 .setup-wrap {
     width: 100%;
-    max-width: 660px;
+    max-width: 680px;
     display: flex;
     flex-direction: column;
-    gap: 24px;
+    gap: 28px;
 }
 
 .setup-header {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 8px;
 }
 
 .setup-title {
-    font-size: 14px;
-    letter-spacing: 4px;
-    color: var(--g);
-    margin-bottom: 2px;
+    font-size: 17px;
+    letter-spacing: 3px;
+    color: var(--lav);
+    font-weight: 700;
 }
 
 .setup-sub {
-    font-size: 12px;
-    color: var(--dim);
-    letter-spacing: 1px;
-    line-height: 1.6;
+    font-size: 14px;
+    color: var(--sub0);
+    letter-spacing: 0.5px;
+    line-height: 1.7;
 }
 
 /* ── FORM ATOMS ────────────────────────────────────── */
 .field {
     display: flex;
     flex-direction: column;
-    gap: 9px;
+    gap: 10px;
 }
 
 label,
 .lbl {
-    font-size: 11px;
-    letter-spacing: 2px;
-    color: var(--dim);
+    font-size: 14px;
+    letter-spacing: 1.5px;
+    color: var(--sub0);
     text-transform: uppercase;
+    font-weight: 600;
 }
 
 input[type=text],
 input[type=number],
 select {
-    background: var(--bg3);
-    border: 1px solid var(--border2);
+    background: var(--s0);
+    border: 2px solid var(--s1);
     color: var(--text);
     font-family: 'JetBrains Mono', monospace;
-    font-size: 16px;
-    padding: 13px 16px;
+    font-size: 17px;
+    padding: 14px 18px;
     border-radius: var(--r);
     width: 100%;
     outline: none;
-    transition: border-color .2s, box-shadow .2s, background .2s;
+    transition: border-color .2s, box-shadow .2s;
 }
 
 input:focus,
 select:focus {
-    border-color: var(--g2);
-    box-shadow: 0 0 0 2px rgba(0,204,52,0.12), 0 0 10px rgba(0,204,52,0.1);
-    background: rgba(0,255,65,0.02);
+    border-color: var(--lav);
+    box-shadow: 0 0 0 3px rgba(180,190,254,0.15);
 }
 
 input::placeholder {
-    color: var(--dim);
-    font-size: 14px;
-    opacity: 0.7;
+    color: var(--ov1);
+    opacity: 0.8;
 }
 
 select option {
-    background: var(--bg3);
+    background: var(--s0);
 }
 
 /* seg */
 .seg {
     display: flex;
-    border: 1px solid var(--border2);
+    border: 2px solid var(--s1);
     border-radius: var(--r);
     overflow: hidden;
-    background: var(--bg3);
+    background: var(--s0);
 }
 
 .seg-opt {
     flex: 1;
-    padding: 12px 12px;
+    padding: 14px 16px;
     font-family: 'JetBrains Mono', monospace;
-    font-size: 12px;
-    letter-spacing: 2px;
+    font-size: 14px;
+    letter-spacing: 1.5px;
     text-align: center;
     cursor: pointer;
-    color: var(--dim);
+    color: var(--ov1);
     background: transparent;
     border: none;
     transition: all .2s;
 }
 
 .seg-opt.active {
-    background: rgba(0,255,65,0.1);
-    color: var(--g);
-    box-shadow: inset 0 0 12px rgba(0,255,65,0.05);
+    background: rgba(180,190,254,0.15);
+    color: var(--lav);
+    font-weight: 700;
 }
 
 .seg-opt:hover:not(.active) {
-    color: var(--mid);
-    background: rgba(255,255,255,0.02);
+    color: var(--sub1);
+    background: rgba(255,255,255,0.04);
 }
 
 /* toggle */
@@ -511,9 +442,9 @@ select option {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 14px 0;
-    border-bottom: 1px solid var(--border);
-    gap: 16px;
+    padding: 18px 0;
+    border-bottom: 1px solid var(--s0);
+    gap: 20px;
 }
 
 .tog-row:last-child {
@@ -521,26 +452,28 @@ select option {
 }
 
 .tog-row .lbl {
-    font-size: 13px;
+    font-size: 15px;
     color: var(--text);
-    letter-spacing: 0.5px;
+    letter-spacing: 0.3px;
     line-height: 1.4;
     text-transform: none;
+    font-weight: 600;
 }
 
 .lbl-sub {
-    font-size: 11px;
-    color: var(--dim);
-    margin-top: 3px;
+    font-size: 13px;
+    color: var(--ov2);
+    margin-top: 4px;
     letter-spacing: 0;
     text-transform: none;
     font-weight: 400;
+    line-height: 1.5;
 }
 
 .tog {
     position: relative;
-    width: 46px;
-    height: 26px;
+    width: 52px;
+    height: 30px;
     flex-shrink: 0;
 }
 
@@ -554,26 +487,25 @@ select option {
 .tog-track {
     position: absolute;
     inset: 0;
-    background: var(--bg3);
-    border: 1px solid var(--border2);
-    border-radius: 13px;
+    background: var(--s1);
+    border: 2px solid var(--s2);
+    border-radius: 15px;
     cursor: pointer;
-    transition: background .2s, border-color .2s, box-shadow .2s;
+    transition: background .2s, border-color .2s;
 }
 
 .tog input:checked ~ .tog-track {
-    background: rgba(0,255,65,0.12);
-    border-color: var(--g2);
-    box-shadow: 0 0 8px rgba(0,204,52,0.2);
+    background: rgba(180,190,254,0.2);
+    border-color: var(--lav);
 }
 
 .tog-track::after {
     content: '';
     position: absolute;
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
     border-radius: 50%;
-    background: var(--dim);
+    background: var(--ov1);
     top: 3px;
     left: 3px;
     transition: all .2s cubic-bezier(0.4,0,0.2,1);
@@ -581,18 +513,18 @@ select option {
 }
 
 .tog input:checked ~ .tog-track::after {
-    background: var(--g);
-    left: 23px;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 8px rgba(0,255,65,0.5);
+    background: var(--lav);
+    left: 25px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 8px rgba(180,190,254,0.5);
 }
 
 /* ── BUTTONS ───────────────────────────────────────── */
 .btn {
     font-family: 'JetBrains Mono', monospace;
-    font-size: 12px;
-    letter-spacing: 2.5px;
-    padding: 13px 24px;
-    border: 1px solid;
+    font-size: 15px;
+    letter-spacing: 1.5px;
+    padding: 16px 28px;
+    border: 2px solid;
     border-radius: var(--r);
     cursor: pointer;
     transition: all .18s cubic-bezier(0.4,0,0.2,1);
@@ -601,93 +533,66 @@ select option {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 7px;
-    position: relative;
-    overflow: hidden;
+    gap: 8px;
+    font-weight: 600;
 }
 
-.btn::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: rgba(255,255,255,0);
-    transition: background .15s;
-}
-
-.btn:active::after {
-    background: rgba(255,255,255,0.05);
+.btn:active {
+    transform: scale(0.97);
 }
 
 .btn-g {
-    border-color: var(--g);
-    color: var(--g);
-    background: rgba(0,255,65,0.04);
+    border-color: var(--lav);
+    color: var(--lav);
+    background: rgba(180,190,254,0.08);
 }
 
 .btn-g:hover {
-    background: rgba(0,255,65,0.12);
-    border-color: var(--gbright);
-    box-shadow: 0 0 16px rgba(0,255,65,0.2);
-    color: var(--gbright);
-}
-
-.btn-g:active {
-    background: rgba(0,255,65,0.18);
-    transform: scale(0.98);
+    background: rgba(180,190,254,0.18);
+    border-color: #c9d1ff;
+    color: #c9d1ff;
+    box-shadow: 0 0 16px rgba(180,190,254,0.2);
 }
 
 .btn-ghost {
-    border-color: var(--border2);
-    color: var(--dim);
+    border-color: var(--s2);
+    color: var(--sub0);
     background: transparent;
 }
 
 .btn-ghost:hover {
-    border-color: var(--mid);
+    border-color: var(--sub0);
     color: var(--text);
-    background: rgba(255,255,255,0.03);
-}
-
-.btn-ghost:active {
-    transform: scale(0.98);
+    background: rgba(255,255,255,0.04);
 }
 
 .btn-red {
-    border-color: rgba(255,68,85,0.6);
+    border-color: rgba(243,139,168,0.6);
     color: var(--red);
     background: transparent;
 }
 
 .btn-red:hover {
-    background: rgba(255,68,85,0.1);
+    background: rgba(243,139,168,0.12);
     border-color: var(--red);
-    box-shadow: 0 0 14px rgba(255,68,85,0.2);
-}
-
-.btn-red:active {
-    transform: scale(0.98);
+    box-shadow: 0 0 14px rgba(243,139,168,0.2);
 }
 
 .btn-yellow {
-    border-color: rgba(255,225,65,0.6);
+    border-color: rgba(249,226,175,0.5);
     color: var(--yellow);
     background: transparent;
 }
 
 .btn-yellow:hover {
-    background: rgba(255,225,65,0.1);
+    background: rgba(249,226,175,0.1);
     border-color: var(--yellow);
-    box-shadow: 0 0 14px rgba(255,225,65,0.2);
-}
-
-.btn-yellow:active {
-    transform: scale(0.98);
 }
 
 .btn-sm {
-    padding: 9px 15px;
-    font-size: 11px;
-    letter-spacing: 1.5px;
+    padding: 11px 18px;
+    font-size: 13px;
+    letter-spacing: 1px;
 }
 
 .btn-full {
@@ -702,80 +607,67 @@ select option {
 
 /* ── PANEL ─────────────────────────────────────────── */
 .panel {
-    background: linear-gradient(135deg, var(--panel) 0%, var(--panel2) 100%);
-    border: 1px solid var(--border2);
+    background: var(--panel);
+    border: 1px solid var(--s1);
     border-radius: var(--r2);
-    padding: 26px;
+    padding: 28px;
     box-shadow: var(--shadow-panel);
-    position: relative;
-}
-
-.panel::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent 0%, rgba(0,255,65,0.15) 50%, transparent 100%);
-    border-radius: var(--r2) var(--r2) 0 0;
 }
 
 .panel-title {
-    font-size: 10px;
-    letter-spacing: 4px;
-    color: var(--g);
-    margin-bottom: 20px;
+    font-size: 14px;
+    letter-spacing: 2px;
+    color: var(--lav);
+    margin-bottom: 22px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
+    gap: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
 }
 
 .panel-title::after {
     content: '';
     flex: 1;
     height: 1px;
-    background: linear-gradient(90deg, var(--border2), transparent);
+    background: linear-gradient(90deg, var(--s1), transparent);
     margin-left: 8px;
 }
 
-.panel-title:has(.tag) ::after {
-    display: none;
-}
-
 /* ── TAG ───────────────────────────────────────────── */
 .tag {
     display: inline-block;
-    padding: 3px 10px;
-    font-size: 10px;
-    letter-spacing: 1.5px;
+    padding: 4px 12px;
+    font-size: 12px;
+    letter-spacing: 1px;
     border: 1px solid;
-    border-radius: 3px;
+    border-radius: 4px;
     font-family: 'JetBrains Mono', monospace;
+    font-weight: 600;
 }
 
 .tag-g {
-    border-color: rgba(0,204,52,0.4);
-    color: var(--g2);
-    background: rgba(0,204,52,0.06);
+    border-color: rgba(166,227,161,0.4);
+    color: var(--green);
+    background: rgba(166,227,161,0.08);
 }
 
 .tag-red {
-    border-color: rgba(255,68,85,0.4);
+    border-color: rgba(243,139,168,0.4);
     color: var(--red);
-    background: rgba(255,68,85,0.06);
+    background: rgba(243,139,168,0.08);
 }
 
 .tag-y {
-    border-color: rgba(255,225,65,0.4);
+    border-color: rgba(249,226,175,0.4);
     color: var(--yellow);
-    background: rgba(255,225,65,0.06);
+    background: rgba(249,226,175,0.08);
 }
 
 .tag-dim {
-    border-color: var(--border2);
-    color: var(--dim);
+    border-color: var(--s1);
+    color: var(--ov2);
 }
 
 /* ══════════════════════════════════════════════════════
@@ -784,14 +676,14 @@ select option {
 #s-mod {
     flex-direction: row;
     overflow: hidden;
-    height: calc(100dvh - 62px);
+    height: calc(100dvh - 72px);
 }
 
 .mod-side {
-    width: 292px;
-    min-width: 292px;
-    background: linear-gradient(180deg, var(--bg2) 0%, #060c09 100%);
-    border-right: 1px solid var(--border2);
+    width: 320px;
+    min-width: 320px;
+    background: #181825;
+    border-right: 1px solid var(--s1);
     display: flex;
     flex-direction: column;
     overflow-y: auto;
@@ -800,50 +692,50 @@ select option {
 .mod-body {
     flex: 1;
     overflow-y: auto;
-    padding: 24px;
+    padding: 28px;
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 24px;
 }
 
 .side-sec {
-    padding: 18px 20px;
-    border-bottom: 1px solid var(--border);
-    position: relative;
+    padding: 22px 24px;
+    border-bottom: 1px solid var(--s0);
 }
 
 .side-label {
-    font-size: 9px;
-    letter-spacing: 4px;
-    color: var(--dim);
-    margin-bottom: 12px;
+    font-size: 13px;
+    letter-spacing: 3px;
+    color: var(--ov1);
+    margin-bottom: 14px;
     text-transform: uppercase;
+    font-weight: 600;
 }
 
 .side-hint {
-    font-size: 10px;
-    color: var(--dim);
-    letter-spacing: 1px;
+    font-size: 13px;
+    color: var(--ov1);
+    letter-spacing: 0.5px;
 }
 
 .side-room-code {
-    font-size: 30px;
-    font-weight: 700;
+    font-size: 34px;
+    font-weight: 800;
     letter-spacing: 8px;
-    color: var(--g);
+    color: var(--lav);
     line-height: 1;
-    text-shadow: 0 0 16px var(--g), 0 0 40px rgba(0,255,65,.25);
+    text-shadow: 0 0 20px rgba(180,190,254,0.3);
 }
 
 .side-btn-group {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
 }
 
 .side-status {
-    font-size: 11px;
-    color: var(--dim);
+    font-size: 14px;
+    color: var(--sub0);
     line-height: 2;
     letter-spacing: 0.5px;
 }
@@ -852,34 +744,28 @@ select option {
 .timer-block {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 14px;
 }
 
 .timer-digits {
-    font-size: 52px;
+    font-size: 56px;
     font-weight: 700;
     letter-spacing: 3px;
-    color: var(--g);
+    color: var(--teal);
     line-height: 1;
     font-variant-numeric: tabular-nums;
     transition: color .3s, text-shadow .3s;
-    text-shadow: 0 0 16px rgba(0,255,65,.4);
+    text-shadow: 0 0 20px rgba(148,226,213,0.4);
 }
 
 .timer-digits.warn {
     color: var(--yellow);
-    text-shadow: 0 0 16px rgba(255,225,65,.5);
-}
-
-.timer-digitsdanger {
-    color: var(--red);
-    text-shadow: 0 0 16px rgba(255,68,85,.55);
-    animation: tblink .5s step-end infinite;
+    text-shadow: 0 0 16px rgba(249,226,175,0.5);
 }
 
 .timer-digits.danger {
     color: var(--red);
-    text-shadow: 0 0 16px rgba(255,68,85,.55);
+    text-shadow: 0 0 16px rgba(243,139,168,0.55);
     animation: tblink .5s step-end infinite;
 }
 
@@ -889,7 +775,7 @@ select option {
 
 .timer-controls {
     display: flex;
-    gap: 8px;
+    gap: 10px;
 }
 
 .timer-controls .btn {
@@ -899,17 +785,17 @@ select option {
 .timer-set-row {
     display: flex;
     align-items: center;
-    gap: 8px;
-    background: var(--bg3);
-    border: 1px solid var(--border2);
+    gap: 10px;
+    background: var(--s0);
+    border: 1px solid var(--s1);
     border-radius: var(--r);
-    padding: 7px 12px;
+    padding: 9px 14px;
 }
 
 .timer-set-row input {
-    width: 60px;
-    padding: 2px 4px;
-    font-size: 15px;
+    width: 70px;
+    padding: 3px 6px;
+    font-size: 16px;
     background: transparent;
     border: none;
     text-align: center;
@@ -923,81 +809,77 @@ select option {
 /* ── TABS ──────────────────────────────────────────── */
 .tab-bar {
     display: flex;
-    border-bottom: 1px solid var(--border2);
+    border-bottom: 2px solid var(--s0);
     gap: 0;
 }
 
 .tab {
-    padding: 13px 20px;
-    font-size: 11px;
-    letter-spacing: 2.5px;
-    color: var(--dim);
+    padding: 16px 22px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+    letter-spacing: 1.5px;
     cursor: pointer;
-    border-bottom: 2px solid transparent;
-    transition: all .18s;
-    position: relative;
+    color: var(--ov1);
+    transition: all .2s;
+    border-bottom: 3px solid transparent;
+    margin-bottom: -2px;
+    font-weight: 600;
+    text-transform: uppercase;
 }
 
 .tab:hover {
-    color: var(--mid);
+    color: var(--sub1);
+    background: rgba(255,255,255,0.03);
 }
 
 .tab.on {
-    color: var(--g);
-    border-bottom-color: var(--g);
+    color: var(--lav);
+    border-bottom-color: var(--lav);
 }
 
-/* ── BUZZ LIST ─────────────────────────────────────── */
+/* ── BUZZ ENTRIES (MOD) ────────────────────────────── */
 .buzz-list {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
 }
 
 .bz-entry {
     display: flex;
     align-items: center;
-    gap: 16px;
-    padding: 15px 18px;
-    background: var(--bg3);
-    border: 1px solid var(--border2);
+    gap: 18px;
+    padding: 18px 20px;
+    background: var(--s0);
+    border: 1px solid var(--s1);
     border-radius: var(--r);
     transition: border-color .2s;
-    position: relative;
-    overflow: hidden;
 }
 
-.bz-entry::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: var(--g2);
-    opacity: 0.5;
-    border-radius: var(--r) 0 0 var(--r);
-}
-
-.bz-entry:first-child::before {
-    background: var(--yellow);
-    opacity: 1;
-    box-shadow: 0 0 8px rgba(255,225,65,0.4);
+.bz-entry:hover {
+    border-color: var(--lav);
 }
 
 .bz-rank {
-    font-size: 24px;
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background: var(--s1);
+    border: 2px solid var(--s2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
     font-weight: 700;
-    color: var(--g2);
-    width: 32px;
-    text-align: center;
+    color: var(--sub0);
     flex-shrink: 0;
-    line-height: 1;
 }
 
 .bz-rank.first {
+    background: rgba(249,226,175,0.15);
+    border-color: var(--yellow);
     color: var(--yellow);
-    text-shadow: 0 0 10px rgba(255,225,65,.6);
+    font-size: 20px;
+    box-shadow: 0 0 16px rgba(249,226,175,0.25);
 }
 
 .bz-info {
@@ -1006,29 +888,26 @@ select option {
 }
 
 .bz-name {
-    font-size: 17px;
-    font-weight: 600;
+    font-size: 18px;
+    font-weight: 700;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .bz-team {
-    font-size: 12px;
-    margin-top: 3px;
+    font-size: 14px;
+    margin-top: 4px;
     letter-spacing: 0.5px;
+    color: var(--sub0);
 }
 
 .bz-ms {
-    font-size: 11px;
-    color: var(--dim);
+    font-size: 13px;
+    color: var(--ov1);
     margin-top: 3px;
 }
 
-.bz-kick {
-    flex-shrink: 0;
-}
-
 /* ── PLAYERS ───────────────────────────────────────── */
 .player-list {
     display: flex;
@@ -1038,9 +917,9 @@ select option {
 .pl-row {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 13px 0;
-    border-bottom: 1px solid var(--border);
+    gap: 14px;
+    padding: 16px 0;
+    border-bottom: 1px solid var(--s0);
     transition: opacity .2s;
 }
 
@@ -1058,36 +937,37 @@ select option {
 }
 
 .pl-name {
-    font-size: 15px;
+    font-size: 16px;
+    font-weight: 600;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .pl-meta {
-    font-size: 11px;
-    color: var(--dim);
+    font-size: 13px;
+    color: var(--ov2);
     margin-top: 4px;
 }
 
 .pl-actions {
     display: flex;
-    gap: 6px;
+    gap: 8px;
     flex-shrink: 0;
 }
 
 /* ── TEAM GRID (mod) ───────────────────────────────── */
 .team-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 12px;
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+    gap: 14px;
 }
 
 .team-card {
-    background: var(--bg3);
-    border: 1px solid;
+    background: var(--s0);
+    border: 2px solid;
     border-radius: var(--r);
-    padding: 18px 16px;
+    padding: 22px 18px;
     text-align: center;
     transition: box-shadow .2s;
 }
@@ -1097,33 +977,34 @@ select option {
 }
 
 .team-card .tc-n {
-    font-size: 11px;
-    letter-spacing: 2px;
-    margin-bottom: 10px;
+    font-size: 13px;
+    letter-spacing: 1.5px;
+    margin-bottom: 12px;
     text-transform: uppercase;
+    font-weight: 700;
 }
 
 .team-card .tc-c {
-    font-size: 30px;
+    font-size: 34px;
     font-weight: 700;
     line-height: 1;
 }
 
 .team-card .tc-m {
-    font-size: 11px;
-    color: var(--dim);
-    margin-top: 8px;
-    line-height: 1.7;
+    font-size: 13px;
+    color: var(--sub0);
+    margin-top: 10px;
+    line-height: 1.8;
 }
 
 /* ── SETTINGS ──────────────────────────────────────── */
 .setting-row {
-    padding: 13px 0;
-    border-bottom: 1px solid var(--border);
+    padding: 16px 0;
+    border-bottom: 1px solid var(--s0);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 12px;
+    gap: 16px;
 }
 
 .setting-row:last-child {
@@ -1131,13 +1012,15 @@ select option {
 }
 
 .sl {
-    font-size: 14px;
+    font-size: 15px;
+    font-weight: 600;
     letter-spacing: 0.3px;
+    color: var(--text);
 }
 
 .sd {
-    font-size: 11px;
-    color: var(--dim);
+    font-size: 13px;
+    color: var(--ov2);
     margin-top: 4px;
     letter-spacing: 0;
 }
@@ -1147,8 +1030,8 @@ select option {
    ══════════════════════════════════════════════════════ */
 #s-player {
     align-items: center;
-    padding: 32px 24px 44px;
-    gap: 32px;
+    padding: 36px 24px 52px;
+    gap: 36px;
     overflow-y: auto;
 }
 
@@ -1156,49 +1039,51 @@ select option {
     text-align: center;
 }
 
-.p-room-code {
-    font-size: 38px;
-    font-weight: 700;
-    letter-spacing: 10px;
-    color: var(--g);
-    text-shadow: 0 0 18px var(--g), 0 0 45px rgba(0,255,65,.25);
+.p-room-lbl {
+    font-size: 13px;
+    letter-spacing: 3px;
+    color: var(--ov1);
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    font-weight: 600;
 }
 
-.p-room-lbl {
-    font-size: 9px;
-    letter-spacing: 3px;
-    color: var(--dim);
-    margin-bottom: 6px;
-    text-transform: uppercase;
+.p-room-code {
+    font-size: 44px;
+    font-weight: 800;
+    letter-spacing: 12px;
+    color: var(--lav);
+    text-shadow: 0 0 24px rgba(180,190,254,0.35);
 }
 
 .p-name-lbl {
-    font-size: 15px;
-    color: var(--mid);
-    margin-top: 10px;
+    font-size: 16px;
+    color: var(--sub0);
+    margin-top: 12px;
     letter-spacing: 0.5px;
+    font-weight: 600;
 }
 
 /* player timer */
 .p-timer {
-    font-size: 64px;
+    font-size: 72px;
     font-weight: 700;
     letter-spacing: 3px;
-    color: var(--g);
+    color: var(--teal);
     text-align: center;
     font-variant-numeric: tabular-nums;
-    text-shadow: 0 0 20px rgba(0,255,65,.4);
+    text-shadow: 0 0 24px rgba(148,226,213,0.4);
     transition: color .3s, text-shadow .3s;
 }
 
 .p-timer.warn {
     color: var(--yellow);
-    text-shadow: 0 0 20px rgba(255,225,65,.45);
+    text-shadow: 0 0 20px rgba(249,226,175,0.5);
 }
 
 .p-timer.danger {
     color: var(--red);
-    text-shadow: 0 0 20px rgba(255,68,85,.5);
+    text-shadow: 0 0 20px rgba(243,139,168,0.55);
     animation: tblink .5s step-end infinite;
 }
 
@@ -1209,41 +1094,43 @@ select option {
 /* team picker */
 .team-picker {
     width: 100%;
-    max-width: 540px;
+    max-width: 580px;
 }
 
 .team-picker-title {
-    font-size: 10px;
-    letter-spacing: 4px;
-    color: var(--dim);
-    margin-bottom: 16px;
+    font-size: 14px;
+    letter-spacing: 3px;
+    color: var(--sub0);
+    margin-bottom: 18px;
     text-align: center;
+    font-weight: 600;
 }
 
 .team-picker-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 12px;
 }
 
 .team-btn {
-    padding: 18px 14px;
-    border: 1px solid var(--border2);
+    padding: 22px 18px;
+    border: 2px solid var(--s1);
     border-radius: var(--r);
     background: var(--panel);
     color: var(--text);
     font-family: 'JetBrains Mono', monospace;
-    font-size: 13px;
+    font-size: 15px;
     letter-spacing: 1px;
     cursor: pointer;
     text-align: center;
     transition: all .2s;
     box-shadow: var(--shadow-panel);
+    font-weight: 600;
 }
 
 .team-btn:hover {
-    border-color: var(--mid);
-    background: var(--panel2);
+    border-color: var(--lav);
+    background: rgba(180,190,254,0.06);
     transform: translateY(-2px);
 }
 
@@ -1252,14 +1139,14 @@ select option {
 }
 
 .team-btn.mine {
-    border-width: 2px;
-    font-weight: 700;
+    border-width: 3px;
+    font-weight: 800;
 }
 
 .tb-count {
-    font-size: 11px;
-    color: var(--dim);
-    margin-top: 6px;
+    font-size: 13px;
+    color: var(--ov2);
+    margin-top: 8px;
 }
 
 /* ── BUZZ BUTTON ───────────────────────────────────── */
@@ -1267,11 +1154,10 @@ select option {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 22px;
+    gap: 24px;
     position: relative;
 }
 
-/* ripple container */
 .buzz-ripple {
     position: absolute;
     top: 50%;
@@ -1288,73 +1174,41 @@ select option {
 .buzz-ring {
     position: absolute;
     border-radius: 50%;
-    border: 1px solid rgba(0,255,65,0.3);
-    animation: ring-expand 1.8s ease-out infinite;
+    border: 2px solid rgba(180,190,254,0.25);
+    animation: ring-expand 2s ease-out infinite;
     pointer-events: none;
 }
 
 .buzz-ring:nth-child(1) { animation-delay: 0s; }
-.buzz-ring:nth-child(2) { animation-delay: 0.6s; }
-.buzz-ring:nth-child(3) { animation-delay: 1.2s; }
+.buzz-ring:nth-child(2) { animation-delay: 0.7s; }
+.buzz-ring:nth-child(3) { animation-delay: 1.4s; }
 
 @keyframes ring-expand {
-    0% {
-        width: 280px; height: 280px;
-        opacity: 0.5;
-    }
-    100% {
-        width: 480px; height: 480px;
-        opacity: 0;
-    }
+    0%   { width: 300px; height: 300px; opacity: 0.6; }
+    100% { width: 520px; height: 520px; opacity: 0; }
 }
 
 #buzz-btn {
-    width: clamp(240px, 56vw, 300px);
-    height: clamp(240px, 56vw, 300px);
+    width: clamp(260px, 58vw, 320px);
+    height: clamp(260px, 58vw, 320px);
     border-radius: 50%;
-    border: 2px solid var(--border2);
-    background: var(--panel);
-    color: var(--dim);
+    border: 3px solid var(--s1);
+    background: var(--s0);
+    color: var(--ov1);
     font-family: 'JetBrains Mono', monospace;
-    font-size: clamp(18px, 4vw, 24px);
-    font-weight: 700;
-    letter-spacing: 5px;
+    font-size: clamp(22px, 5vw, 30px);
+    font-weight: 800;
+    letter-spacing: 4px;
     cursor: pointer;
-    transition: all .15s cubic-bezier(0.4,0,0.2,1);
-    box-shadow:
-        0 0 0 1px rgba(0,255,65,0.04),
-        0 8px 40px rgba(0,0,0,0.6),
-        inset 0 1px 0 rgba(255,255,255,0.03);
+    transition: all .2s cubic-bezier(0.4,0,0.2,1);
+    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
     user-select: none;
     -webkit-user-select: none;
-    position: relative;
-    overflow: hidden;
-}
-
-#buzz-btn::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: 50%;
-    background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.04) 0%, transparent 60%);
-    pointer-events: none;
-}
-
-#buzz-btn::after {
-    content: '';
-    position: absolute;
-    inset: 8px;
-    border-radius: 50%;
-    border: 1px solid rgba(0,255,65,0.05);
-    pointer-events: none;
 }
 
 #buzz-btn:active:not(:disabled) {
-    transform: scale(.94);
-    box-shadow:
-        0 0 0 1px rgba(0,255,65,0.06),
-        0 4px 24px rgba(0,0,0,0.7),
-        inset 0 0 30px rgba(0,0,0,0.3);
+    transform: scale(.93);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
 }
 
 #buzz-btn:disabled {
@@ -1362,115 +1216,126 @@ select option {
 }
 
 #buzz-btn.s-open {
-    border-color: var(--g);
-    border-width: 2px;
-    color: var(--g);
-    background: radial-gradient(circle, rgba(0,255,65,0.08) 0%, var(--panel) 70%);
+    border-color: var(--blue);
+    border-width: 4px;
+    color: var(--blue);
+    background: rgba(137,180,250,0.08);
     box-shadow:
-        0 0 40px rgba(0,255,65,.2),
-        0 0 80px rgba(0,255,65,.08),
-        0 8px 40px rgba(0,0,0,0.5),
-        inset 0 0 30px rgba(0,255,65,.04);
+        0 0 50px rgba(137,180,250,0.25),
+        0 0 100px rgba(137,180,250,0.1),
+        0 8px 40px rgba(0,0,0,0.4);
 }
 
-#buzz-btn.s-open::after {
-    border-color: rgba(0,255,65,0.1);
-    animation: inner-ring 2s ease-in-out infinite;
-}
-
-@keyframes inner-ring {
-    0%, 100% { opacity: 0.5; transform: scale(1); }
-    50% { opacity: 1; transform: scale(0.97); }
+#buzz-btn.s-open:hover {
+    background: rgba(137,180,250,0.14);
+    box-shadow:
+        0 0 70px rgba(137,180,250,0.35),
+        0 0 120px rgba(137,180,250,0.15),
+        0 8px 40px rgba(0,0,0,0.4);
+    transform: scale(1.02);
 }
 
 #buzz-btn.s-first {
     border-color: var(--yellow);
-    border-width: 3px;
+    border-width: 4px;
     color: var(--yellow);
-    background: radial-gradient(circle, rgba(255,225,65,0.12) 0%, var(--panel) 70%);
+    background: rgba(249,226,175,0.1);
     box-shadow:
-        0 0 50px rgba(255,225,65,.4),
-        0 0 100px rgba(255,225,65,.15),
-        0 8px 40px rgba(0,0,0,0.5);
+        0 0 60px rgba(249,226,175,0.5),
+        0 0 120px rgba(249,226,175,0.2),
+        0 8px 40px rgba(0,0,0,0.4);
     animation: pulse-win .8s ease-in-out infinite alternate;
 }
 
 #buzz-btn.s-buzzed {
-    border-color: rgba(0,204,52,0.4);
-    color: var(--g2);
-    opacity: .6;
-    background: var(--panel);
+    border-color: rgba(166,227,161,0.4);
+    color: var(--green);
+    opacity: .65;
+    background: var(--s0);
 }
 
 #buzz-btn.s-locked {
-    border-color: rgba(255,68,85,0.4);
+    border-color: rgba(243,139,168,0.5);
     color: var(--red);
-    box-shadow:
-        0 0 24px rgba(255,68,85,.12),
-        0 8px 40px rgba(0,0,0,0.5);
+    background: rgba(243,139,168,0.05);
+    box-shadow: 0 0 24px rgba(243,139,168,0.15), 0 8px 40px rgba(0,0,0,0.4);
 }
 
 #buzz-btn.s-closed {
-    border-color: var(--border2);
-    color: var(--dim);
-    background: var(--panel);
+    border-color: var(--s1);
+    color: var(--ov0);
+    background: var(--s0);
 }
 
 @keyframes pulse-win {
-    from {
-        box-shadow: 0 0 30px rgba(255,225,65,.3), 0 0 60px rgba(255,225,65,.1);
-    }
-    to {
-        box-shadow: 0 0 70px rgba(255,225,65,.65), 0 0 130px rgba(255,225,65,.2);
-    }
+    from { box-shadow: 0 0 40px rgba(249,226,175,0.4), 0 0 80px rgba(249,226,175,0.15); }
+    to   { box-shadow: 0 0 80px rgba(249,226,175,0.7), 0 0 150px rgba(249,226,175,0.25); }
 }
 
 .buzz-status {
-    font-size: 12px;
-    letter-spacing: 3px;
-    color: var(--dim);
+    font-size: 16px;
+    letter-spacing: 2px;
+    color: var(--sub0);
     text-align: center;
-    min-height: 24px;
+    min-height: 26px;
     transition: color .3s;
     text-transform: uppercase;
+    font-weight: 600;
+}
+
+.spacebar-hint {
+    font-size: 14px;
+    letter-spacing: 2px;
+    color: var(--ov0);
+    text-align: center;
+    text-transform: uppercase;
+    opacity: 0;
+    transition: opacity .3s;
+    margin-top: -12px;
+}
+
+.spacebar-hint.visible {
+    opacity: 1;
 }
 
 /* feed & roster */
 .p-panel {
     width: 100%;
-    max-width: 540px;
+    max-width: 580px;
 }
 
 .p-panel-title {
-    font-size: 10px;
-    letter-spacing: 4px;
-    color: var(--dim);
-    margin-bottom: 14px;
+    font-size: 14px;
+    letter-spacing: 3px;
+    color: var(--sub0);
+    margin-bottom: 16px;
     text-transform: uppercase;
+    font-weight: 700;
 }
 
 .feed-entry {
-    padding: 12px 16px;
-    background: var(--bg2);
-    border: 1px solid var(--border2);
-    border-left: 3px solid var(--g);
-    margin-bottom: 8px;
-    font-size: 14px;
+    padding: 14px 18px;
+    background: var(--s0);
+    border: 1px solid var(--s1);
+    border-left: 4px solid var(--blue);
+    margin-bottom: 10px;
+    font-size: 15px;
     border-radius: 0 var(--r) var(--r) 0;
-    line-height: 1.5;
+    line-height: 1.6;
 }
 
 .feed-entry.first {
     border-left-color: var(--yellow);
+    background: rgba(249,226,175,0.06);
 }
 
 .roster-row {
     display: flex;
     align-items: center;
-    gap: 10px;
-    padding: 10px 0;
-    border-bottom: 1px solid var(--border);
-    font-size: 14px;
+    gap: 12px;
+    padding: 12px 0;
+    border-bottom: 1px solid var(--s0);
+    font-size: 15px;
 }
 
 .roster-row:last-child {
@@ -1478,12 +1343,13 @@ select option {
 }
 
 .roster-me {
-    color: var(--g);
+    color: var(--lav);
+    font-weight: 700;
 }
 
 .roster-dot {
-    width: 9px;
-    height: 9px;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
     flex-shrink: 0;
 }
@@ -1493,13 +1359,13 @@ select option {
     display: none;
     position: fixed;
     inset: 0;
-    background: rgba(0,0,0,.85);
+    background: rgba(0,0,0,.75);
     z-index: 900;
     align-items: center;
     justify-content: center;
-    padding: 24px;
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
+    padding: 28px;
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
 }
 
 .modal-bg.on {
@@ -1507,98 +1373,87 @@ select option {
 }
 
 .modal {
-    background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
-    border: 1px solid var(--g3);
+    background: #1a1a2e;
+    border: 2px solid var(--s2);
     border-radius: var(--r2);
-    padding: 36px 32px;
+    padding: 44px 40px;
     width: 100%;
-    max-width: 460px;
+    max-width: 480px;
     display: flex;
     flex-direction: column;
-    gap: 20px;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 30px rgba(0,255,65,0.06);
-    position: relative;
-}
-
-.modal::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(0,255,65,0.3), transparent);
-    border-radius: var(--r2) var(--r2) 0 0;
+    gap: 24px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
 }
 
 .modal h2 {
-    font-size: 13px;
-    letter-spacing: 3px;
-    color: var(--g);
+    font-size: 18px;
+    letter-spacing: 2px;
+    color: var(--lav);
+    font-weight: 700;
 }
 
 .modal-btns {
     display: flex;
-    gap: 10px;
+    gap: 12px;
     justify-content: flex-end;
-    margin-top: 4px;
+    margin-top: 8px;
 }
 
 /* ── TOAST ─────────────────────────────────────────── */
 #toasts {
     position: fixed;
-    top: 74px;
-    right: 18px;
+    top: 84px;
+    right: 20px;
     z-index: 9999;
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 12px;
     pointer-events: none;
 }
 
 .toast {
-    padding: 12px 20px;
-    background: var(--bg2);
-    border: 1px solid var(--border2);
-    font-size: 12px;
-    letter-spacing: 1.5px;
+    padding: 14px 22px;
+    background: #24243e;
+    border: 2px solid var(--s2);
+    font-size: 14px;
+    letter-spacing: 1px;
     border-radius: var(--r);
-    max-width: 320px;
+    max-width: 360px;
     backdrop-filter: blur(12px);
-    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    font-weight: 600;
 }
 
 .toast.ok {
-    border-color: rgba(0,255,65,0.4);
-    color: var(--g);
-    background: rgba(0,20,8,0.95);
-    box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 12px rgba(0,255,65,0.1);
+    border-color: rgba(166,227,161,0.5);
+    color: var(--green);
+    background: rgba(30,42,30,0.98);
 }
 
 .toast.err {
-    border-color: rgba(255,68,85,0.4);
+    border-color: rgba(243,139,168,0.5);
     color: var(--red);
-    background: rgba(20,0,4,0.95);
+    background: rgba(42,24,30,0.98);
 }
 
 .toast.warn {
-    border-color: rgba(255,225,65,0.4);
+    border-color: rgba(249,226,175,0.5);
     color: var(--yellow);
-    background: rgba(18,16,0,0.95);
+    background: rgba(42,40,24,0.98);
 }
 
 /* ── EMPTY ─────────────────────────────────────────── */
 .empty {
-    font-size: 12px;
-    color: var(--dim);
-    letter-spacing: 2px;
+    font-size: 14px;
+    color: var(--ov1);
+    letter-spacing: 1.5px;
     text-align: center;
-    padding: 32px;
+    padding: 36px;
     text-transform: uppercase;
 }
 
 /* ── RESPONSIVE ────────────────────────────────────── */
-@media (max-width: 680px) {
+@media (max-width: 720px) {
     #s-mod {
         flex-direction: column;
         height: auto;
@@ -1609,34 +1464,41 @@ select option {
         width: 100%;
         min-width: unset;
         border-right: none;
-        border-bottom: 1px solid var(--border2);
+        border-bottom: 2px solid var(--s1);
     }
 
     .mod-body {
-        padding: 16px;
+        padding: 20px;
     }
 
     .timer-digits {
-        font-size: 42px;
+        font-size: 44px;
     }
 
     .land-card {
-        min-width: 260px;
-        padding: 28px 24px;
+        min-width: 280px;
+        padding: 32px 28px;
     }
 
     #buzz-btn {
-        width: clamp(220px, 70vw, 280px);
-        height: clamp(220px, 70vw, 280px);
+        width: clamp(240px, 72vw, 300px);
+        height: clamp(240px, 72vw, 300px);
     }
 }
 
-@media (max-width: 440px) {
+@media (max-width: 460px) {
     header {
-        padding: 0 16px;
+        padding: 0 18px;
+        height: 64px;
+        min-height: 64px;
     }
+
     .logo {
         font-size: 18px;
-        letter-spacing: 5px;
+        letter-spacing: 4px;
+    }
+
+    #s-mod {
+        height: calc(100dvh - 64px);
     }
 }