Push

pwa/src/components/Profile.css

@@ -3,15 +3,16 @@
 /* Header styles removed - using game-header from Game.css */
 
 /* Loading and error states */
-.game-main .profile-loading, 
+.game-main .profile-loading,
 .game-main .profile-error {
   max-width: 600px;
   margin: 4rem auto;
   text-align: center;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--game-bg-panel);
   padding: 3rem;
-  border-radius: 12px;
-  border: 2px solid rgba(107, 185, 240, 0.3);
+  border-radius: var(--game-radius-md);
+  border: 2px solid var(--game-border-color);
+  box-shadow: var(--game-shadow-card);
 }
 
 .game-main .profile-error button {
@@ -36,14 +37,15 @@
 }
 
 .profile-info-card {
-  background: rgba(0, 0, 0, 0.4);
-  border: 2px solid rgba(107, 185, 240, 0.3);
-  border-radius: 12px;
+  background: var(--game-bg-panel);
+  border: 2px solid var(--game-border-color);
+  border-radius: var(--game-radius-md);
   padding: 2rem;
   text-align: center;
   height: fit-content;
   position: sticky;
   top: 2rem;
+  box-shadow: var(--game-shadow-card);
 }
 
 .profile-avatar {
@@ -65,12 +67,12 @@
 .profile-name {
   font-size: 1.8rem;
   margin: 0 0 0.5rem 0;
-  color: #6bb9f0;
+  color: var(--game-text-highlight);
 }
 
 .profile-username {
   font-size: 1rem;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--game-text-secondary);
   margin: 0 0 1rem 0;
 }
 
@@ -121,17 +123,18 @@
 }
 
 .stats-section {
-  background: rgba(0, 0, 0, 0.4);
-  border: 2px solid rgba(107, 185, 240, 0.3);
-  border-radius: 12px;
+  background: var(--game-bg-panel);
+  border: 2px solid var(--game-border-color);
+  border-radius: var(--game-radius-md);
   padding: 1.5rem;
+  box-shadow: var(--game-shadow-card);
 }
 
 .section-title {
   font-size: 1.3rem;
   margin: 0 0 1rem 0;
-  color: #6bb9f0;
-  border-bottom: 2px solid rgba(107, 185, 240, 0.3);
+  color: var(--game-color-primary);
+  border-bottom: 2px solid var(--game-border-color);
   padding-bottom: 0.75rem;
 }
 
@@ -148,7 +151,7 @@
 }
 
 .stat-label {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--game-text-secondary);
   font-size: 0.95rem;
   padding-right: 1rem;
 }
@@ -156,7 +159,7 @@
 .stat-value {
   font-weight: 700;
   font-size: 1.1rem;
-  color: #fff;
+  color: var(--game-text-primary);
   padding-left: 1rem;
 }
 
@@ -182,6 +185,7 @@
 
 /* Mobile responsive */
 @media (max-width: 768px) {
+
   /* Remove tab bar spacing for profile page */
   .game-main {
     margin-bottom: 0 !important;
@@ -190,7 +194,8 @@
   .game-main .profile-container {
     grid-template-columns: 1fr;
     padding: 1rem;
-    padding-top: 4rem; /* Space for hamburger button */
+    padding-top: 4rem;
+    /* Space for hamburger button */
     max-width: 100vw;
     overflow-x: hidden;
   }
@@ -202,4 +207,4 @@
   .profile-stats-grid {
     grid-template-columns: 1fr;
   }
-}
+}