From 55916b807b7f3fe057ea44a85a0cba2c20a83d8f Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Mon, 22 Jun 2026 12:46:18 -0700
Subject: [PATCH] Make host lobby start button yellow during countdown

Add a `warning` variant to o-button that reuses the existing
`--color-cyber-yellow` brand token, and apply it to the host lobby's
start button while the "Starting in Xs" countdown is active. The button
stays primary blue in the Waiting/Start states.
---
 src/client/HostLobbyModal.ts                   | 2 +-
 src/client/components/baseComponents/Button.ts | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts
index e267044a6..88ef31882 100644
--- a/src/client/HostLobbyModal.ts
+++ b/src/client/HostLobbyModal.ts
@@ -473,7 +473,7 @@ export class HostLobbyModal extends BaseModal {
         <!-- Player List / footer -->
         <div class="p-6 pt-4 border-t border-white/10 bg-black/20 shrink-0">
           <o-button
-            variant="primary"
+            variant=${secondsRemaining !== null ? "warning" : "primary"}
             width="block"
             size="lg"
             .title=${statusLabel}
diff --git a/src/client/components/baseComponents/Button.ts b/src/client/components/baseComponents/Button.ts
index 4e8d0f731..a6a721edb 100644
--- a/src/client/components/baseComponents/Button.ts
+++ b/src/client/components/baseComponents/Button.ts
@@ -2,7 +2,7 @@ import { LitElement, TemplateResult, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { translateText } from "../../Utils";
 
-type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+type ButtonVariant = "primary" | "secondary" | "danger" | "warning" | "ghost";
 type ButtonSize = "xs" | "sm" | "md" | "lg";
 type ButtonWidth = "auto" | "block" | "blockDesktop" | "fill";
 type IconPosition = "left" | "right" | "only";
@@ -37,6 +37,8 @@ export class OButton extends LitElement {
         return "bg-gray-700 hover:bg-gray-600 text-white disabled:bg-gray-800 disabled:text-gray-400";
       case "danger":
         return "bg-red-600 hover:bg-red-500 text-white disabled:bg-red-900 disabled:text-gray-300";
+      case "warning":
+        return "bg-cyber-yellow hover:brightness-110 text-gray-900 disabled:bg-yellow-900 disabled:text-gray-300";
       case "ghost":
         return "bg-transparent hover:bg-white/10 text-malibu-blue disabled:text-gray-500 disabled:hover:bg-transparent";
     }