From cddf4fa692ed6011a7ef7c5f792f74e708762d89 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Sat, 7 Mar 2026 12:16:06 -0800
Subject: [PATCH] feat: use elysium avatar image for guild hall click button

---
 apps/web/src/components/game/ClickArea.tsx |  6 +++++-
 apps/web/src/styles.css                    | 13 ++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/game/ClickArea.tsx b/apps/web/src/components/game/ClickArea.tsx
index b4a8421..b46c378 100644
--- a/apps/web/src/components/game/ClickArea.tsx
+++ b/apps/web/src/components/game/ClickArea.tsx
@@ -49,7 +49,11 @@ export const ClickArea = (): React.JSX.Element => {
           type="button"
           aria-label={`Click to earn ${formatNumber(clickPower)} gold`}
         >
-          ⚔️
+          <img
+            alt="Guild Hall"
+            className="click-button-image"
+            src="https://cdn.nhcarrigan.com/avatars/elysium.png"
+          />
         </button>
         {floats.map((float) => (
           <span
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 6b9bc39..df5813e 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -201,17 +201,25 @@ body {
 }
 
 .click-button {
-  background: linear-gradient(135deg, var(--colour-accent), var(--colour-accent-light));
+  background: none;
   border: none;
   border-radius: 50%;
   cursor: pointer;
-  font-size: 3rem;
   height: 120px;
+  overflow: hidden;
+  padding: 0;
   transition: transform 0.1s, box-shadow 0.1s;
   width: 120px;
   box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
 }
 
+.click-button-image {
+  border-radius: 50%;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
 .click-button:active {
   transform: scale(0.93);
   box-shadow: 0 0 10px rgba(124, 58, 237, 0.2);
@@ -3000,7 +3008,6 @@ body {
 
   /* Smaller click button for the compact strip */
   .click-button {
-    font-size: 2rem;
     height: 64px;
     width: 64px;
   }