<div class="cityscape-shell" [class.sunset]="isSunsetMode">

  <div class="scene">
    <div class="sky">
      <div class="stars-layer">
        <div class="star" *ngFor="let star of stars" [ngStyle]="star.style"></div>
      </div>
      <div class="sun"></div>
      <div class="cloud-wrap">
        <div class="cloud cloud-a"></div>
        <div class="cloud cloud-b"></div>
        <div class="cloud cloud-c"></div>
        <div class="cloud cloud-d"></div>
        <div class="cloud cloud-e"></div>
      </div>
    </div>

    <div class="bg-layer">
      <div class="bg-bldg" *ngFor="let building of bgBuildings" [ngStyle]="building.style"></div>
    </div>

    <div class="main-layer">
      <div class="profile-building-container">
        @if (currentUser; as user) {
        <!-- Player Building with Info Inside -->
        <div class="building-wrapper">
          <div class="building-structure">
            <!-- Building top -->
            <div class="building-top"></div>
            
            <!-- Building main section with user inside -->
            <div class="building-main">
              <!-- Left side windows -->
              <div class="building-side left-side">
                <div class="window"></div>
                <div class="window"></div>
                <div class="window"></div>
                <div class="window"></div>
              </div>
              
              <!-- Center section - User Info -->
              <div class="building-center">
                <div class="player-display-window">
                  <div class="player-avatar">👤</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>
              
              <!-- Right side windows -->
              <div class="building-side right-side">
                <div class="window"></div>
                <div class="window"></div>
                <div class="window"></div>
                <div class="window"></div>
              </div>
            </div>
            
            <!-- Building base with stats -->
            <div class="building-base">
              <div class="stat-panel">
                <div class="stat">
                  <span class="stat-label">RATING</span>
                  <span class="stat-value">{{ user.rating }}</span>
                </div>
                <div class="stat-divider"></div>
                <div class="stat">
                  <span class="stat-label">MEMBER SINCE</span>
                  <span class="stat-value">{{ user.createdAt | date: 'MMM dd, yyyy' }}</span>
                </div>
              </div>
            </div>
            
            <!-- Building door -->
            <div class="building-door">
              <div class="door-handle"></div>
            </div>
          </div>
          
          <!-- Back button -->
          <button type="button" class="back-btn" (click)="goBack()">← BACK</button>
        </div>
        }
      </div>
    </div>

    <div class="haze"></div>
    <div class="ground"></div>
  </div>
</div>
