Backup before cleanup

pwa/src/App.css

@@ -56,7 +56,8 @@
   border-color: #535bf2;
 }
 
-input, textarea {
+input,
+textarea {
   width: 100%;
   padding: 0.75rem;
   border: 1px solid #3a3a3a;
@@ -66,7 +67,8 @@ input, textarea {
   font-size: 1rem;
 }
 
-input:focus, textarea:focus {
+input:focus,
+textarea:focus {
   outline: none;
   border-color: #646cff;
 }
@@ -85,8 +87,48 @@ input:focus, textarea:focus {
   .container {
     padding: 0.5rem;
   }
-  
+
   .card {
     padding: 1rem;
   }
 }
+
+/* Status Effects */
+.status-effects-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 15px;
+}
+
+.status-effect-badge {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  background-color: #333;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  border: 1px solid #444;
+}
+
+.status-effect-badge.damage {
+  background-color: rgba(231, 76, 60, 0.2);
+  border-color: #e74c3c;
+  color: #ffdce0;
+}
+
+.status-effect-badge.buff {
+  background-color: rgba(46, 204, 113, 0.2);
+  border-color: #2ecc71;
+  color: #d4efdf;
+}
+
+.effect-icon {
+  font-size: 1.1em;
+}
+
+.effect-timer {
+  font-family: monospace;
+  opacity: 0.8;
+}