From b29ab5c584eec28dcb3f660ab55c31943faeff46 Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@nousresearch.com>
Date: Sun, 14 Jun 2026 12:53:59 +0200
Subject: [PATCH] fix: prevent js-dos CSS from overriding custom button styles

The Play page injects js-dos CSS from CDN which has its own .btn
rules. Because it loads after the app CSS, it was overriding the
custom phosphor-green button styles (including the Upload button
in the header).

Fixed by doubling the class selector (.btn.btn) to raise specificity
to (0,2,0), which beats injected CSS regardless of load order.
---
 frontend/src/app.css | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 0cf7e73..5aafc64 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -98,7 +98,8 @@ h3 { font-size: 1.2rem; }
 /* ═══════════════════════════════════════════════════════════════
    BUTTONS
    ═══════════════════════════════════════════════════════════════ */
-.btn {
+/* Double-class selector to win specificity against injected CSS */
+.btn.btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -113,30 +114,30 @@ h3 { font-size: 1.2rem; }
   cursor: pointer;
   transition: all 0.15s ease;
 }
-.btn:hover {
+.btn.btn:hover {
   background: var(--phosphor-burn);
   border-color: var(--phosphor);
   box-shadow: 0 0 12px var(--phosphor-dark);
 }
-.btn:active {
+.btn.btn:active {
   transform: scale(0.97);
 }
 
-.btn-primary {
+.btn-primary.btn-primary {
   background: var(--phosphor-dark);
   border-color: var(--phosphor);
   color: var(--phosphor-glow);
 }
-.btn-primary:hover {
+.btn-primary.btn-primary:hover {
   background: var(--phosphor-dim);
   color: var(--bg);
 }
 
-.btn-danger {
+.btn-danger.btn-danger {
   border-color: #cc3333;
   color: #cc3333;
 }
-.btn-danger:hover {
+.btn-danger.btn-danger:hover {
   background: #331111;
   border-color: #ff4444;
   color: #ff4444;
@@ -187,7 +188,7 @@ input::placeholder {
 @media (max-width: 640px) {
   h1 { font-size: 1.5rem; }
   h2 { font-size: 1.25rem; }
-  .btn { padding: 8px 14px; font-size: 0.85rem; min-height: 40px; }
+  .btn.btn { padding: 8px 14px; font-size: 0.85rem; min-height: 40px; }
   input, textarea, select { font-size: 16px; } /* prevents iOS zoom */
 }