Update public/style.css

public/style.css

@@ -4,15 +4,13 @@
   box-sizing: border-box;
 }
 
-body {
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #0d0d1a;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background: #1a1a2e;
   color: #eee;
-  height: 100vh;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 #app {
@@ -23,42 +21,46 @@ body {
   background: #16213e;
 }
 
+/* ===== HEADER ===== */
 header {
-  background: #0f3460;
-  padding: 10px 20px;
+  background: rgba(15, 52, 96, 0.95);
+  padding: 8px 12px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   border-bottom: 2px solid #533483;
-  z-index: 10;
   flex-shrink: 0;
+  z-index: 10;
 }
 
 header h1 {
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   background: linear-gradient(45deg, #e94560, #f5a623);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  margin-right: 15px;
+  margin-right: 8px;
+  white-space: nowrap;
 }
 
 .toolbar {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   flex-wrap: wrap;
 }
 
 .toolbar button {
-  background: #1a1a40;
+  background: rgba(26, 26, 64, 0.8);
   border: 1px solid #533483;
   color: #eee;
-  padding: 6px 12px;
+  padding: 4px 10px;
   border-radius: 6px;
   cursor: pointer;
-  font-size: 0.9rem;
+  font-size: 0.8rem;
   transition: 0.2s;
+  min-height: 32px;
+  min-width: 36px;
 }
 
 .toolbar button:hover {
@@ -72,32 +74,24 @@ header h1 {
 }
 
 #brushColor {
-  width: 40px;
-  height: 34px;
-  border: none;
+  width: 36px;
+  height: 30px;
+  border: 2px solid #533483;
+  border-radius: 6px;
   background: transparent;
   cursor: pointer;
   padding: 2px;
 }
 
 #sizeDisplay {
-  min-width: 28px;
+  min-width: 24px;
   text-align: center;
   font-weight: bold;
   color: #f5a623;
+  font-size: 0.9rem;
 }
 
-#status {
-  flex: 1;
-  font-size: 0.85rem;
-  color: #a8d8ea;
-  text-align: right;
-  padding: 4px 10px;
-  background: #1a1a40;
-  border-radius: 20px;
-  min-width: 200px;
-}
-
+/* ===== MAIN ===== */
 main {
   flex: 1;
   position: relative;
@@ -113,48 +107,98 @@ main {
   background: #1a1a2e;
 }
 
-#gestureIndicator {
+/* ===== GESTURE GUIDE ===== */
+#gestureGuide {
   position: absolute;
-  bottom: 30px;
-  right: 30px;
-  font-size: 3rem;
-  background: rgba(0,0,0,0.6);
-  border-radius: 50%;
-  padding: 15px;
-  width: 80px;
-  height: 80px;
+  bottom: 20px;
+  left: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 10px 14px;
+  border-radius: 10px;
+  border: 1px solid rgba(83, 52, 131, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 5;
+  pointer-events: none;
+  font-size: 0.75rem;
+}
+
+.gesture-item {
   display: flex;
-  justify-content: center;
   align-items: center;
-  transition: 0.3s;
-  border: 3px solid #555;
+  gap: 8px;
+}
+
+.gesture-icon {
+  font-size: 1.2rem;
+  width: 28px;
+  text-align: center;
+}
+
+.gesture-label {
+  color: #ccc;
+  font-weight: 300;
+}
+
+/* ===== STATUS INDICATOR (minimal) ===== */
+#statusIndicator {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  background: rgba(0, 0, 0, 0.6);
+  color: #7fdb9a;
+  border: 1px solid rgba(127, 219, 154, 0.3);
+  z-index: 5;
   pointer-events: none;
+  transition: 0.3s;
 }
 
-#gestureIndicator.gesture-on {
-  border-color: #00ff88;
-  box-shadow: 0 0 30px rgba(0,255,136,0.3);
+#statusIndicator.ready {
+  color: #7fdb9a;
+  border-color: rgba(127, 219, 154, 0.4);
 }
 
-#gestureIndicator.gesture-off {
-  border-color: #ff4444;
-  box-shadow: 0 0 30px rgba(255,68,68,0.2);
+#statusIndicator.loading {
+  color: #f5a623;
+  border-color: rgba(245, 166, 35, 0.4);
 }
 
+#statusIndicator.error {
+  color: #ff6b6b;
+  border-color: rgba(255, 107, 107, 0.4);
+}
+
+/* ===== FOOTER ===== */
 footer {
-  background: #0f3460;
-  padding: 6px 20px;
+  background: rgba(15, 52, 96, 0.95);
+  padding: 4px 16px;
   display: flex;
   justify-content: space-between;
-  font-size: 0.8rem;
-  color: #aaa;
+  font-size: 0.7rem;
+  color: #888;
   border-top: 1px solid #533483;
   flex-shrink: 0;
 }
 
-/* Responsive adjustments */
+/* ===== RESPONSIVE ===== */
 @media (max-width: 700px) {
-  header { flex-direction: column; align-items: stretch; }
+  header { flex-direction: column; align-items: stretch; gap: 4px; }
   .toolbar { justify-content: center; }
-  #status { text-align: center; }
+  #gestureGuide { 
+    bottom: 10px; 
+    left: 10px; 
+    padding: 6px 10px;
+    font-size: 0.65rem;
+  }
+  .gesture-icon { font-size: 1rem; width: 22px; }
+  #statusIndicator { top: 8px; right: 8px; font-size: 0.6rem; padding: 2px 8px; }
+}
+
+@media (max-width: 480px) {
+  #gestureGuide { display: none; } /* Hide on very small screens */
 }