feat: copy username

src/app/pages/profile/profile.component.css

@@ -15,16 +15,20 @@
 }
 
 .building-structure {
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+  background: linear-gradient(135deg, var(--bldg-body) 0%, var(--bldg-mid) 50%, var(--bldg-lit) 100%);
   border: 2px solid var(--dlg-border);
   border-radius: 8px;
   box-shadow: var(--bb-glow), inset 0 0 20px rgba(0, 210, 255, 0.1);
   overflow: hidden;
 }
 
+.cityscape-shell.sunset .building-structure {
+  box-shadow: var(--bb-glow), inset 0 0 20px rgba(255, 120, 40, 0.1);
+}
+
 .building-top {
   height: 30px;
-  background: linear-gradient(180deg, #0f3460 0%, #1a1a2e 100%);
+  background: linear-gradient(180deg, var(--bldg-mid) 0%, var(--bldg-body) 100%);
   border-bottom: 1px solid rgba(0, 210, 255, 0.3);
   display: flex;
   align-items: center;
@@ -36,6 +40,10 @@
   position: relative;
 }
 
+.cityscape-shell.sunset .building-top {
+  border-bottom-color: rgba(255, 120, 40, 0.3);
+}
+
 .building-top::after {
   content: 'MY PROFILE';
   font-size: 12px;
@@ -51,6 +59,10 @@
   align-items: center;
 }
 
+.cityscape-shell.sunset .building-main {
+  background: linear-gradient(90deg, rgba(255, 120, 40, 0.05) 0%, transparent 15%, transparent 85%, rgba(255, 120, 40, 0.05) 100%);
+}
+
 .building-side {
   display: flex;
   flex-direction: column;
@@ -63,15 +75,23 @@
   padding-right: 15px;
 }
 
+.cityscape-shell.sunset .building-side.left-side {
+  border-right-color: rgba(255, 120, 40, 0.2);
+}
+
 .building-side.right-side {
   border-left: 1px solid rgba(0, 210, 255, 0.2);
   padding-left: 15px;
 }
 
+.cityscape-shell.sunset .building-side.right-side {
+  border-left-color: rgba(255, 120, 40, 0.2);
+}
+
 .window {
   width: 40px;
   height: 40px;
-  background: linear-gradient(135deg, #00d5ff 0%, #0288d1 100%);
+  background: linear-gradient(135deg, var(--win-cool) 0%, var(--win-cool) 100%);
   border: 1px solid rgba(0, 210, 255, 0.5);
   border-radius: 2px;
   box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
@@ -79,6 +99,13 @@
   animation: windowFlicker 4s ease-in-out infinite;
 }
 
+.cityscape-shell.sunset .window {
+  background: linear-gradient(135deg, var(--win-warm) 0%, var(--win-warm) 100%);
+  border-color: rgba(255, 120, 40, 0.5);
+  box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
+  animation: windowFlickerSunset 4s ease-in-out infinite;
+}
+
 @keyframes windowFlicker {
   0%, 100% {
     box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
@@ -88,6 +115,15 @@
   }
 }
 
+@keyframes windowFlickerSunset {
+  0%, 100% {
+    box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 15px rgba(255, 120, 40, 0.6), inset 0 0 12px rgba(255, 120, 40, 0.3);
+  }
+}
+
 .building-center {
   display: flex;
   justify-content: center;
@@ -105,6 +141,11 @@
   min-width: 250px;
 }
 
+.cityscape-shell.sunset .player-display-window {
+  background: linear-gradient(135deg, rgba(182, 64, 255, 0.1) 0%, rgba(182, 64, 255, 0.05) 100%);
+  box-shadow: 0 0 20px rgba(255, 64, 249, 0.3), inset 0 0 15px rgba(255, 64, 249, 0.1);
+}
+
 .player-avatar {
   font-size: 4rem;
   margin-bottom: 15px;
@@ -133,6 +174,28 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 8px 12px;
+  border-radius: 4px;
+  position: relative;
+}
+
+.player-name:hover {
+  filter: brightness(1.2);
+  background: linear-gradient(90deg, var(--bb-tag), var(--bb-title));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  transform: scale(1.05);
+}
+
+.player-name.copied {
+  background: linear-gradient(90deg, #4caf50, #66bb6a);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
 }
 
 .player-id-label {
@@ -151,7 +214,7 @@
   font-size: 18px;
   font-weight: 700;
   letter-spacing: 2px;
-  color: #00d5ff;
+  color: var(--bb-tag);
   background: rgba(0, 210, 255, 0.15);
   padding: 12px 16px;
   border: 1.5px solid var(--bb-tag);
@@ -164,12 +227,23 @@
   user-select: text;
 }
 
+.cityscape-shell.sunset .player-id-value {
+  background: rgba(182, 64, 255, 0.15);
+  box-shadow: 0 0 15px rgba(255, 64, 249, 0.4);
+  text-shadow: 0 0 10px rgba(255, 64, 249, 0.5);
+}
+
 .player-id-value:hover {
   background: rgba(0, 210, 255, 0.25);
   box-shadow: 0 0 20px rgba(0, 210, 255, 0.6);
   transform: scale(1.02);
 }
 
+.cityscape-shell.sunset .player-id-value:hover {
+  background: rgba(182, 64, 255, 0.25);
+  box-shadow: 0 0 20px rgba(255, 64, 249, 0.6);
+}
+
 .player-id-value.copied {
   background: rgba(76, 175, 80, 0.2);
   border-color: #4caf50;
@@ -208,6 +282,11 @@
   border-top: 1px solid rgba(0, 210, 255, 0.2);
 }
 
+.cityscape-shell.sunset .building-base {
+  background: linear-gradient(180deg, rgba(255, 120, 40, 0.05) 0%, rgba(255, 120, 40, 0.02) 100%);
+  border-top-color: rgba(255, 120, 40, 0.2);
+}
+
 .stat-panel {
   display: flex;
   justify-content: space-around;
@@ -247,9 +326,13 @@
   background: rgba(0, 210, 255, 0.2);
 }
 
+.cityscape-shell.sunset .stat-divider {
+  background: rgba(255, 120, 40, 0.2);
+}
+
 .building-door {
   height: 60px;
-  background: linear-gradient(90deg, #2a2a3e 0%, #1a1a2e 50%, #2a2a3e 100%);
+  background: linear-gradient(90deg, var(--bldg-mid) 0%, var(--bldg-body) 50%, var(--bldg-mid) 100%);
   border-top: 1px solid rgba(0, 210, 255, 0.2);
   border-radius: 0 0 8px 8px;
   display: flex;
@@ -259,6 +342,10 @@
   overflow: hidden;
 }
 
+.cityscape-shell.sunset .building-door {
+  border-top-color: rgba(255, 120, 40, 0.2);
+}
+
 .building-door::before {
   content: '';
   position: absolute;
@@ -269,6 +356,11 @@
   background: linear-gradient(90deg, rgba(0, 210, 255, 0.05), rgba(0, 210, 255, 0.02));
 }
 
+.cityscape-shell.sunset .building-door::before {
+  border-color: rgba(255, 120, 40, 0.3);
+  background: linear-gradient(90deg, rgba(255, 120, 40, 0.05), rgba(255, 120, 40, 0.02));
+}
+
 .door-handle {
   width: 12px;
   height: 12px;
@@ -281,6 +373,12 @@
   animation: handleGlow 2s ease-in-out infinite;
 }
 
+.cityscape-shell.sunset .door-handle {
+  background: radial-gradient(circle at 30% 30%, rgba(255, 120, 40, 0.8), rgba(255, 120, 40, 0.4));
+  box-shadow: 0 0 10px rgba(255, 120, 40, 0.6);
+  animation: handleGlowSunset 2s ease-in-out infinite;
+}
+
 @keyframes handleGlow {
   0%, 100% {
     box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
@@ -290,6 +388,15 @@
   }
 }
 
+@keyframes handleGlowSunset {
+  0%, 100% {
+    box-shadow: 0 0 10px rgba(255, 120, 40, 0.6);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(255, 120, 40, 0.9);
+  }
+}
+
 .back-btn {
   position: absolute;
   top: -50px;
@@ -314,15 +421,9 @@
   box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
 }
 
-.sunset .building-structure {
+.cityscape-shell.sunset .back-btn:hover {
-  background: linear-gradient(135deg, #3d2f27 0%, #4a3a30 50%, #5c3d2e 100%);
+  background: rgba(182, 64, 255, 0.1);
-}
+  box-shadow: 0 0 15px rgba(255, 64, 249, 0.3);
-
-.sunset .player-id-value {
-  color: #f0ad4e;
-  border-color: var(--bb-tag);
-  box-shadow: 0 0 15px rgba(242, 106, 226, 0.4);
-  text-shadow: 0 0 10px rgba(242, 106, 226, 0.5);
 }
 
 @media (max-width: 600px) {
@@ -374,8 +475,4 @@
     font-size: 9px;
     padding: 0.4rem 0.8rem;
   }
-}
-    height: 80px;
-    font-size: 2.5rem;
-  }
 }

src/app/pages/profile/profile.component.html

@@ -42,12 +42,15 @@
               <div class="building-center">
                 <div class="player-display-window">
                   <div class="player-avatar">👤</div>
-                  <div class="player-name">{{ user.username }}</div>
+                  <div class="player-name" (click)="copyUsername(user.username)" [class.copied]="usernameCopied" title="Click to copy">{{ user.username }}</div>
                   <div class="player-id-label">PLAYER ID</div>
                   <div class="player-id-value" (click)="copyPlayerId(user.id)" [class.copied]="idCopied" title="Click to copy">{{ user.id }}</div>
                   @if (idCopied) {
                   <div class="copy-notification">✓ COPIED</div>
                   }
+                  @if (usernameCopied) {
+                  <div class="copy-notification">✓ COPIED</div>
+                  }
                 </div>
               </div>
               

src/app/pages/profile/profile.component.ts

@@ -30,6 +30,7 @@ export class ProfileComponent implements OnInit {
   currentUser: CurrentUser | null = null;
   isSunsetMode = false;
   idCopied = false;
+  usernameCopied = false;
 
   stars: Star[] = [];
   bgBuildings: BackgroundBuilding[] = [];
@@ -67,6 +68,15 @@ export class ProfileComponent implements OnInit {
     });
   }
 
+  copyUsername(username: string): void {
+    navigator.clipboard.writeText(username).then(() => {
+      this.usernameCopied = true;
+      setTimeout(() => {
+        this.usernameCopied = false;
+      }, 2000);
+    });
+  }
+
   private generateStars(count: number): void {
     this.stars = Array.from({ length: count }, () => {
       const size = Math.random() * 2 + 0.5;