From 29f92fff88cd5d64f7c67e0a69001dae524561d1 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Sat, 7 Mar 2026 11:44:02 -0800
Subject: [PATCH] feat: responsive layout for mobile and small screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stacks the sidebar above content on ≤768px, wraps the resource bar,
hides decorative labels/badges to reduce clutter, and collapses the
click area into a compact horizontal strip. Profile link button labels
hide on ≤480px leaving icon-only buttons. Tab bar already scrolled
horizontally so no further changes needed there.
---
 apps/web/src/components/ui/ResourceBar.tsx |   6 +-
 apps/web/src/styles.css                    | 114 +++++++++++++++++++++
 2 files changed, 117 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/ui/ResourceBar.tsx b/apps/web/src/components/ui/ResourceBar.tsx
index 3b4279e..ddf7dd5 100644
--- a/apps/web/src/components/ui/ResourceBar.tsx
+++ b/apps/web/src/components/ui/ResourceBar.tsx
@@ -90,7 +90,7 @@ export const ResourceBar = ({
         target="_blank"
         title="Support the developer"
       >
-        💜 Donate
+        💜 <span className="btn-label">Donate</span>
       </a>
       <a
         className="profile-link-button"
@@ -99,7 +99,7 @@ export const ResourceBar = ({
         target="_blank"
         title="Join our Discord"
       >
-        💬 Discord
+        💬 <span className="btn-label">Discord</span>
       </a>
       {syncError !== null ? (
         <span className="save-status save-error" title={syncError}>
@@ -126,7 +126,7 @@ export const ResourceBar = ({
         target="_blank"
         title="View your public profile"
       >
-        👤 Profile
+        👤 <span className="btn-label">Profile</span>
       </a>
       <button
         className="profile-edit-button"
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 87340a2..815098e 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -2911,3 +2911,117 @@ body {
   padding: 0.5rem 0.75rem;
   text-align: center;
 }
+
+/* ===================== RESPONSIVE ===================== */
+
+/* --- Mobile (≤ 768px) --------------------------------- */
+@media (max-width: 768px) {
+  /* Resource bar wraps onto multiple lines */
+  .resource-bar {
+    flex-wrap: wrap;
+    gap: 0.35rem 0.75rem;
+    padding: 0.5rem 0.75rem;
+  }
+
+  /* Hide text labels — icon + value is enough */
+  .resource-label {
+    display: none;
+  }
+
+  .resource-value {
+    font-size: 0.95rem;
+  }
+
+  /* Prestige / transcendence / apotheosis counts visible in their own tabs */
+  .prestige-badge,
+  .transcendence-badge,
+  .apotheosis-badge {
+    display: none;
+  }
+
+  /* Profile buttons fill their own row, aligned right */
+  .profile-buttons {
+    margin-left: 0;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  /* Stack sidebar above main content */
+  .game-main {
+    flex-direction: column;
+  }
+
+  /* Sidebar becomes a compact horizontal strip */
+  .game-sidebar {
+    align-items: center;
+    border-bottom: 1px solid var(--colour-border);
+    border-right: none;
+    flex-direction: row;
+    gap: 0.75rem;
+    justify-content: center;
+    padding: 0.5rem 0.75rem;
+    width: 100%;
+  }
+
+  .game-copyright {
+    display: none;
+  }
+
+  /* Click area lays out horizontally inside the strip */
+  .click-area {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: 0.75rem;
+    text-align: left;
+  }
+
+  /* Hide the verbose "Guild Hall" heading */
+  .click-area h2 {
+    display: none;
+  }
+
+  .game-title {
+    font-size: 1rem;
+    margin-bottom: 0;
+  }
+
+  .game-version {
+    margin-bottom: 0;
+  }
+
+  /* Smaller click button for the compact strip */
+  .click-button {
+    font-size: 2rem;
+    height: 64px;
+    width: 64px;
+  }
+
+  .click-power {
+    font-size: 0.7rem;
+    margin-top: 0;
+  }
+
+  /* Early access notice is too verbose for a horizontal strip */
+  .early-access-notice {
+    display: none;
+  }
+}
+
+/* --- Small mobile (≤ 480px) --------------------------- */
+@media (max-width: 480px) {
+  /* Icon-only profile link buttons to save horizontal space */
+  .btn-label {
+    display: none;
+  }
+
+  .profile-link-button {
+    padding: 0.3rem 0.5rem;
+  }
+
+  /* Slightly smaller tab buttons */
+  .tab-button {
+    font-size: 0.8rem;
+    padding: 0.3rem 0.6rem;
+  }
+}