Chronos Timepiece

Wrist Equipment • Time Manipulation

Legendary

<div class="gear-body">
  <div class="stats-header">
    <div class="stats-title">Primary Stats</div>
  </div>
  
  <div class="stat-row">
    <div class="stat-icon">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#ff3b30" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M18 6L6 18"></path>
        <path d="M6 6l12 12"></path>
      </svg>
    </div>
    <div class="stat-details">
      <div class="stat-name">Attack Power</div>
      <div class="stat-bar-container">
        <div class="stat-bar attack"></div>
      </div>
      <div class="stat-value">
        <span>75/100</span>
        <span class="stat-modifier">+15%</span>
      </div>
    </div>
  </div>
  
  <div class="stat-row">
    <div class="stat-icon">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#34aadc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
      </svg>
    </div>
    <div class="stat-details">
      <div class="stat-name">Defense Rating</div>
      <div class="stat-bar-container">
        <div class="stat-bar defense"></div>
      </div>
      <div class="stat-value">
        <span>58/100</span>
        <span class="stat-modifier">+8%</span>
      </div>
    </div>
  </div>
  
  <div class="stat-row">
    <div class="stat-icon">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#ffcc00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
      </svg>
    </div>
    <div class="stat-details">
      <div class="stat-name">Movement Speed</div>
      <div class="stat-bar-container">
        <div class="stat-bar speed"></div>
      </div>
      <div class="stat-value">
        <span>90/100</span>
        <span class="stat-modifier">+22%</span>
      </div>
    </div>
  </div>
  
  <div class="stat-row">
    <div class="stat-icon">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#5856d6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M12 6v6l4 2"></path>
      </svg>
    </div>
    <div class="stat-details">
      <div class="stat-name">Energy Regen</div>
      <div class="stat-bar-container">
        <div class="stat-bar energy"></div>
      </div>
      <div class="stat-value">
        <span>62/100</span>
        <span class="stat-modifier">+12%</span>
      </div>
    </div>
  </div>
  
  <div class="gear-comparison">
    <div class="comparison-header">Comparison with Equipped</div>
    
    <div class="comparison-stat">
      <div class="comparison-label">Attack</div>
      <div class="comparison-value">
        <div class="comparison-current">650</div>
        <div class="comparison-arrow">→</div>
        <div class="comparison-new">785</div>
      </div>
    </div>
    
    <div class="comparison-stat">
      <div class="comparison-label">Defense</div>
      <div class="comparison-value">
        <div class="comparison-current">420</div>
        <div class="comparison-arrow">→</div>
        <div class="comparison-new">453</div>
      </div>
    </div>
    
    <div class="comparison-stat">
      <div class="comparison-label">Speed</div>
      <div class="comparison-value">
        <div class="comparison-current">320</div>
        <div class="comparison-arrow">→</div>
        <div class="comparison-new">390</div>
      </div>
    </div>
    
    <div class="comparison-stat">
      <div class="comparison-label">Energy</div>
      <div class="comparison-value">
        <div class="comparison-current">510</div>
        <div class="comparison-arrow">→</div>
        <div class="comparison-new">571</div>
      </div>
    </div>
  </div>
</div>

<div class="gear-footer">
  <div class="gear-level">Item Level: 85</div>
  <button class="gear-equip-btn">Equip Item</button>
</div>