From a9ccd5d92bc6a9d29a2548a7abffaed309a6bdf4 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Sat, 16 May 2026 18:33:42 +0200
Subject: [PATCH] fixed buttons on mobile

---
 frontend/src/styles/global.css | 46 +++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index dce642e..511f46e 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -2563,6 +2563,19 @@ html.cybersigil body::after {
   opacity: 0.85;
   animation: cs-blink 1.05s steps(1, jump-none) infinite;
 }
+/* Icon-only / collapsed controls have no room for the `>` prompt + blink
+ * caret — they overflow the 2rem square on phones. Drop the pseudo when
+ * the label is hidden (matches each collapse class's own breakpoint). */
+.cybersigil .topbar-control--icon::before,
+.cybersigil .topbar-control--icon::after { content: none; }
+@media (max-width: 767px) {
+  .cybersigil .topbar-control.tc-collapse-md::before,
+  .cybersigil .topbar-control.tc-collapse-md::after { content: none; }
+}
+@media (max-width: 639px) {
+  .cybersigil .topbar-control.tc-collapse-sm::before,
+  .cybersigil .topbar-control.tc-collapse-sm::after { content: none; }
+}
 .cybersigil .topbar-control:hover {
   color: var(--crust);
   background: var(--mauve);
@@ -2719,14 +2732,15 @@ html.cybersigil body::after {
   font-weight: 700;
   text-transform: uppercase;
 }
-/* Sketch marker reads as an unstable/draft signal — amber glyph, split
- * chromatic shadow, hard offset, matching the corrupted-terminal language. */
+/* Sketch marker reads as an unstable/draft signal — magenta glyph on a
+ * dashed (unfinished) border, sky chromatic split, matching the theme. */
 .cybersigil .plate-tag-mini--draft {
-  color: var(--peach);
-  border-color: var(--peach);
-  box-shadow: 2px 2px 0 color-mix(in srgb, var(--peach) 70%, transparent);
+  color: var(--mauve);
+  border-style: dashed;
+  border-color: var(--mauve);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--sky) 55%, transparent);
   text-shadow:
-    -1px 0 0 color-mix(in srgb, var(--peach) 65%, transparent),
+    -1px 0 0 color-mix(in srgb, var(--mauve) 65%, transparent),
     1px 0 0 color-mix(in srgb, var(--sky) 55%, transparent);
 }
 .cybersigil .kbd-tip {
@@ -2914,19 +2928,21 @@ html.cybersigil body::after {
     0 0 0 1px color-mix(in srgb, var(--sky) 10%, transparent) !important;
   transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
 }
+/* Thin engraved corner bracket (same language as the post plates) — the
+ * old organic leaf mask is dropped; no sigils pinned to asset thumbnails. */
 .cybersigil .asset-tile::after {
   content: "";
   position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 26px;
-  height: 26px;
+  top: 4px;
+  left: 4px;
+  width: 13px;
+  height: 13px;
   z-index: 2;
-  background-color: color-mix(in srgb, var(--sky) 70%, transparent);
-  -webkit-mask: var(--cs-corner) center / contain no-repeat;
-  mask: var(--cs-corner) center / contain no-repeat;
+  border: 0 solid color-mix(in srgb, var(--sky) 55%, transparent);
+  border-top-width: 2px;
+  border-left-width: 2px;
   pointer-events: none;
-  transition: background-color 0.16s ease;
+  transition: border-color 0.16s ease;
 }
 .cybersigil .asset-tile:hover {
   border-color: var(--mauve) !important;
@@ -2936,7 +2952,7 @@ html.cybersigil body::after {
     4px 4px 0 0 var(--mauve) !important;
 }
 .cybersigil .asset-tile:hover::after {
-  background-color: var(--mauve);
+  border-color: var(--mauve);
 }
 .cybersigil .asset-thumb {
   background: